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
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user