77 lines
3.8 KiB
PHP
77 lines
3.8 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('title', 'Dashboard - Rice Leaf AI')
|
|
|
|
@section('content')
|
|
<div class="max-w-7xl mx-auto px-6 py-10">
|
|
|
|
<div class="mb-10">
|
|
<h1 class="text-3xl font-extrabold text-gray-800">Dashboard Overview</h1>
|
|
<p class="text-gray-500 mt-2">Ringkasan data klasifikasi dan performa model Artificial Intelligence.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-6 mb-10">
|
|
@foreach(['Total Prediksi' => [$totalPrediksi, 'blue'], 'Blast' => [$blast, 'red'], 'Blight' => [$blight, 'yellow'], 'Healthy' => [$healthy, 'green'], 'Tungro' => [$tungro, 'orange']] as $label => $data)
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-shadow group relative overflow-hidden">
|
|
<div class="absolute -right-6 -top-6 bg-{{$data[1]}}-50 w-20 h-20 rounded-full"></div>
|
|
<h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider relative z-10">{{ $label }}</h2>
|
|
<p class="text-4xl font-extrabold text-{{$data[1]}}-500 mt-2 relative z-10">{{ $data[0] }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-10 mb-10">
|
|
<div class="bg-white p-8 rounded-3xl shadow-sm border border-gray-100">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6">Statistik Penyakit</h2>
|
|
<div class="h-64"><canvas id="chartPenyakit"></canvas></div>
|
|
</div>
|
|
|
|
<div class="mt-10">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h3 class="text-xl font-bold text-gray-800">Prediksi Terbaru</h3>
|
|
<a href="/riwayat" class="text-sm font-semibold text-green-600 hover:text-green-700">Lihat Semua →</a>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-gray-50 text-gray-400 text-xs uppercase tracking-wider">
|
|
<tr>
|
|
<th class="px-6 py-4 font-semibold">Gambar</th>
|
|
<th class="px-6 py-4 font-semibold">Hasil Diagnosa</th>
|
|
<th class="px-6 py-4 font-semibold">Confidence</th>
|
|
<th class="px-6 py-4 font-semibold text-right">Tanggal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
@foreach($terbaru as $item)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4"><img src="{{ asset('uploads/' . $item->gambar) }}" class="w-12 h-12 rounded-lg object-cover shadow-sm"></td>
|
|
<td class="px-6 py-4 font-bold text-gray-700">{{ $item->penyakit }}</td>
|
|
<td class="px-6 py-4"><span class="bg-green-50 text-green-600 px-3 py-1 rounded-lg text-sm font-bold">{{ $item->confidence }}%</span></td>
|
|
<td class="px-6 py-4 text-right text-gray-500 text-sm">{{ $item->created_at->format('d M Y, H:i') }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
new Chart(document.getElementById('chartPenyakit'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Blast', 'Blight', 'Healthy', 'Tungro'],
|
|
datasets: [{
|
|
data: [{{ $blast }}, {{ $blight }}, {{ $healthy }}, {{ $tungro }}],
|
|
backgroundColor: ['#ef4444', '#eab308', '#22c55e', '#f97316'],
|
|
borderRadius: 6
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
|
|
});
|
|
</script>
|
|
@endpush |