feat(breadcrumbs): tambahkan breadcrumbs pada halaman laporan SLA, debiture, user, dan monitoring; perbarui route laporan SLA, debiture, user, dan monitoring

This commit is contained in:
majid
2025-07-03 11:11:01 +07:00
parent 5e8f979d05
commit 44ff9d4ac6
10 changed files with 208 additions and 133 deletions

View File

@@ -18,7 +18,9 @@
<input type="date" class="input" name="start_date" id="start_date">
<input type="date" class="input" name="end_date" id="end_date">
</div>
<button class="btn btn-primary" id="filter" type="button" onclick="filterDashboard()">Filter</button>
<button class="btn btn-primary" id="filter" type="button" onclick="filterDashboard()">
<i class="ki-outline ki-filter fs-2 me-1"></i>
Filter</button>
</div>
</div>
@@ -100,7 +102,45 @@
</div>
<div class="card-body">
<div class="bg-white rounded-xl p-4 shadow-sm">
<canvas id="bar-chart" class="w-full h-80"></canvas>
<table class="table table-auto w-full">
<thead class="bg-gray-50">
<tr>
<th
class="px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
Bulan
</th>
<th
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
Jumlah
</th>
<th
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
Akumulasi
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($dashboard['count_pendapatan'] as $month => $data)
<tr class="hover:bg-gray-50 transition-colors">
<!-- Kolom Nama month -->
<td class="px-4 py-3 text-sm font-medium text-gray-900 border-r border-gray-200">
{{ ucfirst($month) }}
</td>
<!-- Kolom Total Laporan -->
<td class="px-4 py-3 text-sm text-gray-700 text-center border-r border-gray-200">
{{ $data['total_jumlah'] ?? '-' }}
</td>
<!-- Kolom Total Debitur -->
<td class="px-4 py-3 text-sm text-gray-700 text-center border-r border-gray-200">
{{ $data['total_akumulasi'] ?? '-' }}
</td>
</tr>
@endforeach
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</div>
</div>
@@ -249,121 +289,5 @@
}
</script>
<!-- Chart initialization script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the canvas element
const ctx = document.getElementById('bar-chart').getContext('2d');
// Create the bar chart
const barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
'Dec'
],
datasets: [{
label: 'Jumlah',
data: [1200000, 1900000, 3000000, 5000000, 2000000, 3000000, 4500000,
3200000, 2800000, 4100000, 3600000, 4800000
],
backgroundColor: 'rgba(59, 130, 246, 0.8)', // Blue color
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1,
borderRadius: 4,
borderSkipped: false
}, {
label: 'Akumulasi',
data: [800000, 1200000, 1800000, 2200000, 1500000, 2000000, 2800000,
2100000, 1900000, 2500000, 2300000, 3100000
],
backgroundColor: 'rgba(16, 185, 129, 0.8)', // Green color
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 1,
borderRadius: 4,
borderSkipped: false
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
font: {
size: 12
},
color: '#374151',
usePointStyle: true,
padding: 20
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#ffffff',
bodyColor: '#ffffff',
borderColor: 'rgba(0, 0, 0, 0.8)',
borderWidth: 1,
cornerRadius: 6,
displayColors: true,
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
return label;
}
}
}
},
scales: {
x: {
grid: {
display: false
},
ticks: {
color: '#6b7280',
font: {
size: 11
}
}
},
y: {
beginAtZero: true,
grid: {
color: 'rgba(229, 231, 235, 0.8)',
borderDash: [2, 2]
},
ticks: {
color: '#6b7280',
font: {
size: 11
},
callback: function(value) {
if (value >= 1000000) {
return 'Rp ' + (value / 1000000) + 'M';
} else if (value >= 1000) {
return 'Rp ' + (value / 1000) + 'K';
}
return 'Rp ' + value;
}
}
}
},
interaction: {
intersect: false,
mode: 'index'
},
animation: {
duration: 1000,
easing: 'easeInOutQuart'
}
}
});
});
</script>
@endsection

View File

@@ -1,7 +1,7 @@
@extends('layouts.main')
@section('breadcrumbs')
{{-- {{ Breadcrumbs::render('laporan-hasil-penilaian-jaminan-internal-external') }} --}}
{{ Breadcrumbs::render('laporan-debiture') }}
@endsection
@section('content')

View File

@@ -1,7 +1,7 @@
@extends('layouts.main')
@section('breadcrumbs')
{{-- {{ Breadcrumbs::render('laporan-hasil-penilaian-jaminan-internal-external') }} --}}
{{ Breadcrumbs::render('laporan-monitoring') }}
@endsection
@section('content')

View File

@@ -1,7 +1,7 @@
@extends('layouts.main')
@section('breadcrumbs')
{{-- {{ Breadcrumbs::render('laporan-hasil-penilaian-jaminan-internal-external') }} --}}
{{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection
@section('content')

View File

@@ -1,7 +1,7 @@
@extends('layouts.main')
@section('breadcrumbs')
{{-- {{ Breadcrumbs::render('laporan-penilaian-jaminan') }} --}}
{{ Breadcrumbs::render('laporan-sla-penilai') }}
@endsection
@section('content')

View File

@@ -1,7 +1,7 @@
@extends('layouts.main')
@section('breadcrumbs')
{{-- {{ Breadcrumbs::render('laporan-hasil-penilaian-jaminan-internal-external') }} --}}
{{ Breadcrumbs::render('laporan-user') }}
@endsection
@section('content')