root
270 lines
14 KiB
PHP
270 lines
14 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Transfer & Realisasi')
|
|
|
|
@section('admin-content')
|
|
<section class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="fw-bold text-dark">Log Riwayat Budget & Transaksi</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ route('budget_control') }}">Budget Control</a></li>
|
|
<li class="breadcrumb-item active">Riwayat</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
|
|
{{-- --- BAGIAN BARU: PANEL FILTER --- --}}
|
|
<div class="card shadow-sm mb-4" style="border-radius: 15px; border-top: 3px solid #17a2b8;">
|
|
<div class="card-body py-3">
|
|
<form action="{{ route('budget_control.log') }}" method="GET" id="filter-form">
|
|
<div class="row align-items-end">
|
|
<div class="col-md-3 mb-2 mb-md-0">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Region</label>
|
|
<select name="region_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
|
<option value="">Semua Region</option>
|
|
@foreach($regions as $reg)
|
|
<option value="{{ $reg->id }}" {{ request('region_id') == $reg->id ? 'selected' : '' }}>{{ $reg->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-2 mb-md-0">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Cabang</label>
|
|
<select name="cabang_id" class="form-control form-control-sm select2" onchange="this.form.submit()">
|
|
<option value="">Semua Cabang</option>
|
|
@foreach($cabangOptions as $cab)
|
|
<option value="{{ $cab->id }}" {{ request('cabang_id') == $cab->id ? 'selected' : '' }}>{{ $cab->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 mb-2 mb-md-0">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Bulan</label>
|
|
<select name="month" class="form-control form-control-sm" onchange="this.form.submit()">
|
|
<option value="">Semua Bulan</option>
|
|
@foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $m)
|
|
<option value="{{ $m }}" {{ request('month') == $m ? 'selected' : '' }}>{{ $m }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2 mb-2 mb-md-0">
|
|
<label class="small font-weight-bold text-muted text-uppercase">Tahun</label>
|
|
<select name="year" class="form-control form-control-sm" onchange="this.form.submit()">
|
|
@for($y = date('Y'); $y >= 2024; $y--)
|
|
<option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="btn-group w-100">
|
|
<button type="submit" class="btn btn-sm btn-primary px-3 shadow-sm">
|
|
<i class="fas fa-filter"></i>
|
|
</button>
|
|
<a href="{{ route('budget_control.log') }}" class="btn btn-sm btn-secondary shadow-sm" title="Reset Filter">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- --- BAGIAN GRAFIK PERBANDINGAN (TETAP ADA) --- --}}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm mb-4" style="border-radius: 15px; border-left: 5px solid #007bff;">
|
|
<div class="card-header bg-white border-0 pt-3">
|
|
<h3 class="card-title fw-bold text-primary">
|
|
<i class="fas fa-chart-bar mr-2"></i> Perbandingan Petty Cash vs Realisasi (Halaman Ini)
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="height: 280px;">
|
|
<canvas id="logComparisonChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- --- TABEL DATA --- --}}
|
|
<div class="card card-primary card-outline shadow-sm" style="border-radius: 15px;">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h6 class="text-muted font-weight-bold m-0 text-uppercase small">Detail Transaksi Riwayat</h6>
|
|
<div id="dt-buttons-container"></div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table id="logTable" class="table table-bordered table-striped table-hover w-100">
|
|
<thead class="bg-light text-center text-uppercase small font-weight-bold">
|
|
<tr>
|
|
<th width="3%">#</th>
|
|
<th class="text-left">Cabang / Region</th>
|
|
<th>Periode</th>
|
|
<th>Total Budget (Petty Cash)</th>
|
|
<th>Total Debet (Masuk)</th>
|
|
<th>Total Kredit (Keluar)</th>
|
|
<th class="text-success">Realisasi (Sisa)</th>
|
|
<th>Waktu Assign</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-center">
|
|
@forelse ($data as $item)
|
|
<tr>
|
|
<td>{{ ($data->currentPage() - 1) * $data->perPage() + $loop->iteration }}</td>
|
|
<td class="text-left align-middle">
|
|
<div class="fw-bold text-dark">{{ $item->cabang->name ?? '-' }}</div>
|
|
<small class="text-muted">{{ $item->cabang->region->name ?? '-' }}</small>
|
|
</td>
|
|
<td class="align-middle">
|
|
<span class="badge badge-light border shadow-sm px-2 py-1">
|
|
{{ strtoupper($item->periode_month) }} {{ $item->periode_year }}
|
|
</span>
|
|
</td>
|
|
|
|
<td class="align-middle fw-bold text-dark">
|
|
Rp {{ number_format($item->total_budget, 0, ',', '.') }}
|
|
</td>
|
|
<td class="align-middle text-primary">
|
|
Rp {{ number_format($item->total_debet, 0, ',', '.') }}
|
|
</td>
|
|
<td class="align-middle text-danger">
|
|
Rp {{ number_format($item->total_credit, 0, ',', '.') }}
|
|
</td>
|
|
<td class="align-middle fw-bold text-success" style="font-size: 15px;">
|
|
Rp {{ number_format($item->realisasi, 0, ',', '.') }}
|
|
</td>
|
|
|
|
<td class="align-middle">
|
|
<small class="text-muted d-block">
|
|
<i class="fas fa-calendar-alt mr-1"></i>{{ $item->created_at->format('d M Y') }}
|
|
</small>
|
|
<small class="text-muted d-block">
|
|
<i class="fas fa-clock mr-1"></i>{{ $item->created_at->format('H:i') }} WIB
|
|
</small>
|
|
</td>
|
|
|
|
<td class="align-middle">
|
|
<span class="badge {{ $item->status == 'Assigned' ? 'badge-success' : 'badge-secondary' }} px-2 py-1 shadow-sm">
|
|
{{ $item->status }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="9" class="text-center py-5 text-muted">
|
|
<i class="fas fa-folder-open fa-2x mb-2"></i><br>
|
|
Belum ada riwayat budget yang tercatat.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- --- PAGINATION LARAVEL (TETAP ADA) --- --}}
|
|
<div class="mt-4 d-flex justify-content-between align-items-center">
|
|
<div class="small text-muted">
|
|
Menampilkan {{ $data->firstItem() }} sampai {{ $data->lastItem() }} dari {{ $data->total() }} data
|
|
</div>
|
|
<div>
|
|
{{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
// 1. INISIALISASI GRAFIK PERBANDINGAN
|
|
const ctx = document.getElementById('logComparisonChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: {!! json_encode($chartData['labels'] ?? []) !!},
|
|
datasets: [
|
|
{
|
|
label: 'Petty Cash (Budget)',
|
|
data: {!! json_encode($chartData['budget'] ?? []) !!},
|
|
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
|
borderColor: 'rgba(54, 162, 235, 1)',
|
|
borderWidth: 1,
|
|
borderRadius: 5
|
|
},
|
|
{
|
|
label: 'Sisa Realisasi',
|
|
data: {!! json_encode($chartData['realisasi'] ?? []) !!},
|
|
backgroundColor: 'rgba(40, 167, 69, 0.7)',
|
|
borderColor: 'rgba(40, 167, 69, 1)',
|
|
borderWidth: 1,
|
|
borderRadius: 5
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'top' }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
callback: function(value) { return 'Rp ' + value.toLocaleString('id-ID'); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. DATATABLES OPTIMIZATION
|
|
if ($('#logTable').length) {
|
|
var table = $('#logTable').DataTable({
|
|
paging: false,
|
|
info: false,
|
|
searching: true,
|
|
responsive: false,
|
|
dom: 'Bfrtip',
|
|
buttons: [
|
|
{
|
|
extend: 'excelHtml5',
|
|
className: 'btn-sm btn-success shadow-sm',
|
|
text: '<i class="fas fa-file-excel mr-1"></i> Export Excel',
|
|
title: 'Laporan Riwayat Budget - ' + new Date().toLocaleDateString('id-ID'),
|
|
exportOptions: { columns: ':visible' }
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
className: 'btn-sm btn-danger shadow-sm',
|
|
text: '<i class="fas fa-file-pdf mr-1"></i> Export PDF',
|
|
orientation: 'landscape',
|
|
pageSize: 'A4'
|
|
}
|
|
]
|
|
});
|
|
|
|
table.buttons().container().appendTo('#dt-buttons-container');
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |