232 lines
7.7 KiB
PHP
232 lines
7.7 KiB
PHP
@extends('Admin.layouts.app')
|
|
|
|
@section('title', 'Dashboard')
|
|
@section('page-title', 'Dashboard')
|
|
|
|
@section('content')
|
|
|
|
<div class="mb-6 md:mb-8">
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-1 md:mb-2">Dashboard</h1>
|
|
<p class="text-sm md:text-base text-gray-600">
|
|
Selamat datang di dashboard sistem klasifikasi tomat
|
|
</p>
|
|
</div>
|
|
|
|
<!-- CARD - Responsive Grid -->
|
|
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-6 md:mb-8">
|
|
|
|
<!-- Total -->
|
|
<div class="stat-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-3 md:p-6">
|
|
<div class="w-10 h-10 md:w-12 md:h-12 bg-blue-100 rounded-lg md:rounded-xl flex items-center justify-center mb-2 md:mb-4">
|
|
<i class="fas fa-chart-bar text-blue-600 text-lg md:text-xl"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl md:text-2xl font-bold text-gray-900">{{ $total }}</h3>
|
|
<p class="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Total Klasifikasi</p>
|
|
</div>
|
|
|
|
<!-- Akurasi -->
|
|
<div class="stat-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-3 md:p-6">
|
|
<div class="w-10 h-10 md:w-12 md:h-12 bg-purple-100 rounded-lg md:rounded-xl flex items-center justify-center mb-2 md:mb-4">
|
|
<i class="fas fa-bullseye text-purple-600 text-lg md:text-xl"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl md:text-2xl font-bold text-gray-900">92.10%</h3>
|
|
<p class="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Akurasi Model</p>
|
|
</div>
|
|
|
|
<!-- Admin -->
|
|
<div class="stat-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-3 md:p-6">
|
|
<div class="w-10 h-10 md:w-12 md:h-12 bg-orange-100 rounded-lg md:rounded-xl flex items-center justify-center mb-2 md:mb-4">
|
|
<i class="fas fa-users text-orange-600 text-lg md:text-xl"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl md:text-2xl font-bold text-gray-900">{{ $totalAdmin }}</h3>
|
|
<p class="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Admin Aktif</p>
|
|
</div>
|
|
|
|
<!-- Hari Ini -->
|
|
<div class="stat-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-3 md:p-6">
|
|
<div class="w-10 h-10 md:w-12 md:h-12 bg-green-100 rounded-lg md:rounded-xl flex items-center justify-center mb-2 md:mb-4">
|
|
<i class="fas fa-calendar-day text-green-600 text-lg md:text-xl"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl md:text-2xl font-bold text-gray-900">{{ $today }}</h3>
|
|
<p class="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Klasifikasi Hari Ini</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<!-- CHART - Responsive Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
|
|
|
|
<!-- Trend -->
|
|
<div class="chart-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-4 md:p-6">
|
|
<h2 class="text-base md:text-lg font-semibold text-gray-900 mb-1 md:mb-2">
|
|
Trend Klasifikasi
|
|
</h2>
|
|
|
|
<p class="text-xs md:text-sm text-gray-600 mb-4 md:mb-6">
|
|
Jumlah klasifikasi dalam 7 hari terakhir
|
|
</p>
|
|
|
|
<div class="chart-container" style="height: 250px;">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pie -->
|
|
<div class="chart-card bg-white rounded-xl md:rounded-2xl shadow-sm border border-gray-200 p-4 md:p-6">
|
|
<h2 class="text-base md:text-lg font-semibold text-gray-900 mb-1 md:mb-2">
|
|
Distribusi Klasifikasi
|
|
</h2>
|
|
|
|
<p class="text-xs md:text-sm text-gray-600 mb-4 md:mb-6">
|
|
Persentase kategori kematangan tomat
|
|
</p>
|
|
|
|
<div class="chart-container" style="height: 250px;">
|
|
<canvas id="distributionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
|
|
|
|
@section('scripts')
|
|
<script>
|
|
|
|
// Tunggu sampai Chart.js library loaded
|
|
function initCharts() {
|
|
if (typeof Chart === 'undefined') {
|
|
console.warn('Chart.js belum loaded, retry dalam 100ms');
|
|
setTimeout(initCharts, 100);
|
|
return;
|
|
}
|
|
|
|
/* =========================
|
|
TREND LINE
|
|
========================= */
|
|
const trendLabels = @json(
|
|
$trend->pluck('date')->map(fn($d) =>
|
|
\Carbon\Carbon::parse($d)->translatedFormat('D')
|
|
)
|
|
);
|
|
|
|
const trendData = @json($trend->pluck('total'));
|
|
|
|
// Optimize for mobile
|
|
const isMobile = window.innerWidth < 768;
|
|
|
|
try {
|
|
new Chart(document.getElementById('trendChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: trendLabels,
|
|
datasets: [{
|
|
data: trendData,
|
|
borderColor: '#ef4444',
|
|
backgroundColor: 'rgba(239,68,68,0.10)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: isMobile ? 3 : 5,
|
|
pointBorderWidth: 0,
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'index'
|
|
},
|
|
plugins: {
|
|
legend: { display: false },
|
|
filler: { propagate: true }
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { drawBorder: false, color: 'rgba(0,0,0,0.05)' },
|
|
ticks: { font: { size: isMobile ? 10 : 12 } }
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { font: { size: isMobile ? 10 : 12 } }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error initializing trend chart:', error);
|
|
}
|
|
|
|
/* =========================
|
|
PIE CHART
|
|
========================= */
|
|
const distLabels = @json(
|
|
$distribution->pluck('category')->map(
|
|
fn($c) => ucfirst(str_replace('_',' ',$c))
|
|
)
|
|
);
|
|
|
|
const distData = @json($distribution->pluck('total'));
|
|
|
|
const dynamicColors = distLabels.map(label => {
|
|
if (label.toLowerCase() === 'matang') {
|
|
return '#ef4444'; // merah
|
|
}
|
|
else if (label.toLowerCase() === 'mentah') {
|
|
return '#22c55e'; // hijau
|
|
}
|
|
else {
|
|
return '#f59e0b'; // kuning/orange
|
|
}
|
|
});
|
|
|
|
try {
|
|
new Chart(document.getElementById('distributionChart'), {
|
|
type: 'pie',
|
|
data: {
|
|
labels: distLabels,
|
|
datasets: [{
|
|
data: distData,
|
|
backgroundColor: dynamicColors,
|
|
borderWidth: 1,
|
|
borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: isMobile ? 'bottom' : 'bottom',
|
|
labels: {
|
|
font: { size: isMobile ? 10 : 12 },
|
|
padding: isMobile ? 10 : 15,
|
|
usePointStyle: true
|
|
}
|
|
},
|
|
tooltip: {
|
|
titleFont: { size: isMobile ? 11 : 13 },
|
|
bodyFont: { size: isMobile ? 10 : 12 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Error initializing distribution chart:', error);
|
|
}
|
|
}
|
|
|
|
// Initialize charts saat DOM ready
|
|
document.addEventListener('DOMContentLoaded', initCharts);
|
|
|
|
</script>
|
|
@endsection |