Penambahan Menu Laporan per pintu pos
This commit is contained in:
pand03
@@ -1,4 +1,10 @@
|
||||
<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">
|
||||
<div class="container">
|
||||
<ul class="nav page-navigation">
|
||||
|
||||
@@ -1,6 +1,42 @@
|
||||
@extends('layouts.master')
|
||||
|
||||
@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
|
||||
|
||||
@section('content')
|
||||
@@ -10,6 +46,158 @@
|
||||
<div class="row">
|
||||
<div class="col-md-12 grid-margin stretch-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>
|
||||
@@ -19,5 +207,630 @@
|
||||
@endsection
|
||||
|
||||
@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
|
||||
Reference in New Issue
Block a user