136 lines
4.6 KiB
PHP
136 lines
4.6 KiB
PHP
<x-app-layout>
|
|
|
|
<x-slot name="title">
|
|
Ringkasan Dashboard
|
|
</x-slot>
|
|
|
|
<div class="max-w-6xl mx-auto">
|
|
|
|
<div class="bg-gradient-to-r from-primary to-primary-dark rounded-[20px] p-8 md:p-10 text-white flex flex-col md:flex-row justify-between items-center shadow-lg shadow-primary/20 mb-10 relative overflow-hidden">
|
|
|
|
<div class="absolute inset-0 opacity-10" style="background-image:url('https://www.transparenttextures.com/patterns/cubes.png');"></div>
|
|
|
|
<div class="relative z-10 mb-6 md:mb-0 text-center md:text-left">
|
|
<h2 class="font-heading text-2xl md:text-3xl font-bold mb-2">
|
|
Selamat datang, {{ Auth::user()->name ?? 'Pengguna' }}! 👋
|
|
</h2>
|
|
|
|
<p class="text-white/80 max-w-lg text-sm md:text-base leading-relaxed">
|
|
Siap untuk mengecek kualitas ikan hari ini? Sistem klasifikasi AI kami siap memberikan hasil analisis yang akurat dalam hitungan detik.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="relative z-10 shrink-0">
|
|
<a href="{{ route('klasifikasi') }}"
|
|
class="inline-flex items-center bg-accent hover:bg-[#00a8af] text-white font-semibold px-6 py-3 rounded-xl transition-all hover:-translate-y-1 shadow-lg shadow-accent/30">
|
|
<i class="bi bi-camera mr-2"></i> Pindai Ikan Sekarang
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
|
|
|
|
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm">
|
|
<div class="text-gray-500 text-sm font-medium mb-1">Total Pengecekan</div>
|
|
<div class="text-2xl font-heading font-bold text-gray-900">124</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm">
|
|
<div class="text-gray-500 text-sm font-medium mb-1">Ikan Segar</div>
|
|
<div class="text-2xl font-heading font-bold text-green-600">89</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm">
|
|
<div class="text-gray-500 text-sm font-medium mb-1">Ikan Tidak Segar</div>
|
|
<div class="text-2xl font-heading font-bold text-red-500">35</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-5 rounded-2xl border border-gray-100 shadow-sm">
|
|
<div class="text-gray-500 text-sm font-medium mb-1">Akurasi AI</div>
|
|
<div class="text-2xl font-heading font-bold text-primary">98.5%</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="font-heading font-semibold text-lg text-gray-800 mb-4">
|
|
Akses Cepat
|
|
</h3>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-[20px] border border-gray-100 shadow-sm hover:shadow-[0_15px_30px_rgba(0,0,0,0.06)] hover:border-primary/20 transition-all duration-300 group flex flex-col h-full">
|
|
|
|
<div class="w-14 h-14 bg-primary/10 text-primary rounded-2xl flex items-center justify-center text-2xl mb-5">
|
|
<i class="bi bi-cpu"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-heading font-bold text-gray-900 mb-2">
|
|
Klasifikasi AI
|
|
</h3>
|
|
|
|
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1">
|
|
Unggah citra mata ikan dan biarkan algoritma mendeteksi tingkat kesegarannya secara otomatis.
|
|
</p>
|
|
|
|
<a href="{{ route('klasifikasi') }}"
|
|
class="text-primary font-semibold text-sm inline-flex items-center">
|
|
Buka Fitur
|
|
<i class="bi bi-arrow-right ml-2"></i>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-[20px] border border-gray-100 shadow-sm hover:shadow-[0_15px_30px_rgba(0,0,0,0.06)] hover:border-primary/20 transition-all duration-300 group flex flex-col h-full">
|
|
|
|
<div class="w-14 h-14 bg-accent/10 text-accent rounded-2xl flex items-center justify-center text-2xl mb-5">
|
|
<i class="bi bi-clock-history"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-heading font-bold text-gray-900 mb-2">
|
|
Riwayat Analisis
|
|
</h3>
|
|
|
|
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1">
|
|
Tinjau kembali data dan hasil pengecekan ikan yang telah Anda lakukan sebelumnya.
|
|
</p>
|
|
|
|
<a href="{{ route('history') }}"
|
|
class="text-accent font-semibold text-sm inline-flex items-center">
|
|
Lihat Riwayat
|
|
<i class="bi bi-arrow-right ml-2"></i>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white p-6 md:p-8 rounded-[20px] border border-gray-100 shadow-sm hover:shadow-[0_15px_30px_rgba(0,0,0,0.06)] hover:border-primary/20 transition-all duration-300 group flex flex-col h-full">
|
|
|
|
<div class="w-14 h-14 bg-gray-100 text-gray-600 rounded-2xl flex items-center justify-center text-2xl mb-5">
|
|
<i class="bi bi-person-gear"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-heading font-bold text-gray-900 mb-2">
|
|
Profil Saya
|
|
</h3>
|
|
|
|
<p class="text-gray-500 text-sm leading-relaxed mb-6 flex-1">
|
|
Perbarui informasi akun dan pengaturan profil Anda.
|
|
</p>
|
|
|
|
<a href="{{ route('profile.edit') }}"
|
|
class="text-gray-600 font-semibold text-sm inline-flex items-center">
|
|
Kelola Akun
|
|
<i class="bi bi-arrow-right ml-2"></i>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</x-app-layout> |