first initial
This commit is contained in:
372
resources/views/transaction/recap.blade.php
Normal file
372
resources/views/transaction/recap.blade.php
Normal file
@@ -0,0 +1,372 @@
|
||||
@extends('layouts.frontapp')
|
||||
@section('styles')
|
||||
<style>
|
||||
.nav-link-tab {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.nav-link-tab.active {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTable td, .dataTables_wrapper .dataTable th {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* tr th:nth-child(1) {
|
||||
z-index: 99999;
|
||||
} */
|
||||
|
||||
</style>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="mobile-container">
|
||||
<div class="container">
|
||||
<div class="row mb-4 mt-4">
|
||||
<div class="col-4 my-auto">
|
||||
<a href="{{ route('transaction') }}" class="mt-4 btn btn-danger"><i class="fa fa-chevron-left"></i> Kembali</a>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
{{-- <h5 class="text-center mt-4">Cipta Kreasi Baru</h5> --}}
|
||||
<a href=""><img src="{{ asset('logo-ckb.png') }}" style="width: 100%" alt="LOGO CKB"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kt-portlet kt-portlet--mobile" id="kt_blockui_datatable">
|
||||
<div class="kt-portlet__head">
|
||||
<h5 class="mt-4">Laporan Rekap</h5>
|
||||
</div>
|
||||
<div class="kt-portlet__body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form action="{{ route('transaction.recap') }}" method="GET">
|
||||
<div class="row">
|
||||
<div class="col-5">
|
||||
<label>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-5 col-12">
|
||||
<label for="year">Tahun</label>
|
||||
<input type="number" class="form-control" name="year" id="year" value="{{ $year }}">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<br>
|
||||
<button type="submit" class="btn btn-success mt-2 btn-block">Cari</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p><button id="share" type="button" class="btn btn-info btn-block mt-4">Bagikan Data Bulan Ini</button></p>
|
||||
<p class="result"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3 class="kt-portlet__head-title">
|
||||
Rekap per tanggal {{ $dealer->name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kt-portlet__body">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="table-responsive">
|
||||
<!--begin: Datatable -->
|
||||
<table class="table" id="kt_table_date">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" style="width: 18%; z-index: 99;">Tanggal</th>
|
||||
<th colspan="{{ $works_count }}" class="text-center">Pekerjaan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@foreach ($works as $work)
|
||||
<th>{{ $work->name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (count($month_trxs))
|
||||
@foreach ($month_trxs as $trx)
|
||||
<tr>
|
||||
<td>{{ $trx['date'] }}</td>
|
||||
@foreach ($trx['works'] as $item)
|
||||
<td>{{ $item['qty'] }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
@else
|
||||
<tr>
|
||||
<td colspan="3" class="text-center">Tidak Ada Data</td>
|
||||
</tr>
|
||||
@endif
|
||||
{{-- <tr>
|
||||
<td>Pt B</td>
|
||||
<td>2</td>
|
||||
<td>9</td>
|
||||
<td>9</td>
|
||||
<td><a href="#" class="btn btn-info btn-sm">Detail</a></td>
|
||||
</tr> --}}
|
||||
</tbody>
|
||||
<tfoot style="background: rgba(93, 120, 255, .2) !important;">
|
||||
<tr>
|
||||
<th style="background: rgba(93, 120, 255, .2) !important;">
|
||||
<p>Total Bulan Ini</p><hr>
|
||||
<p>Total Bulan Kemarin</p>
|
||||
</th>
|
||||
@foreach ($totals as $total)
|
||||
<th style="background: rgba(93, 120, 255, .2) !important;">
|
||||
<p>{{ $total['now'] }} @if($total['now'] > $total['prev']) <i class="ml-3 fa fa-caret-up text-success"></i> @else <i class="ml-3 fa fa-caret-down text-danger"></i> @endif</p><hr>
|
||||
<p>{{ $total['prev'] }}</p>
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<!--end: Datatable -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h3 class="kt-portlet__head-title">
|
||||
Rekap per SA {{ $dealer->name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kt-portlet__body">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link nav-link-tab btn-primary text-light active" 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><canvas id="sa-chart"></canvas></div>
|
||||
</div>
|
||||
<div class="tab-pane" id="kt_tabs_1_1" role="tabpanel">
|
||||
<!--begin: Datatable -->
|
||||
<div class="table-responsive">
|
||||
<table class="table" id="kt_table_dealer">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" style="z-index: 99;">SA</th>
|
||||
<th colspan="{{ $works_count }}" class="text-center">Pekerjaan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
@foreach ($works as $work)
|
||||
<th>{{ $work->name }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (count($trxs))
|
||||
@foreach ($trxs as $trx)
|
||||
<tr>
|
||||
<td>{{ $trx['sa_name'] }}</td>
|
||||
@foreach ($trx['works'] as $item)
|
||||
<td>{{ $item['qty'] }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
@else
|
||||
<tr>
|
||||
<td colspan="3" class="text-center">Tidak Ada Data</td>
|
||||
</tr>
|
||||
@endif
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!--end: Datatable -->
|
||||
{{-- <div class="table-responsive">
|
||||
</div> --}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea id="shareThis" style="display: none;">
|
||||
@php
|
||||
$string = "\n*[Laporan SA ". $dealer->name ." ]*\n";
|
||||
$string .= "*[".$share['today_date']." ]*\n\n";
|
||||
$sum_today_trx = 0;
|
||||
|
||||
foreach ($share['today_trxs'] as $trx) {
|
||||
$string .= $trx->name.":".$trx->qty;
|
||||
$sum_today_trx += $trx->qty;
|
||||
}
|
||||
|
||||
$string .= "\n";
|
||||
$string .= "*TOTAL : ".$sum_today_trx." Unit*\n\n";
|
||||
$string .= "*[PERIODE 1 - ". $share['today_date'] ."]*\n\n";
|
||||
|
||||
$sum_this_month_trx = 0;
|
||||
foreach ($share['this_month_trxs'] as $trx) {
|
||||
$string .= $trx->name ." : ". $trx->qty ." Unit\n";
|
||||
$sum_this_month_trx += $trx->qty;
|
||||
}
|
||||
$string .= "\n\n*TOTAL : ".$sum_this_month_trx." Unit*"
|
||||
@endphp
|
||||
|
||||
{!! $string !!}
|
||||
</textarea>
|
||||
|
||||
@endsection
|
||||
@section('javascripts')
|
||||
<script>
|
||||
const shareData = {
|
||||
title: 'Dealer',
|
||||
text: $("#shareThis").val().replaceAll("\\n", "\n")
|
||||
}
|
||||
|
||||
const btn = $('#share');
|
||||
const resultPara = $('.result');
|
||||
// Share must be triggered by "user activation"
|
||||
btn.click(async function() {
|
||||
console.log($("#shareThis").val())
|
||||
try {
|
||||
await navigator.share(shareData)
|
||||
console.log('Dealer shared successfully')
|
||||
} catch(err) {
|
||||
console.log('Error: ' + err)
|
||||
}
|
||||
})
|
||||
|
||||
$("#kt_table_date").DataTable({
|
||||
paging: false,
|
||||
// scrollY: "true",
|
||||
// scrollX: true,
|
||||
// scrollCollapse: true,
|
||||
fixedColumns: {
|
||||
left: 1
|
||||
}
|
||||
})
|
||||
|
||||
$("#kt_table_dealer").DataTable({
|
||||
paging: false,
|
||||
// scrollY: "300px",
|
||||
// scrollX: true,
|
||||
// scrollCollapse: true,
|
||||
fixedColumns: {
|
||||
left: 1
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
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(/("\;)/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(/("\;)/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
|
||||
};
|
||||
|
||||
if(labels2.length && trxs.length) {
|
||||
new Chart($("#sa-chart"), {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
plugins: [ChartDataLabels],
|
||||
options: {
|
||||
indexAxis: 'y',
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: 'rgb(255, 99, 132)'
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
$("#sa-chart").parent().height($("#sa-chart").parent().height() + 500)
|
||||
}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')
|
||||
})
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user