arifal/CKB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first initial

Browse Source
This commit is contained in:
arifal
2025-05-27 19:09:17 +07:00
commit 80375d8af3
1587 changed files with 572586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
resources/views/back/report/transaction.blade.php Normal file
View File

@@ -0,0 +1,410 @@
@extends('layouts.backapp')
@section('content')
<style>
.table-responsive {
height: 60vh;
overflow: auto;
}
.nav-link-tab {
font-weight: bold !important;
}
.nav-link-tab.active {
font-weight: normal !important;
}
.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th, .dataTables_wrapper .dataTable tr {
background: #fff;
}
</style>
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Laporan Pekerjaan
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions mt-2 mb-2">
@can('update', $menus['report.transaction'])
<a href="{{ route('report.transaction.bulkclose') }}" id="bulk-close" class="btn btn-warning">Close Terpilih</a>
@endcan
<button id="export" class="btn btn-success">Export</button>
</div>
</div>
</div>
</div>
<div class="kt-portlet__body">
<form class="kt-form kt-form--fit mb-5" id="searchForm">
<div class="row">
<div class="col-4 kt-margin-b-10-tablet-and-mobile">
<div class="input-daterange input-group" id="kt_datepicker_range">
<input type="text" class="form-control" placeholder="Tanggal Mulai" id="date_start" name="date_start">
<div class="input-group-append">
<span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
</div>
<input type="text" class="form-control" placeholder="Tanggal Akhir" id="date_end" name="date_end">
</div>
</div>
<div class="col-3 kt-margin-b-10-tablet-and-mobile">
<div class="input-daterange input-group">
<select name="mechanic" id="mechanic" class="form-control">
<option value="0" disabled selected>Mekanik</option>
@foreach ($mechanics as $mechanic)
<option value="{{ $mechanic->id }}">{{ $mechanic->name }}</option>
@endforeach
</select>
<select name="sa" id="sa" class="form-control">
<option value="0" disabled selected>SA</option>
@foreach ($sas as $sa)
<option value="{{ $sa->id }}">{{ $sa->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-3 kt-margin-b-10-tablet-and-mobile">
<div class="form-group">
<select name="dealer" id="dealer" class="form-control">
<option value="0" disabled selected>Dealer</option>
@foreach ($dealers as $dealer)
<option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-2 kt-margin-b-10-tablet-and-mobile">
<button type="button" class="btn btn-brand btn-elevate btn-icon-sm" id="kt_search"> Cari</button>
</div>
</div>
</form>
<!--begin: Datatable -->
<div class="table-responsive">
<table class="table" id="kt_table">
<thead>
<tr>
<th style="background: #fff;z-index: 2;"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></th>
<th style="background: #fff;z-index: 2;">Tanggal</th>
<th>Dealer</th>
<th>Mekanik</th>
<th>SA</th>
<th>No. Polisi</th>
<th>Warranty</th>
<th>Kategori</th>
<th>Qty</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
<!--begin::Modal-->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="transactionForm" data-form="store" class="kt-form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalHeading"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
@csrf
<div class="kt-portlet__body">
<div class="form-group">
<label>Dealer</label>
<select name="dealer_id" id="dealer_id" class="form-control">
@foreach ($dealers as $dealer)
<option value="{{ $dealer->id }}">{{ $dealer->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>SPK</label>
<input type="text" class="form-control" id="spk" name="spk" placeholder="SPK" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Tanggal</label>
<input type="date" class="form-control" id="date" name="date" placeholder="Tanggal" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>No. Polisi</label>
<input type="text" class="form-control" id="police_number" name="police_number" placeholder="No. Polisi" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Pekerjaan</label>
<select name="work_id" id="work_id" class="form-control">
@foreach ($works as $work)
<option value="{{ $work->id }}">{{ $work->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Qty</label>
<input type="number" class="form-control" id="qty" name="qty" placeholder="Qty" value="" autocomplete="off" />
</div>
<div class="form-group">
<label>Warranty</label>
<select name="warranty" id="warranty" class="form-control">
<option value="1">Ya</option>
<option value="0">Tidak</option>
</select>
</div>
<div class="form-group">
<label>Service Advisor</label>
<select name="sa_id" id="sa_id" class="form-control">
@foreach ($sas as $sa)
<option value="{{ $sa->id }}">{{ $sa->name }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-primary" id="saveBtn" value="create">Simpan</button>
</div>
</div>
</form>
</div>
</div>
<!--end::Modal-->
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_data') }}">
@endsection
@section('javascripts')
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#kt_table').DataTable({
processing: true,
serverSide: true,
fixedColumns: {
left: 2,
right: 1
},
ajax: {
url: $('input[name="ajax_url"]').val(),
type: "POST",
data: function (q) {
q.date_start = $('input[name="date_start"]').val();
q.date_end = $('input[name="date_end"]').val();
q.sa = $('select[name="sa"]').val();
q.mechanic = $('select[name="mechanic"]').val();
q.dealer = $('select[name="dealer"]').val();
}
},
columns: [
{
data: 'id',
orderable: false,
searchable: false,
name: 'transaction.id',
render: function(data, type, row) {
return `<input type="checkbox" name="selected[]" value="${data}" />`;
}
},
{data: 'date', name: 'transactions.date'},
{data: 'dealer_name', name: 'd.name'},
{data: 'username', name: 'users.name'},
{data: 'sa_name', name: 'sa.name'},
{data: 'police_number', name: 'transactions.police_number'},
{
data: 'warranty',
name: 'transactions.warranty',
render: function(data, type, row) {
if(row.warranty == 1){
return 'Ya'
}else{
return 'Tidak'
}
}
},
{data: 'category_name', name: 'cat.name'},
{data: 'qty', name: 'transactions.qty'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$("#export").click(function() {
let data = {
date_start : $('input[name="date_start"]').val(),
date_end : $('input[name="date_end"]').val(),
sa : $('select[name="sa"]').val(),
mechanic : $('select[name="mechanic"]').val(),
dealer : $('select[name="dealer"]').val()
}
var url = '{{ route("report.transaction.export") }}?' + $.param(data)
window.location = url;
})
function closeTransaction(id)
{
let url = $("#closeTransaction"+id).attr('data-url')
$.ajax({
url: url,
type: 'PUT',
success: function(res) {
table.ajax.reload()
}
})
}
function destroyTransaction(id)
{
let action = $("#destroyTransaction"+id).attr("data-action")
Swal.fire({
title: 'Hapus Pekerjaan?',
text: "Anda tidak akan bisa mengembalikannya!",
showCancelButton: true,
confirmButtonColor: '#d33',
cancelButtonColor: '#dedede',
confirmButtonText: 'Hapus'
}).then((result) => {
if (result.value) {
$.ajax({
url: action,
type: 'POST',
data: {
_token: $('meta[name="csrf-token"]').attr('content'),
_method: 'DELETE'
},
success: function(res) {
Swal.fire(
'Pekerjaan Dihapus!'
)
table.ajax.reload()
}
})
}
})
}
function editTransaction(id) {
let form_action = $("#editTransaction"+id).attr("data-action")
let edit_url = $("#editTransaction"+id).attr("data-url")
$("#transactionModal").modal("show")
$("#transactionForm").append('<input type="hidden" name="_method" value="PUT">')
$("#transactionForm").attr('action', form_action)
$("#transactionForm").attr('data-form', 'update')
$.get(edit_url, function(res) {
$("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
$("#transactionForm select[name='sa_id'] option[value='"+ res.data.user_sa_id +"']").prop('selected', true);
$("#transactionForm select[name='work_id'] option[value='"+ res.data.work_id +"']").prop('selected', true);
$("#transactionForm select[name='dealer_id'] option[value='"+ res.data.dealer_id +"']").prop('selected', true);
$("#transactionForm select[name='warranty'] option[value='"+ res.data.warranty +"']").prop('selected', true);
$("#transactionForm input[name='spk']").val(res.data.spk)
var d = new Date(res.data.date);
var day = ("0" + d.getDate()).slice(-2);
var month = ("0" + (d.getMonth() + 1)).slice(-2);
var date = d.getFullYear()+"-"+(month)+"-"+(day) ;
$("#transactionForm input[name='date']").val(date)
$("#transactionForm input[name='police_number']").val(res.data.police_number)
$("#transactionForm input[name='qty']").val(res.data.qty)
})
}
var KTBootstrapDatepicker = function () {
var arrows;
arrows = {
leftArrow: '<i class="la la-angle-left"></i>',
rightArrow: '<i class="la la-angle-right"></i>'
}
var daterange = function () {
$('#kt_datepicker_range').datepicker({
todayHighlight: true,
orientation: "bottom left",
templates: arrows,
autoclose: true,
format: "yyyy-mm-dd",
todayBtn: "linked",
clearBtn: true
});
}
return {
init: function () {
daterange();
}
};
}();
function bulkClose(url, selected) {
$.ajax({
url: url,
type: 'POST',
data: { selected: selected },
success: function(res) {
$("#workModal").modal("hide")
$('#workForm').trigger("reset")
table.ajax.reload()
}
})
}
jQuery(document).ready(function () {
KTBootstrapDatepicker.init();
$('#kt_search').on('click', function (e) {
e.preventDefault();
table.ajax.reload();
});
$('#bulk-close').on('click', function (e) {
e.preventDefault();
let url = $('#bulk-close').attr('href')
let selected = $("input[name='selected[]']:checked").map(function (idx, elem) {
return $(elem).val();
}).get();
bulkClose(url, selected)
table.ajax.reload();
});
$("#transactionForm").submit(function(e) {
e.preventDefault();
$.ajax({
url: $('#transactionForm').attr("action"),
type: 'POST',
data: $('#transactionForm').serialize(),
success: function(res) {
$("#transactionModal").modal("hide")
$('#transactionForm').trigger("reset")
if(res.status == 200) {
Swal.fire(
'Ubah Data',
'Data berhasil diubah'
).then((result) => {
table.ajax.reload()
})
}
}
})
})
})
</script>
@endsection

144
resources/views/back/report/transaction_dealer.blade.php Normal file
View File

@@ -0,0 +1,144 @@
@extends('layouts.backapp')
@section('content')
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Laporan Performa Dealer
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions mt-2 mb-2">
<a href="{{ route('report.transaction.bulkclose') }}" id="bulk-close" class="btn btn-warning">Close Terpilih</a>
<button id="export" class="btn btn-success">Export</button>
</div>
</div>
</div>
</div>
<div class="kt-portlet__body">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#" data-target="#kt_tabs_1_1">Tabel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tabs_1_2">Diagram</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="kt_tabs_1_1" role="tabpanel">
<div class="table-responsive">
<!--begin: Datatable -->
<table class="table table-striped table-responsive table-bordered table-hover table-checkable" id="kt_table">
<thead>
<tr>
{{-- <th><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></th> --}}
<th rowspan="2">No</th>
<th rowspan="2">SA</th>
<th colspan="{{ $work_count }}" class="text-center">Pekerjaan</th>
</tr>
<tr>
@foreach ($works as $work)
<th>{{ $work['name'] }}</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach ($trxs as $index => $transaction)
<tr>
<td>{{ $index + 1 }}</td>
<td>{{ $transaction['sa_name'] }}</td>
@foreach ($transaction['works'] as $item)
<td>{{ $item['qty'] }}</td>
@endforeach
</tr>
@endforeach
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
<div class="tab-pane" id="kt_tabs_1_2" role="tabpanel">
<div style="margin-top: 100px"><canvas id="sa-chart"></canvas></div>
</div>
</div>
</div>
</div>
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
@endsection
@section('javascripts')
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function random_rgba(alpha) {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
}
let labels = JSON.parse('{{ $sa_names }}'.replace(/(&quot\;)/g,"\""));
let labels2 = []
labels.forEach(function(label) {
if (/\s/.test(label)) {
labels2.push(label.split(" "))
}else{
labels2.push(label)
}
})
const trx_data = JSON.parse('{{ $trx_data }}'.replace(/(&quot\;)/g,"\""));
let trxs = []
trx_data.forEach(trx => {
let data = {
label : trx['work_name'],
data: trx[['qty']],
fill: false,
backgroundColor: random_rgba(0.2),
borderColor: random_rgba(1),
borderWidth: 1
}
trxs.push(data)
});
const data = {
labels: labels2,
datasets: trxs
};
new Chart($("#sa-chart"), {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
xAxis: {
position: 'top'
}
},
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
},
position: 'bottom'
}
}
}
});
$('#kt_table').DataTable();
</script>
@endsection

133
resources/views/back/report/transaction_sa.blade.php Normal file
View File

@@ -0,0 +1,133 @@
@extends('layouts.backapp')
@section('content')
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Laporan Performa SA
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions mt-4">
<form action="{{ route('report.transaction_sa') }}" method="get">
<div class="form-group row">
<div class="col-lg-2">
<label class="">Sa:</label>
<select name="sa" id="sa" class="form-control">
<option value="all">Semua Sa</option>
@foreach ($sa_datas as $sa_data)
<option @if($sa_data->id == $sa) selected @endif value="{{ $sa_data->id }}">{{ $sa_data->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label class="">Dealer:</label>
<select name="dealer" id="dealer" class="form-control">
@foreach ($dealer_datas as $dealer_data)
<option @if($dealer_data->id == $dealer) selected @endif value="{{ $dealer_data->id }}">{{ $dealer_data->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-2">
<label class="">Bulan:</label>
<select name="month" id="month" class="form-control">
<option value="01" @if($month == '01') selected @endif>Januari</option>
<option value="02" @if($month == '02') selected @endif>Februari</option>
<option value="03" @if($month == '03') selected @endif>Maret</option>
<option value="04" @if($month == '04') selected @endif>April</option>
<option value="05" @if($month == '05') selected @endif>Mei</option>
<option value="06" @if($month == '06') selected @endif>Juni</option>
<option value="07" @if($month == '07') selected @endif>Juli</option>
<option value="08" @if($month == '08') selected @endif>Agustus</option>
<option value="09" @if($month == '09') selected @endif>September</option>
<option value="10" @if($month == '10') selected @endif>Oktober</option>
<option value="11" @if($month == '11') selected @endif>November</option>
<option value="12" @if($month == '12') selected @endif>Desember</option>
</select>
</div>
<div class="col-lg-2 col-12">
<label for="year">Tahun</label>
<input type="number" class="form-control" name="year" id="year" value="{{ $year }}">
</div>
<div class="col-lg-1">
<br>
<button class="btn mt-2 btn-primary">Cari</button>
</div>
<div class="col-lg-1">
<br>
<button type="button" id="export" class="btn btn-success mt-2">Export</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="kt-portlet__body">
<style>
.nav-link-tab {
font-weight: bold !important;
}
.nav-link-tab.active {
font-weight: normal !important;
}
</style>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
</li>
</ul>
<div class="tab-content" id="data">
<div class="kt-portlet__body" style=" display: flex; justify-content: center; align-items: center;" id="spinner-data">
<div class="card card-body" style="width:200px;">
<span class="kt-spinner kt-spinner--md kt-spinner--info kt-spinner--center mt-3"></span><br>
<h5 class="mt-2 text-center">Loading Data... </h5>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
@endsection
@section('javascripts')
<script src="{{ url('js/pages/doublescroll.js') }}" type="text/javascript"></script>
<script>
$.ajax({
url: '{{ $ajax_url }}',
type: 'GET',
beforeSend: function(e){
$('#spinner-data').show();
},
success: function(res) {
$("#data").html(res)
},
complete: function(){
$('#spinner-data').hide();
},
})
$("#export").click(function() {
let data = {
month : $('select[name="month"]').val(),
dealer : $('select[name="dealer"]').val(),
sa : $('select[name="sa"]').val()
}
var url = '{{ route("report.transaction_sa.export") }}?' + $.param(data)
window.location = url;
})
</script>
@endsection

270
resources/views/back/report/transaction_sa.blade.php.old2 Normal file
View File

@@ -0,0 +1,270 @@
@extends('layouts.backapp')
@section('content')
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="kt-font-brand flaticon2-line-chart"></i>
</span>
<h3 class="kt-portlet__head-title">
Laporan Performa SA
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions mt-4">
<form action="{{ route('report.transaction_sa') }}" method="get">
<div class="form-group row">
<div class="col-lg-3">
<label class="">Sa:</label>
<select name="sa" id="sa" class="form-control">
<option value="all">Semua Sa</option>
@foreach ($sa_datas as $sa_data)
<option @if($sa_data->id == $sa) selected @endif value="{{ $sa_data->id }}">{{ $sa_data->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-4">
<label class="">Dealer:</label>
<select name="dealer" id="dealer" class="form-control">
<option value="all">Semua Dealer</option>
@foreach ($dealer_datas as $dealer_data)
<option @if($dealer_data->id == $dealer) selected @endif value="{{ $dealer_data->id }}">{{ $dealer_data->name }}</option>
@endforeach
</select>
</div>
<div class="col-lg-3">
<label class="">Bulan:</label>
<select name="month" id="month" class="form-control">
<option value="01" @if($month == '01') selected @endif>Januari</option>
<option value="02" @if($month == '02') selected @endif>Februari</option>
<option value="03" @if($month == '03') selected @endif>Maret</option>
<option value="04" @if($month == '04') selected @endif>April</option>
<option value="05" @if($month == '05') selected @endif>Mei</option>
<option value="06" @if($month == '06') selected @endif>Juni</option>
<option value="07" @if($month == '07') selected @endif>Juli</option>
<option value="08" @if($month == '08') selected @endif>Agustus</option>
<option value="09" @if($month == '09') selected @endif>September</option>
<option value="10" @if($month == '10') selected @endif>Oktober</option>
<option value="11" @if($month == '11') selected @endif>November</option>
<option value="12" @if($month == '12') selected @endif>Desember</option>
</select>
</div>
<div class="col-lg-2">
<br>
<button class="btn mt-2 btn-primary">Cari</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="kt-portlet__body">
<style>
.nav-link-tab {
font-weight: bold !important;
}
.nav-link-tab.active {
font-weight: normal !important;
}
</style>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link nav-link-tab active btn-primary text-light" data-toggle="tab" href="#kt_tabs_1_2"><i class="flaticon2-pie-chart-4 text-light"></i> Diagram</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-tab btn-primary text-light" data-toggle="tab" href="#" data-target="#kt_tabs_1_1"><i class="flaticon-squares-1 text-light"></i> Tabel</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
<div style="margin-top: 100px;width: 100%;"><canvas id="sa-chart" ></canvas></div>
</div>
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
<div class="table-responsive">
<!--begin: Datatable -->
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
<thead>
<tr>
<th rowspan="2">SA</th>
<th colspan="{{ count($works) }}" class="text-center">Pekerjaan</th>
</tr>
<tr>
@foreach ($works as $work)
<th>{{ $work['name'] }}</th>
@endforeach
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="ajax_url" value="{{ route('report.transaction_sa') }}">
@endsection
@section('javascripts')
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function random_rgba(alpha) {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
}
const options = {
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
x: {
position: 'top'
}
},
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
},
position: 'top'
}
}
}
var chart = new Chart($("#sa-chart"), {
type: 'bar',
data: {
labels: [],
datasets: []
},
plugins: [ChartDataLabels],
options: options
});
$.ajax({
url: '{{ route("report.get_sa_has_transactions") }}',
type: 'POST',
data: {
_token: '{{ csrf_token() }}',
month: '{{ $month }}',
dealer: '{{ $dealer }}',
sa: '{{ $sa }}',
},
success: function(res) {
res.forEach(function(sa, i) {
$.ajax({
url: '{{ route("report.sa_work_trx") }}',
type: 'POST',
data: {
'_token': '{{ csrf_token() }}',
'month' : '{{ $month }}',
'dealer' : '{{ $dealer }}',
'sa_filter' : '{{ $sa }}',
'sa' : sa.id,
},
success: function(resWork) {
if (/\s/.test(sa.name)) {
chart.data.labels.push(sa.name.split(" "))
if(res.length == 1) {
chart.update()
}
}else{
chart.data.labels.push(sa.name)
if(res.length == 1) {
chart.update()
}
}
let tds = `<td id="row-${sa.id}">${sa.name}</td>`;
resWork.forEach(function(work, j) {
if(i == 0) {
$.when(addTrxData(work)).then(function() {
chart.data.datasets[j].data.push(work.qty)
if(res.length == 1) {
chart.update()
}
})
}else{
chart.data.datasets[j].data.push(work.qty)
if(res.length == 1) {
chart.update()
}
}
tds += `<td>${work.qty}</td>`
})
$("#kt_table tbody").append(`
<tr>
${tds}
</tr>
`)
}
}).done(function() {
if(res.length > 1) {
chart.update()
}
})
$("#sa-chart").parent().height($("#sa-chart").parent().height() + 650)
})
}
}).done(function(res) {
if(res.length == 0) {
$("#sa-chart").parent().append(`
<div class="alert" role="alert">
<div class="alert-text">
<h4 class="alert-heading">Data Kosong!</h4>
<p>Belum ada data pekerjaan masuk</p>
<hr>
</div>
</div>
`)
$("#sa-chart").parent().css('height', '100%')
$("#sa-chart").remove()
}
})
function addTrxData(work) {
let data = {
label : work['work_name'],
data: [],
fill: false,
backgroundColor: random_rgba(0.2),
borderColor: random_rgba(1),
borderWidth: 1,
barPercentage: 0.5,
categoryPercentage: 1
}
chart.data.datasets.push(data)
}
$(".nav-link-tab.active").removeClass('btn-primary')
$(".nav-link-tab.active").removeClass('text-light')
$(".nav-link-tab.active i").toggleClass('text-light')
$(".nav-link-tab").parent().click(function() {
$(".nav-link-tab").toggleClass('btn-primary')
$(".nav-link-tab").toggleClass('text-light')
$(".nav-link-tab i").toggleClass('text-light')
})
setTimeout(() => {
$('#kt_table').DataTable();
}, 10000);
</script>
@endsection

133
resources/views/back/report/transaction_sa_data.blade.php Normal file
View File

@@ -0,0 +1,133 @@
<div class="tab-content">
<div class="tab-pane active" id="kt_tabs_1_2" role="tabpanel">
<canvas id="sa-chart" ></canvas>
</div>
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
<div class="table-responsive">
<!--begin: Datatable -->
<table class="table table-striped table-bordered table-hover table-checkable" id="kt_table">
<thead>
<tr>
<th rowspan="2">No</th>
<th colspan="{{ count($theads) }}" class="text-center">Pekerjaan</th>
</tr>
<tr>
@foreach ($theads as $thead)
<th>{{ $thead }}</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach ($work_trx as $sa_id => $trx)
<tr>
<td>{{ $loop->iteration }}</td>
@foreach ($trx as $item)
<td>{{ $item }}</td>
@endforeach
</tr>
@endforeach
</tbody>
</table>
<!--end: Datatable -->
</div>
</div>
</div>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function random_rgba(alpha) {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ','+ alpha +')';
}
let labels = JSON.parse('{{ $sa_names }}'.replace(/(&quot\;)/g,"\""));
let labels2 = []
labels.forEach(function(label) {
if (/\s/.test(label)) {
labels2.push(label.split(" "))
}else{
labels2.push(label)
}
})
const trx_data = JSON.parse('{{ $sa_trx }}'.replace(/(&quot\;)/g,"\""));
let height = trx_data.length * 20;
let chart_height = 0;
let trxs = []
trx_data.forEach(trx => {
let data = {
label : trx['work_name'],
data: trx['qty'],
fill: false,
backgroundColor: random_rgba(0.2),
borderColor: random_rgba(1),
borderWidth: 1,
barPercentage: 0.5,
categoryPercentage: 1,
skipNull: true
}
chart_height += height
trxs.push(data)
});
const data = {
labels: labels2,
datasets: trxs
};
if(labels2.length && trxs.length) {
new Chart($("#sa-chart"), {
type: 'bar',
data: data,
plugins: [ChartDataLabels],
options: {
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
x: {
position: 'top',
beginAtZero: true
}
},
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
},
position: 'top'
}
},
}
});
$("#sa-chart").parent().height($("#sa-chart").parent().height() + chart_height)
}else{
$("#sa-chart").parent().append(`
<div class="alert" role="alert">
<div class="alert-text">
<h4 class="alert-heading">Data Kosong!</h4>
<p>Belum ada data pekerjaan masuk</p>
<hr>
</div>
</div>
`)
$("#sa-chart").parent().css('height', '100%')
$("#sa-chart").remove()
}
$(".nav-link-tab.active").removeClass('btn-primary')
$(".nav-link-tab.active").removeClass('text-light')
$(".nav-link-tab.active i").toggleClass('text-light')
$(".nav-link-tab").parent().click(function() {
$(".nav-link-tab").toggleClass('btn-primary')
$(".nav-link-tab").toggleClass('text-light')
$(".nav-link-tab i").toggleClass('text-light')
})
$('#kt_table').DataTable();
</script>