294 lines
17 KiB
PHP
294 lines
17 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('content')
|
|
<div class="w-full grid gap-6 mx-auto">
|
|
<!-- Header Section -->
|
|
<div class="flex flex-wrap items-center lg:items-end justify-between gap-5 pb-8">
|
|
<div class="flex flex-col justify-center gap-3">
|
|
<h1 class="text-2xl font-bold leading-none text-gray-800">
|
|
Dashboard
|
|
</h1>
|
|
<div class="flex items-center gap-2 text-sm font-medium text-gray-600">
|
|
<i class="ki-filled ki-clipboard"></i>
|
|
Selamat datang, <span class="text-primary font-semibold">{{ auth()->user()->name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 w-[30%]">
|
|
<div class="flex items-center gap-2 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 md:grid-cols-2 gap-6">
|
|
|
|
@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 items-center gap-3">
|
|
<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 md:grid-cols-2 gap-4">
|
|
<div
|
|
class="bg-white rounded-xl p-4 shadow-sm border {{ $borderColor }} hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-1">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 items-center justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-700 mb-1">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="card-header border-b border-blue-200">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
|
|
<i class="ki-filled ki-chart-simple-2 text-white"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-blue-800">Pendapatan Appraisal</h3>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="bg-white rounded-xl p-4 shadow-sm">
|
|
<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>
|
|
|
|
<!-- Tables Section -->
|
|
<div class="flex w-full gap-6">
|
|
<!-- Laporan Internal -->
|
|
<div class="card w-[60%] ">
|
|
<div class="card-header border-b border-green-200">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
|
|
<i class="ki-filled ki-document text-white"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-green-800">Laporan Internal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm">
|
|
<table class="table table-auto w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th rowspan="2"
|
|
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 colspan="2"
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
|
|
Jabodetabek
|
|
</th>
|
|
<th colspan="2"
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Luar Jabodetabek
|
|
</th>
|
|
</tr>
|
|
<tr class="border-t border-gray-200">
|
|
<th
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
|
|
Debitur
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Debitur
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($dashboard['count_lpj_internal'] as $month => $regions)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<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="card-header border-b border-purple-200">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
|
|
<i class="ki-filled ki-tab-tablet text-white"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-purple-800">Laporan Eksternal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-sm">
|
|
<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">
|
|
Laporan
|
|
</th>
|
|
<th
|
|
class="px-4 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider">
|
|
Debitur
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@foreach ($dashboard['count_lpj_eksternal'] 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_laporan'] ?? '-' }}
|
|
</td>
|
|
|
|
<!-- Kolom Total Debitur -->
|
|
<td class="px-4 py-3 text-sm text-gray-700 text-center 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 -->
|
|
|
|
@endsection
|