Penambahan Menu Laporan per pintu pos
This commit is contained in:
pand03
@@ -17,7 +17,120 @@ public function byGate ()
|
|||||||
|
|
||||||
public function gateData(Request $request)
|
public function gateData(Request $request)
|
||||||
{
|
{
|
||||||
|
Log::info($request->all());
|
||||||
|
|
||||||
|
$awal = $request->tanggal_mulai;
|
||||||
|
$akhir = $request->tanggal_selesai;
|
||||||
|
$isShift = $request->shift === 'on';
|
||||||
|
$dateBy = $isShift ? 'pklogin' : 'waktu_keluar';
|
||||||
|
$paymentMethod = $request->payment_method === 'null' ? null : $request->payment_method;
|
||||||
|
|
||||||
|
// 🔹 Base select
|
||||||
|
$select = [
|
||||||
|
'np.nama as gate',
|
||||||
|
'tp.id_pintu_keluar',
|
||||||
|
'p.nama as petugas',
|
||||||
|
'tp.id_op_keluar',
|
||||||
|
'jm.nama as kendaraan',
|
||||||
|
'tp.status_transaksi',
|
||||||
|
DB::raw('count(*) as jumlah_transaksi'),
|
||||||
|
DB::raw('sum(tp.bayar_keluar) as income_transaksi'),
|
||||||
|
];
|
||||||
|
|
||||||
|
// 🔹 Tambah shift kalau aktif
|
||||||
|
if ($isShift) {
|
||||||
|
$select[] = 'tp.id_shift_keluar';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🔹 Base group
|
||||||
|
$groupBy = [
|
||||||
|
'tp.id_pintu_keluar',
|
||||||
|
'np.nama',
|
||||||
|
'p.nama',
|
||||||
|
'tp.id_op_keluar',
|
||||||
|
'jm.nama',
|
||||||
|
'tp.status_transaksi',
|
||||||
|
];
|
||||||
|
|
||||||
|
if ($isShift) {
|
||||||
|
$groupBy[] = 'tp.id_shift_keluar';
|
||||||
|
}
|
||||||
|
|
||||||
|
$query = DB::table('transaksi_parkir as tp')
|
||||||
|
->leftJoin('pegawai as p','p.nomer','=','tp.id_op_keluar')
|
||||||
|
->leftJoin('nama_pos as np','np.id','=','tp.id_pintu_keluar')
|
||||||
|
->leftJoin('jenis_mobil as jm','jm.id','=','tp.id_kendaraan')
|
||||||
|
->select($select)
|
||||||
|
|
||||||
|
// 🔹 Filter tanggal (dynamic field)
|
||||||
|
->where('tp.status', 0)
|
||||||
|
|
||||||
|
->whereBetween($dateBy, [
|
||||||
|
$awal . ' 00:00:00',
|
||||||
|
$akhir . ' 23:59:59'
|
||||||
|
])
|
||||||
|
|
||||||
|
// 🔹 STATUS
|
||||||
|
->when($request->status_transaksi, fn($q, $v) =>
|
||||||
|
$q->where('tp.status_transaksi', $v)
|
||||||
|
)
|
||||||
|
|
||||||
|
// 🔹 PINTU
|
||||||
|
->when($request->id_pintu_keluar, fn($q, $v) =>
|
||||||
|
$q->whereIn('tp.id_pintu_keluar', (array) $v)
|
||||||
|
)
|
||||||
|
|
||||||
|
// 🔹 CARA BAYAR
|
||||||
|
->when($request->cara_bayar, function ($q) use ($request) {
|
||||||
|
|
||||||
|
return match ($request->cara_bayar) {
|
||||||
|
'cash' => $q->where('tp.cara_bayar', '!=', 3),
|
||||||
|
'cashless' => $q->where('tp.cara_bayar', 3),
|
||||||
|
default => $q
|
||||||
|
};
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
->when($paymentMethod, function ($q) use ($paymentMethod) {
|
||||||
|
return $q->where('tp.rep_bank', $paymentMethod);
|
||||||
|
|
||||||
|
// return match ($request->payment_method) {
|
||||||
|
// 2 => $q->where('tp.rep_bank', 2),
|
||||||
|
// 3 => $q->where('tp.rep_bank', 3),
|
||||||
|
// 4 => $q->where('tp.rep_bank', 4),
|
||||||
|
// 5 => $q->where('tp.rep_bank', 5),
|
||||||
|
// 9 => $q->where('tp.rep_bank', 9),
|
||||||
|
// default => $q
|
||||||
|
// };
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// // 🔹 PETUGAS
|
||||||
|
// ->when($request->id_op_keluar, fn($q, $v) =>
|
||||||
|
// $q->whereIn('tp.id_op_keluar', (array) $v)
|
||||||
|
// )
|
||||||
|
|
||||||
|
// // 🔹 KENDARAAN
|
||||||
|
// ->when($request->id_kendaraan, fn($q, $v) =>
|
||||||
|
// $q->whereIn('tp.id_kendaraan', (array) $v)
|
||||||
|
// )
|
||||||
|
|
||||||
|
->groupBy($groupBy)
|
||||||
|
|
||||||
|
->orderBy('tp.id_pintu_keluar')
|
||||||
|
->when($isShift, fn($q) =>
|
||||||
|
$q->orderBy('tp.id_shift_keluar')
|
||||||
|
)
|
||||||
|
->orderBy('tp.id_op_keluar')
|
||||||
|
->orderBy('jm.nama')
|
||||||
|
->orderBy('tp.status_transaksi');
|
||||||
|
|
||||||
|
|
||||||
|
return response()->json([
|
||||||
|
'byGateData' => $query->get()
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function allReport ()
|
public function allReport ()
|
||||||
|
|||||||
@@ -8898,6 +8898,10 @@ samp {
|
|||||||
unicode-bidi: bidi-override;
|
unicode-bidi: bidi-override;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
<div class="horizontal-menu">
|
<div class="horizontal-menu">
|
||||||
|
<nav class="navbar top-navbar">
|
||||||
|
<button class="navbar-toggler d-lg-none"
|
||||||
|
type="button"
|
||||||
|
data-toggle="horizontal-menu-toggle">
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
<nav class="bottom-navbar">
|
<nav class="bottom-navbar">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<ul class="nav page-navigation">
|
<ul class="nav page-navigation">
|
||||||
|
|||||||
@@ -1,6 +1,42 @@
|
|||||||
@extends('layouts.master')
|
@extends('layouts.master')
|
||||||
|
|
||||||
@section('styles')
|
@section('styles')
|
||||||
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="{{ asset('vendors/select2/select2.min.css') }}">
|
||||||
|
<style>
|
||||||
|
.dashboard-row {
|
||||||
|
background: #f8fafc;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-row:hover {
|
||||||
|
background: #e2e8f0;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-container .select2-selection--single {
|
||||||
|
height: 38px !important;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-selection__rendered {
|
||||||
|
line-height: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2-selection__arrow {
|
||||||
|
height: 38px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
@@ -10,6 +46,158 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12 grid-margin stretch-card">
|
<div class="col-md-12 grid-margin stretch-card">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<h4 class="card-title">Laporan Per Pintu ({{ $locationSettings->namalokasi }})</h4>
|
||||||
|
<form id="fromByGate">
|
||||||
|
@csrf
|
||||||
|
<div class="form-group">
|
||||||
|
<!-- Baris 1 -->
|
||||||
|
<div class="row g-2 align-items-end mb-2">
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="tanggalMulai">Tanggal Mulai</label>
|
||||||
|
<input type="date" class="form-control" id="tanggalMulai" name="tanggal_mulai">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="tanggalSelesai">Tanggal Selesai</label>
|
||||||
|
<input type="date" class="form-control" id="tanggalSelesai" name="tanggal_selesai">
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="status_trans">Status Transaksi</label>
|
||||||
|
<select id="status_transaksi" name="status_transaksi" class="form-control js-example-basic-multiple" data-placeholder="Semua" multiple="multiple">
|
||||||
|
<option value="3">Member</option>
|
||||||
|
<option value="-1">Batal</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-2 d-flex align-items-end gap-2">
|
||||||
|
<label class="label" class="mb-0">Shift</label>
|
||||||
|
<label class="toggle-switch toggle-switch-success mb-1">
|
||||||
|
<input type="checkbox" id="harianToggle" name="shift" checked>
|
||||||
|
<span class="toggle-slider round"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-2 d-flex gap-2 align-items-end">
|
||||||
|
<button type="button" id="btnProses" class="btn btn-light btn-icon-text w-100">Proses</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Baris 2 -->
|
||||||
|
<div class="row g-2 align-items-end">
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="cara_bayar">Metode Pembayaran</label>
|
||||||
|
<select id="cara_bayar" name="cara_bayar" class="form-control select2" data-placeholder="Semua">
|
||||||
|
<option value="null">Semua</option>
|
||||||
|
<option value="cash">Tunai</option>
|
||||||
|
<option value="cashless">Non Tunai</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="payment_method">Jenis Pembayaran</label>
|
||||||
|
<select id="payment_method" name="payment_method" class="form-control select2" data-placeholder="Semua">
|
||||||
|
<option value="null">Semua</option>
|
||||||
|
<option value="2">Mandiri</option>
|
||||||
|
<option value="3">BRI</option>
|
||||||
|
<option value="4">BNI</option>
|
||||||
|
<option value="5">BCA</option>
|
||||||
|
<option value="9">QRIS</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{{-- <div class="col-sm-6 col-md-2">
|
||||||
|
<label class="label" for="id_pintu">Pintu</label>
|
||||||
|
<select id="id_pintu" class="form-control js-example-basic-multiple" data-placeholder="Semua Pintu" multiple="multiple">
|
||||||
|
</select>
|
||||||
|
</div> --}}
|
||||||
|
<div class="col-sm-12 col-md-2">
|
||||||
|
<label class="label" for="cari_petugas">Petugas</label>
|
||||||
|
<select id="cari_petugas" class="form-control js-example-basic-multiple" name="cariPetugas" data-placeholder="Petugas (Semua)" multiple="multiple">
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- Tombol -->
|
||||||
|
<div class="col-sm-12 col-md-2 d-flex gap-2 align-items-end">
|
||||||
|
<button type="button" class="btn btn-info btn-icon-text btn-export-pdf w-100">
|
||||||
|
Print <i class="mdi mdi-printer btn-icon-append"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{{-- <div class="col-xl-12">
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="card-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
|
||||||
|
<div>
|
||||||
|
<h1 class="card-title">TRANSAKSI TUNAI</h1>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3 flex-wrap gap-2">
|
||||||
|
<div class=""><p class="text-muted m-0">Transaksi Tanggal : </p></div>
|
||||||
|
<div class=""> <p class="text-muted m-0">Filter by hari</p></div>
|
||||||
|
<div class="toggle toggle-primary off mb-0">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> --}}
|
||||||
|
{{-- <div class="table-responsive">
|
||||||
|
<table class="table table-bordered text-center" id="tableGate">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr>
|
||||||
|
<th>Pintu</th>
|
||||||
|
<th>Petugas</th>
|
||||||
|
<th>Jenis Kendaraan</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Jumlah</th>
|
||||||
|
<th>Pendapatan</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- isi data -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div
|
||||||
|
<hr>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="gateContainer" class="mt-3"></div>
|
||||||
|
</div> --}}
|
||||||
|
{{-- <div class="container-fluid">
|
||||||
|
|
||||||
|
<!-- KPI -->
|
||||||
|
<div class="row g-3 mb-3" id="summaryCards"></div>
|
||||||
|
|
||||||
|
<!-- DATA -->
|
||||||
|
<div id="gateContainer"></div>
|
||||||
|
|
||||||
|
</div> --}}
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row g-3">
|
||||||
|
|
||||||
|
<!-- LEFT: LIST GATE -->
|
||||||
|
<div class="col-12 col-lg-3">
|
||||||
|
<div class="card shadow-sm h-100">
|
||||||
|
<div class="card-header fw-bold">
|
||||||
|
Gate List
|
||||||
|
</div>
|
||||||
|
<div class="list-group list-group-flush" id="gateList"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT: DETAIL -->
|
||||||
|
<div class="col-12 col-lg-9">
|
||||||
|
<div id="gateDetail"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-12">
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center"">
|
||||||
|
<div>
|
||||||
|
<h1 class="card-title">JUMLAH TRANSAKSI</h1>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center mb-3 flex-wrap gap-2">
|
||||||
|
<h3>Total disini</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -19,5 +207,630 @@
|
|||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('javascript')
|
@section('javascript')
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||||
|
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
|
||||||
|
<script src="{{ asset('js/select2.js') }}"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
$('.select2').select2({
|
||||||
|
theme: 'bootstrap-5',
|
||||||
|
width: '100%',
|
||||||
|
placeholder: "Semua",
|
||||||
|
allowClear: true,
|
||||||
|
minimumResultsForSearch: Infinity
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#tanggalMulai').val(new Date().toISOString().split('T')[0]);
|
||||||
|
$('#tanggalSelesai').val(new Date().toISOString().split('T')[0]);
|
||||||
|
|
||||||
|
$('#btnProses').on('click', function () {
|
||||||
|
|
||||||
|
let formData = $('#fromByGate').serialize();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '{{ route("gateData") }}',
|
||||||
|
type: 'GET',
|
||||||
|
data: formData,
|
||||||
|
success: function (response) {
|
||||||
|
console.log(response);
|
||||||
|
// renderGateData(response.byGateData);
|
||||||
|
// renderNotTable(response.byGateData);
|
||||||
|
// renderGateDashboard(response.byGateData);
|
||||||
|
renderDashboard(response.byGateData);
|
||||||
|
},
|
||||||
|
error: function (xhr) {
|
||||||
|
console.error(xhr.responseText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderDashboard(data) {
|
||||||
|
|
||||||
|
let grouped = {};
|
||||||
|
|
||||||
|
// GROUPING
|
||||||
|
data.forEach(item => {
|
||||||
|
let gate = item.id_pintu_keluar;
|
||||||
|
|
||||||
|
if (!grouped[gate]) {
|
||||||
|
grouped[gate] = {
|
||||||
|
name: item.gate,
|
||||||
|
data: []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
grouped[gate].data.push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
let gateList = $('#gateList');
|
||||||
|
let gateDetail = $('#gateDetail');
|
||||||
|
|
||||||
|
gateList.empty();
|
||||||
|
gateDetail.empty();
|
||||||
|
|
||||||
|
Object.keys(grouped).forEach((gate, index) => {
|
||||||
|
|
||||||
|
let gateData = grouped[gate];
|
||||||
|
|
||||||
|
// LIST ITEM
|
||||||
|
let item = $(`
|
||||||
|
<button class="list-group-item list-group-item-action ${index === 0 ? 'active' : ''}">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<span>${gateData.name}</span>
|
||||||
|
<small>${gate}</small>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
item.on('click', function() {
|
||||||
|
$('.list-group-item').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
renderDetail(gateData);
|
||||||
|
});
|
||||||
|
|
||||||
|
gateList.append(item);
|
||||||
|
|
||||||
|
// auto load pertama
|
||||||
|
if (index === 0) renderDetail(gateData);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDetail(gateData) {
|
||||||
|
|
||||||
|
let container = $('#gateDetail');
|
||||||
|
container.empty();
|
||||||
|
|
||||||
|
function formatRupiah(angka) {
|
||||||
|
return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
|
||||||
|
let html = `
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-header bg-dark text-white">
|
||||||
|
${gateData.name}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
`;
|
||||||
|
|
||||||
|
let grouped = {};
|
||||||
|
|
||||||
|
// group by operator
|
||||||
|
gateData.data.forEach(item => {
|
||||||
|
if (!grouped[item.petugas]) grouped[item.petugas] = [];
|
||||||
|
grouped[item.petugas].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
Object.keys(grouped).forEach(operator => {
|
||||||
|
|
||||||
|
html += `<div class="mb-3"><strong>👤 ${operator}</strong></div>`;
|
||||||
|
|
||||||
|
grouped[operator].forEach(item => {
|
||||||
|
|
||||||
|
let status = item.status_transaksi == 0 ? 'Casual' : 'Member';
|
||||||
|
|
||||||
|
html += `
|
||||||
|
<div class="d-flex justify-content-between border-bottom py-2">
|
||||||
|
<div>
|
||||||
|
${item.kendaraan} - ${status}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
${item.jumlah_transaksi} trx |
|
||||||
|
<strong>${formatRupiah(item.income_transaksi)}</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
html += `</div></div>`;
|
||||||
|
|
||||||
|
container.html(html);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGateDashboard(data) {
|
||||||
|
|
||||||
|
let container = $('#gateContainer');
|
||||||
|
let summary = $('#summaryCards');
|
||||||
|
|
||||||
|
container.empty();
|
||||||
|
summary.empty();
|
||||||
|
|
||||||
|
function formatRupiah(angka) {
|
||||||
|
return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
|
||||||
|
function kendaraanLabel(kode) {
|
||||||
|
return {
|
||||||
|
'A': 'Mobil',
|
||||||
|
'C': 'Motor',
|
||||||
|
'T': 'Truck'
|
||||||
|
}[kode] || kode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// 🔢 HITUNG SUMMARY
|
||||||
|
// =========================
|
||||||
|
let totalTransaksi = 0;
|
||||||
|
let totalIncome = 0;
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
totalTransaksi += item.jumlah_transaksi;
|
||||||
|
totalIncome += parseInt(item.income_transaksi);
|
||||||
|
});
|
||||||
|
|
||||||
|
summary.append(`
|
||||||
|
<div class="col-6 col-md-3">
|
||||||
|
<div class="card shadow-sm border-0 p-3 text-center">
|
||||||
|
<h6>Total Transaksi</h6>
|
||||||
|
<h4>${totalTransaksi}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-6 col-md-3">
|
||||||
|
<div class="card shadow-sm border-0 p-3 text-center">
|
||||||
|
<h6>Total Pendapatan</h6>
|
||||||
|
<h4 class="text-success">${formatRupiah(totalIncome)}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-6 col-md-3">
|
||||||
|
<div class="card shadow-sm border-0 p-3 text-center">
|
||||||
|
<h6>Total Gate</h6>
|
||||||
|
<h4>${[...new Set(data.map(d => d.id_pintu_keluar))].length}</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// 🧠 GROUPING
|
||||||
|
// =========================
|
||||||
|
let grouped = {};
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
let gate = item.id_pintu_keluar;
|
||||||
|
|
||||||
|
if (!grouped[gate]) {
|
||||||
|
grouped[gate] = {
|
||||||
|
gateName: item.gate,
|
||||||
|
operators: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let operator = item.petugas;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator]) {
|
||||||
|
grouped[gate].operators[operator] = {
|
||||||
|
name: operator,
|
||||||
|
kendaraans: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let kendaraan = item.kendaraan;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator].kendaraans[kendaraan]) {
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// 🎨 RENDER UI
|
||||||
|
// =========================
|
||||||
|
Object.keys(grouped).forEach(gate => {
|
||||||
|
|
||||||
|
let gateData = grouped[gate];
|
||||||
|
|
||||||
|
let gateCard = $(`
|
||||||
|
<div class="card shadow border-0 mb-4">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center bg-dark text-white">
|
||||||
|
<div>
|
||||||
|
<strong>${gateData.gateName}</strong><br>
|
||||||
|
<small>${gate}</small>
|
||||||
|
</div>
|
||||||
|
<span class="badge bg-info">Gate</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
let gateBody = gateCard.find('.card-body');
|
||||||
|
|
||||||
|
Object.values(gateData.operators).forEach(operatorData => {
|
||||||
|
|
||||||
|
let operatorBlock = $(`
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="fw-bold mb-2">
|
||||||
|
👤 ${operatorData.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
Object.keys(operatorData.kendaraans).forEach(kendaraan => {
|
||||||
|
|
||||||
|
let kendaraanBlock = $(`
|
||||||
|
<div class="mb-2 ms-md-3">
|
||||||
|
<div class="text-primary fw-semibold mb-2">
|
||||||
|
🚗 ${kendaraanLabel(kendaraan)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
operatorData.kendaraans[kendaraan].forEach(item => {
|
||||||
|
|
||||||
|
let statusClass = item.status_transaksi == 0 ? 'success' : 'info';
|
||||||
|
let statusText = item.status_transaksi == 0 ? 'Casual' : 'Member';
|
||||||
|
|
||||||
|
let row = $(`
|
||||||
|
<div class="dashboard-row p-2 mb-2 rounded d-flex flex-column flex-md-row justify-content-between align-items-md-center">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="badge bg-${statusClass}">${statusText}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex gap-3 mt-2 mt-md-0">
|
||||||
|
<div>${item.jumlah_transaksi} trx</div>
|
||||||
|
<div class="fw-bold text-success">
|
||||||
|
${formatRupiah(item.income_transaksi)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
kendaraanBlock.append(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
operatorBlock.append(kendaraanBlock);
|
||||||
|
});
|
||||||
|
|
||||||
|
gateBody.append(operatorBlock);
|
||||||
|
});
|
||||||
|
|
||||||
|
container.append(gateCard);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderGateData(data) {
|
||||||
|
|
||||||
|
let tbody = $('#tableGate tbody');
|
||||||
|
tbody.empty();
|
||||||
|
|
||||||
|
function formatRupiah(angka) {
|
||||||
|
return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
|
||||||
|
// GROUPING LEVEL 3 (gate → operator → kendaraan)
|
||||||
|
let grouped = {};
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
let gate = item.id_pintu_keluar;
|
||||||
|
|
||||||
|
if (!grouped[gate]) {
|
||||||
|
grouped[gate] = {
|
||||||
|
gateName: item.gate,
|
||||||
|
operators: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let operator = item.petugas;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator]) {
|
||||||
|
grouped[gate].operators[operator] = {
|
||||||
|
name: operator,
|
||||||
|
kendaraans: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let kendaraan = item.kendaraan;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator].kendaraans[kendaraan]) {
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// RENDER
|
||||||
|
Object.keys(grouped).forEach(gate => {
|
||||||
|
|
||||||
|
let gateData = grouped[gate];
|
||||||
|
let gateName = gateData.gateName;
|
||||||
|
let operators = gateData.operators;
|
||||||
|
|
||||||
|
// total rowspan gate
|
||||||
|
let gateRowspan = 0;
|
||||||
|
Object.values(operators).forEach(op => {
|
||||||
|
Object.values(op.kendaraans).forEach(k => {
|
||||||
|
gateRowspan += k.length;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let firstGateRow = true;
|
||||||
|
|
||||||
|
Object.values(operators).forEach(operatorData => {
|
||||||
|
|
||||||
|
let operatorName = operatorData.name;
|
||||||
|
let kendaraans = operatorData.kendaraans;
|
||||||
|
|
||||||
|
// total rowspan operator
|
||||||
|
let operatorRowspan = 0;
|
||||||
|
Object.values(kendaraans).forEach(k => {
|
||||||
|
operatorRowspan += k.length;
|
||||||
|
});
|
||||||
|
|
||||||
|
let firstOperatorRow = true;
|
||||||
|
|
||||||
|
Object.keys(kendaraans).forEach(kendaraan => {
|
||||||
|
|
||||||
|
let items = kendaraans[kendaraan];
|
||||||
|
let kendaraanRowspan = items.length;
|
||||||
|
let firstKendaraanRow = true;
|
||||||
|
|
||||||
|
items.forEach(item => {
|
||||||
|
|
||||||
|
let status = item.status_transaksi == 0
|
||||||
|
? '<span class="badge bg-success">Casual</span>'
|
||||||
|
: '<span class="badge bg-info">Member</span>';
|
||||||
|
|
||||||
|
let row = '<tr>';
|
||||||
|
|
||||||
|
// GATE
|
||||||
|
if (firstGateRow) {
|
||||||
|
row += `
|
||||||
|
<td rowspan="${gateRowspan}" class="align-middle fw-bold">
|
||||||
|
${gateData.gateName}<br><small>(${gate})</small>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
firstGateRow = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// OPERATOR
|
||||||
|
if (firstOperatorRow) {
|
||||||
|
row += `
|
||||||
|
<td rowspan="${operatorRowspan}" class="align-middle">
|
||||||
|
${operatorName}
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
firstOperatorRow = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// KENDARAAN (NEW 🔥)
|
||||||
|
if (firstKendaraanRow) {
|
||||||
|
row += `
|
||||||
|
<td rowspan="${kendaraanRowspan}" class="align-middle">
|
||||||
|
${kendaraan}
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
firstKendaraanRow = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// DATA
|
||||||
|
row += `
|
||||||
|
<td>${status}</td>
|
||||||
|
<td class="text-left">${item.jumlah_transaksi}</td>
|
||||||
|
<td styles="align-text: right;">${formatRupiah(item.income_transaksi)}</td>
|
||||||
|
`;
|
||||||
|
|
||||||
|
row += '</tr>';
|
||||||
|
|
||||||
|
tbody.append(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNotTable(data) {
|
||||||
|
|
||||||
|
let container = $('#gateContainer');
|
||||||
|
container.empty();
|
||||||
|
|
||||||
|
function formatRupiah(angka) {
|
||||||
|
return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||||
|
}
|
||||||
|
|
||||||
|
function kendaraanLabel(kode) {
|
||||||
|
return {
|
||||||
|
'A': 'Mobil',
|
||||||
|
'C': 'Motor',
|
||||||
|
'T': 'Truck'
|
||||||
|
}[kode] || kode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// GROUPING
|
||||||
|
let grouped = {};
|
||||||
|
|
||||||
|
data.forEach(item => {
|
||||||
|
let gate = item.id_pintu_keluar;
|
||||||
|
|
||||||
|
if (!grouped[gate]) {
|
||||||
|
grouped[gate] = {
|
||||||
|
gateName: item.gate,
|
||||||
|
operators: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let operator = item.petugas;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator]) {
|
||||||
|
grouped[gate].operators[operator] = {
|
||||||
|
name: operator,
|
||||||
|
kendaraans: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let kendaraan = item.kendaraan;
|
||||||
|
|
||||||
|
if (!grouped[gate].operators[operator].kendaraans[kendaraan]) {
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
grouped[gate].operators[operator].kendaraans[kendaraan].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
// RENDER
|
||||||
|
Object.keys(grouped).forEach(gate => {
|
||||||
|
|
||||||
|
let gateData = grouped[gate];
|
||||||
|
|
||||||
|
let gateCard = $(`
|
||||||
|
<div class="card shadow-sm mb-3">
|
||||||
|
<div class="card-header bg-primary text-white">
|
||||||
|
<strong>${gateData.gateName}</strong>
|
||||||
|
<small>(${gate})</small>
|
||||||
|
</div>
|
||||||
|
<div class="card-body"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
let gateBody = gateCard.find('.card-body');
|
||||||
|
|
||||||
|
Object.values(gateData.operators).forEach(operatorData => {
|
||||||
|
|
||||||
|
let operatorBlock = $(`
|
||||||
|
<div class="mb-3 p-2 border rounded">
|
||||||
|
<div class="fw-bold text-dark mb-2">
|
||||||
|
👤 ${operatorData.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
Object.keys(operatorData.kendaraans).forEach(kendaraan => {
|
||||||
|
|
||||||
|
let kendaraanBlock = $(`
|
||||||
|
<div class="mb-2 ms-md-3">
|
||||||
|
<div class="text-primary fw-semibold mb-1">
|
||||||
|
🚗 ${kendaraanLabel(kendaraan)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
operatorData.kendaraans[kendaraan].forEach(item => {
|
||||||
|
|
||||||
|
let status = item.status_transaksi == 0
|
||||||
|
? '<span class="badge bg-success">Casual</span>'
|
||||||
|
: '<span class="badge bg-info">Member</span>';
|
||||||
|
|
||||||
|
let row = $(`
|
||||||
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center bg-light rounded p-2 mb-2">
|
||||||
|
|
||||||
|
<div>${status}</div>
|
||||||
|
|
||||||
|
<div class="d-flex gap-3 mt-2 mt-md-0">
|
||||||
|
<div><strong>${item.jumlah_transaksi}</strong> trx</div>
|
||||||
|
<div class="text-success fw-bold">
|
||||||
|
${formatRupiah(item.income_transaksi)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
kendaraanBlock.append(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
operatorBlock.append(kendaraanBlock);
|
||||||
|
});
|
||||||
|
|
||||||
|
gateBody.append(operatorBlock);
|
||||||
|
});
|
||||||
|
|
||||||
|
container.append(gateCard);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// function renderGateData(data) {
|
||||||
|
// let html = '';
|
||||||
|
// let totalJumlah = 0;
|
||||||
|
// let totalIncome = 0;
|
||||||
|
|
||||||
|
// const statusLabel = { '0': 'Bayar', '3': 'Gratis' };
|
||||||
|
// const kendaraanLabel = { 'A': 'Motor', 'C': 'Mobil', 'T': 'Truk' };
|
||||||
|
|
||||||
|
// // Hitung rowspan per pintu dan per petugas
|
||||||
|
// let pintuSpan = {};
|
||||||
|
// let petugasSpan = {};
|
||||||
|
|
||||||
|
// data.forEach(function (item) {
|
||||||
|
// let pintuKey = item.id_pintu_keluar;
|
||||||
|
// let petugasKey = item.id_pintu_keluar + '_' + item.id_op_keluar;
|
||||||
|
|
||||||
|
// pintuSpan[pintuKey] = (pintuSpan[pintuKey] || 0) + 1;
|
||||||
|
// petugasSpan[petugasKey] = (petugasSpan[petugasKey] || 0) + 1;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// let pintuRendered = {};
|
||||||
|
// let petugasRendered = {};
|
||||||
|
|
||||||
|
// data.forEach(function (item) {
|
||||||
|
// totalJumlah += item.jumlah_transaksi;
|
||||||
|
// totalIncome += parseInt(item.income_transaksi);
|
||||||
|
|
||||||
|
// let pintuKey = item.id_pintu_keluar;
|
||||||
|
// let petugasKey = item.id_pintu_keluar + '_' + item.id_op_keluar;
|
||||||
|
|
||||||
|
// let pintuCell = '';
|
||||||
|
// let petugasCell = '';
|
||||||
|
|
||||||
|
// if (!pintuRendered[pintuKey]) {
|
||||||
|
// pintuRendered[pintuKey] = true;
|
||||||
|
// pintuCell = `<td rowspan="${pintuSpan[pintuKey]}" style="text-align:center; vertical-align:middle;">${item.id_pintu_keluar}</td>`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (!petugasRendered[petugasKey]) {
|
||||||
|
// petugasRendered[petugasKey] = true;
|
||||||
|
// petugasCell = `<td rowspan="${petugasSpan[petugasKey]}" style="text-align:center; vertical-align:middle;">${item.nama}</td>`;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// html += `
|
||||||
|
// <tr>
|
||||||
|
// ${pintuCell}
|
||||||
|
// ${petugasCell}
|
||||||
|
// <td style="text-align:center;">${kendaraanLabel[item.id_kendaraan] ?? item.id_kendaraan}</td>
|
||||||
|
// <td style="text-align:center;">${statusLabel[item.status_transaksi] ?? item.status_transaksi}</td>
|
||||||
|
// <td style="text-align:center;">${item.jumlah_transaksi}</td>
|
||||||
|
// <td style="text-align:right;">${formatRupiah(item.income_transaksi)}</td>
|
||||||
|
// </tr>
|
||||||
|
// `;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// $('#gateDataContainer').html(html);
|
||||||
|
// $('#totalJumlah').text(totalJumlah);
|
||||||
|
// $('#totalIncome').text(formatRupiah(totalIncome));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// function formatRupiah(angka) {
|
||||||
|
// return 'Rp ' + parseInt(angka).toLocaleString('id-ID');
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
Reference in New Issue
Block a user