a1b9b7af86
- Form Penilai: hapus spasi ganda di class CSS input currency/currency-format - Konsistensi class Tailwind: gunakan "w-full currency" & "w-full currency-format" - Hapus console.log tidak perlu, tambah debug log untuk parsing luas - Optimasi parsing input luas dengan parseFloat + regex sanitasi numerik - Dashboard: tambahkan pembatasan akses berdasarkan role (!penilai, !surveyor, !pemohon-ao, !pemohon-eo) - Perbaiki struktur HTML & urutan class Tailwind (grid, flex, spacing, alignment) - Optimalkan layout header, stats cards, & tabel dengan class yang konsisten - Hapus class CSS redundan & perbaiki konsistensi penamaan - Tingkatkan keamanan & UX dengan role-based access + struktur HTML lebih maintainable
300 lines
18 KiB
PHP
300 lines
18 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('content')
|
|
@if (!Auth::user()->hasRole(['penilai', 'surveyor', 'pemohon-ao', 'pemohon-eo']))
|
|
<div class="grid gap-6 mx-auto w-full">
|
|
<!-- Header Section -->
|
|
<div class="flex flex-wrap gap-5 justify-between items-center pb-8 lg:items-end">
|
|
<div class="flex flex-col gap-3 justify-center">
|
|
<h1 class="text-2xl font-bold leading-none text-gray-800">
|
|
Dashboard
|
|
</h1>
|
|
<div class="flex gap-2 items-center text-sm font-medium text-gray-600">
|
|
<i class="ki-filled ki-clipboard"></i>
|
|
Selamat datang, <span class="font-semibold text-primary">{{ auth()->user()->name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 w-[30%]">
|
|
<div class="flex gap-2 items-center w-full">
|
|
<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()">
|
|
<i class="ki-outline ki-filter fs-2 me-1"></i>
|
|
Filter</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
|
|
@foreach ($dashboard['count_resume'] as $status => $count)
|
|
@php
|
|
|
|
$gradientFrom = $status === 'batal' ? 'from-red-50' : 'from-amber-50';
|
|
$gradientTo = $status === 'batal' ? 'to-red-100' : 'to-amber-100';
|
|
$borderColor = $status === 'batal' ? 'border-red-200' : 'border-amber-200';
|
|
$iconBg = $status === 'batal' ? 'bg-red-500' : 'bg-amber-500';
|
|
$iconColor = $status === 'batal' ? 'text-red-500' : 'text-amber-500';
|
|
$textColor = $status === 'batal' ? 'text-red-800' : 'text-amber-800';
|
|
$cardTitle = $status === 'batal' ? 'Batal dari Cabang' : 'Menunggu Keputusan Cabang';
|
|
@endphp
|
|
|
|
<div class="card bg-gradient-to-br {{ $gradientFrom }} {{ $gradientTo }} {{ $borderColor }}">
|
|
<div class="card-header border-b {{ $borderColor }}">
|
|
<div class="flex gap-3 items-center">
|
|
<div class="w-10 h-10 {{ $iconBg }} rounded-lg flex items-center justify-center">
|
|
<i
|
|
class="ki-filled {{ $status === 'batal' ? 'ki-cross-circle text-white' : 'ki-time text-white' }}"></i>
|
|
</div>
|
|
<h3 class="card-title {{ $textColor }} font-semibold">{{ $cardTitle }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div
|
|
class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h4 class="mb-1 text-sm font-semibold text-gray-700">Jabodetabek</h4>
|
|
<span
|
|
class="text-2xl font-bold {{ $status === 'batal' ? 'text-red-600' : 'text-amber-600' }}">
|
|
{{ $count['jabodetabek']['count_report'] ?? 0 }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="w-8 h-8 {{ $gradientFrom }} rounded-full flex items-center justify-center">
|
|
<i class="ki-filled {{ $iconColor }}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h4 class="mb-1 text-sm font-semibold text-gray-700">Luar Jabodetabek</h4>
|
|
<span
|
|
class="text-2xl font-bold {{ $status === 'batal' ? 'text-red-600' : 'text-amber-600' }}">
|
|
{{ $count['non-jabodetabek']['count_report'] ?? 0 }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="w-8 h-8 {{ $gradientFrom }} rounded-full flex items-center justify-center">
|
|
<i class="ki-filled {{ $iconColor }}"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
</div>
|
|
<!-- Chart Section -->
|
|
<div class="card">
|
|
<div class="border-b border-blue-200 card-header">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex gap-3 items-center">
|
|
<div class="flex justify-center items-center w-10 h-10 bg-blue-500 rounded-lg">
|
|
<i class="text-white ki-filled ki-chart-simple-2"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-blue-800">Pendapatan Appraisal</h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="p-4 bg-white rounded-xl shadow-sm">
|
|
<table class="table w-full table-auto">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
|
|
Bulan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Jumlah
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
|
|
Akumulasi
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($dashboard['count_pendapatan'] as $month => $data)
|
|
<tr class="transition-colors hover:bg-gray-50">
|
|
<!-- 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-center text-gray-700 border-r border-gray-200">
|
|
{{ $data['total_jumlah'] ?? '-' }}
|
|
</td>
|
|
|
|
<!-- Kolom Total Debitur -->
|
|
<td class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
|
|
{{ $data['total_akumulasi'] ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
<!-- Add more rows as needed -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tables Section -->
|
|
<div class="flex gap-6 w-full">
|
|
<!-- Laporan Internal -->
|
|
<div class="card w-[60%] ">
|
|
<div class="border-b border-green-200 card-header">
|
|
<div class="flex gap-3 items-center">
|
|
<div class="flex justify-center items-center w-10 h-10 bg-green-500 rounded-lg">
|
|
<i class="text-white ki-filled ki-document"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-green-800">Laporan Internal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="overflow-hidden bg-white rounded-xl shadow-sm">
|
|
<table class="table w-full table-auto">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th rowspan="2"
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
|
|
Bulan
|
|
</th>
|
|
<th colspan="2"
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Jabodetabek
|
|
</th>
|
|
<th colspan="2"
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
|
|
Luar Jabodetabek
|
|
</th>
|
|
</tr>
|
|
<tr class="border-t border-gray-200">
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Debitur
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
|
|
Debitur
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($dashboard['count_lpj_internal'] as $month => $regions)
|
|
<tr class="transition-colors hover:bg-gray-50">
|
|
<td class="px-4 py-2 text-sm font-medium text-gray-900">
|
|
{{ ucfirst($month) }}
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-center text-gray-700">
|
|
{{ $regions['jabodetabek']['total_laporan'] ?? '-' }}
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-center text-gray-700">
|
|
{{ $regions['jabodetabek']['total_debiture'] ?? '-' }}
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-center text-gray-700">
|
|
{{ $regions['non-jabodetabek']['total_laporan'] ?? '-' }}
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-center text-gray-700">
|
|
{{ $regions['non-jabodetabek']['total_debiture'] ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
<!-- Add more rows as needed -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Laporan Eksternal -->
|
|
<div class="card w-[40%]">
|
|
<div class="border-b border-purple-200 card-header">
|
|
<div class="flex gap-3 items-center">
|
|
<div class="flex justify-center items-center w-10 h-10 bg-purple-500 rounded-lg">
|
|
<i class="text-white ki-filled ki-tab-tablet"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-purple-800">Laporan Eksternal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="overflow-hidden bg-white rounded-xl shadow-sm">
|
|
<table class="table w-full table-auto">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-700 uppercase border-r border-gray-200">
|
|
Bulan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase border-r border-gray-200">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-700 uppercase">
|
|
Debitur
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($dashboard['count_lpj_eksternal'] as $month => $data)
|
|
<tr class="transition-colors hover:bg-gray-50">
|
|
<!-- 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-center text-gray-700 border-r border-gray-200">
|
|
{{ $data['total_laporan'] ?? '-' }}
|
|
</td>
|
|
|
|
<!-- Kolom Total Debitur -->
|
|
<td
|
|
class="px-4 py-3 text-sm text-center text-gray-700 border-r border-gray-200">
|
|
{{ $data['total_debiture'] ?? '-' }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
<!-- Add more rows as needed -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart.js CDN -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
|
|
|
<script>
|
|
function filterDashboard() {
|
|
const start_date = document.getElementById('start_date').value;
|
|
const end_date = document.getElementById('end_date').value;
|
|
window.location.href = `?start_date=${start_date}&end_date=${end_date}`;
|
|
}
|
|
</script>
|
|
<!-- Chart initialization script -->
|
|
@endif
|
|
@endsection
|