381 lines
17 KiB
PHP
381 lines
17 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Dashboard - INUFA')
|
|
|
|
@section('header', 'Dashboard')
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Welcome Message -->
|
|
<div class="mb-8 bg-[#1e3a8a] rounded-lg shadow-lg p-6 relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<h2 class="text-2xl font-bold text-white">Selamat Datang, {{ auth()->user()->nama }}!</h2>
|
|
</div>
|
|
<p class="text-gray-900 font-bold bg-white/90 inline-block px-3 py-1 rounded-full">
|
|
{{ \Carbon\Carbon::now()->locale('id')->isoFormat('dddd, D MMMM Y') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Stats -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
<!-- Pengguna Stats -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl shadow-lg p-6 transform hover:scale-105 transition-all duration-300">
|
|
<a href="{{ route('pengguna') }}" class="block">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-blue-500 text-white mr-4 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-blue-600 text-sm font-medium">Total Pengguna</p>
|
|
<p class="text-3xl font-bold text-blue-800">{{ $stats['total_pengguna'] ?? 0 }}</p>
|
|
<div class="flex flex-col mt-2 space-y-1">
|
|
<div class="flex items-center text-sm text-blue-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
<span>User: {{ $stats['pengguna'] }}</span>
|
|
</div>
|
|
<div class="flex items-center text-sm text-indigo-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
<span>Admin: {{ $stats['admin'] }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Barang Stats -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl shadow-lg p-6 transform hover:scale-105 transition-all duration-300">
|
|
<a href="{{ route('paket.index') }}" class="block">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-purple-500 text-white mr-4 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-purple-600 text-sm font-medium">Jumlah Unit Paket</p>
|
|
<p class="text-3xl font-bold text-purple-800">{{ $stats['barang'] ?? 0 }}</p>
|
|
<p class="text-sm text-purple-600 mt-1">Paket Sound System</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Sewa Stats -->
|
|
<div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl shadow-lg p-6 transform hover:scale-105 transition-all duration-300">
|
|
<a href="{{ route('riwayat') }}" class="block hover:no-underline">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-yellow-500 text-white mr-4 shadow-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-yellow-600 text-sm font-medium">Total Sewa</p>
|
|
<p class="text-3xl font-bold text-yellow-800">{{ $stats['sewa'] ?? 0 }}</p>
|
|
<p class="text-sm text-yellow-600 mt-1">Klik untuk lihat riwayat</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafik Statistik -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<!-- Grafik Pemasukan & Pengeluaran -->
|
|
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Statistik Keuangan & Sewa</h3>
|
|
<div class="flex space-x-2">
|
|
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-sm font-medium">Pemasukan</span>
|
|
<span class="px-3 py-1 bg-red-100 text-red-600 rounded-full text-sm font-medium">Pengeluaran</span>
|
|
<span class="px-3 py-1 bg-blue-100 text-blue-600 rounded-full text-sm font-medium">Total Sewa</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative h-80">
|
|
<canvas id="financeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafik Pertumbuhan Pengguna -->
|
|
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Pertumbuhan Pengguna</h3>
|
|
<span class="px-3 py-1 bg-purple-100 text-purple-600 rounded-full text-sm font-medium">Total Pengguna</span>
|
|
</div>
|
|
<div class="relative h-80">
|
|
<canvas id="userGrowthChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ringkasan Statistik -->
|
|
<div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Ringkasan Statistik Tahun {{ date('Y') }}</h3>
|
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">Data Terkini</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Pemasukan -->
|
|
<div class="p-6 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-2 bg-green-500 rounded-lg">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-green-600">
|
|
+{{ isset($chartData['datasets'][0]['data']) ? number_format(end($chartData['datasets'][0]['data']) / 1000000, 1) : '0' }}M
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-green-600 font-medium">Total Pemasukan</p>
|
|
<p class="text-2xl font-bold text-green-700 mt-2">
|
|
Rp {{ isset($chartData['datasets'][0]['data']) ? number_format(end($chartData['datasets'][0]['data']), 0, ',', '.') : '0' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Total Sewa -->
|
|
<div class="p-6 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border border-blue-200">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-2 bg-blue-500 rounded-lg">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-medium text-blue-600">
|
|
{{ isset($chartData['datasets'][2]['data']) ? (end($chartData['datasets'][2]['data']) > 0 ? '+' : '') . end($chartData['datasets'][2]['data']) : '0' }}
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-blue-600 font-medium">Total Sewa</p>
|
|
<p class="text-2xl font-bold text-blue-700 mt-2">
|
|
{{ isset($chartData['datasets'][2]['data']) ? number_format(end($chartData['datasets'][2]['data']), 0, ',', '.') : '0' }} Sewa
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden elements untuk data -->
|
|
<div style="display: none;">
|
|
<script type="application/json" id="chart-data">
|
|
{!! json_encode($chartData) !!}
|
|
</script>
|
|
<script type="application/json" id="user-chart-data">
|
|
{!! json_encode($userChartData) !!}
|
|
</script>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mengambil data dari element tersembunyi
|
|
const chartDataElement = document.getElementById('chart-data');
|
|
const userChartDataElement = document.getElementById('user-chart-data');
|
|
|
|
const chartData = JSON.parse(chartDataElement.textContent);
|
|
const userChartData = JSON.parse(userChartDataElement.textContent);
|
|
|
|
// Fungsi untuk membuat gradient
|
|
function createGradient(ctx, colorStart, colorEnd) {
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
|
gradient.addColorStop(0, colorStart);
|
|
gradient.addColorStop(1, colorEnd);
|
|
return gradient;
|
|
}
|
|
|
|
// Konfigurasi grafik keuangan dan sewa
|
|
const financeCtx = document.getElementById('financeChart').getContext('2d');
|
|
|
|
// Membuat gradient untuk setiap dataset
|
|
const incomeGradient = createGradient(financeCtx, 'rgba(34, 197, 94, 0.4)', 'rgba(34, 197, 94, 0.0)');
|
|
const expenseGradient = createGradient(financeCtx, 'rgba(239, 68, 68, 0.4)', 'rgba(239, 68, 68, 0.0)');
|
|
const rentGradient = createGradient(financeCtx, 'rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.0)');
|
|
|
|
// Update background gradients
|
|
chartData.datasets[0].backgroundColor = incomeGradient;
|
|
chartData.datasets[1].backgroundColor = expenseGradient;
|
|
chartData.datasets[2].backgroundColor = rentGradient;
|
|
|
|
new Chart(financeCtx, {
|
|
type: 'line',
|
|
data: chartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
animations: {
|
|
tension: {
|
|
duration: 1000,
|
|
easing: 'linear',
|
|
from: 0.8,
|
|
to: 0.2,
|
|
loop: true
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
callback: function(value) {
|
|
return 'Rp ' + value.toLocaleString('id-ID');
|
|
},
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
titleColor: '#1f2937',
|
|
titleFont: {
|
|
size: 13,
|
|
weight: 'bold'
|
|
},
|
|
bodyColor: '#4b5563',
|
|
bodyFont: {
|
|
size: 12
|
|
},
|
|
borderColor: '#e5e7eb',
|
|
borderWidth: 1,
|
|
padding: 12,
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.dataset.label === 'Pemasukan' ||
|
|
context.dataset.label === 'Pengeluaran') {
|
|
label += 'Rp ' + context.parsed.y.toLocaleString('id-ID');
|
|
} else {
|
|
label += context.parsed.y;
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Konfigurasi grafik pertumbuhan pengguna
|
|
const userCtx = document.getElementById('userGrowthChart').getContext('2d');
|
|
|
|
// Membuat gradient untuk grafik pengguna
|
|
const userGradient = createGradient(userCtx, 'rgba(139, 92, 246, 0.4)', 'rgba(139, 92, 246, 0.0)');
|
|
userChartData.datasets[0].backgroundColor = userGradient;
|
|
|
|
new Chart(userCtx, {
|
|
type: 'line',
|
|
data: userChartData,
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
animations: {
|
|
tension: {
|
|
duration: 1000,
|
|
easing: 'linear',
|
|
from: 0.8,
|
|
to: 0.2,
|
|
loop: true
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0, 0, 0, 0.05)',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
stepSize: 1,
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
|
titleColor: '#1f2937',
|
|
titleFont: {
|
|
size: 13,
|
|
weight: 'bold'
|
|
},
|
|
bodyColor: '#4b5563',
|
|
bodyFont: {
|
|
size: 12
|
|
},
|
|
borderColor: '#e5e7eb',
|
|
borderWidth: 1,
|
|
padding: 12,
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
label += context.parsed.y + ' Pengguna';
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection |