Dwi F Sukmana
141 lines
8.9 KiB
PHP
141 lines
8.9 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-[1600px] mx-auto p-4 sm:px-6 lg:px-8 py-8 space-y-8">
|
|
|
|
{{-- Header --}}
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6 bg-white p-8 rounded-[3rem] border border-slate-100 shadow-sm">
|
|
<div>
|
|
<h2 class="text-4xl font-black text-slate-800 tracking-tighter uppercase leading-none">
|
|
Intelligence <span class="text-indigo-600">Dashboard</span>
|
|
</h2>
|
|
<p class="text-slate-400 font-bold uppercase text-[10px] tracking-[0.3em] mt-2 italic">
|
|
<i class="fas fa-calendar-alt mr-2"></i> Operasional Earrin Cats: {{ date('d F Y') }}
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<a href="{{ route('admin.reports.index') }}" class="px-6 py-3 bg-slate-100 text-slate-600 text-[10px] font-black uppercase rounded-2xl hover:bg-slate-200 transition-all tracking-widest">Laporan Lengkap</a>
|
|
<a href="{{ route('cats.create') }}" class="px-6 py-3 bg-indigo-600 text-white text-[10px] font-black uppercase rounded-2xl shadow-xl shadow-indigo-100 hover:bg-indigo-700 transition-all tracking-widest flex items-center">
|
|
<i class="fas fa-plus mr-2"></i> Tambah Kucing
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Birth Watch Alert --}}
|
|
@if($upcomingBirths->count() > 0)
|
|
<div class="bg-white rounded-[3rem] border-2 border-rose-100 shadow-xl shadow-rose-50 overflow-hidden">
|
|
<div class="bg-rose-600 px-8 py-4 flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-baby-carriage text-white animate-bounce"></i>
|
|
<h3 class="text-[10px] font-black text-white uppercase tracking-[0.3em]">Birth Watch: Persalinan Mendatang</h3>
|
|
</div>
|
|
</div>
|
|
<div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
@foreach($upcomingBirths as $birth)
|
|
<div class="bg-rose-50/50 border border-rose-100 p-6 rounded-[2rem] relative group">
|
|
<div class="absolute -top-3 -right-3 bg-rose-600 text-white w-10 h-10 rounded-xl flex items-center justify-center font-black text-sm shadow-lg transform rotate-12">
|
|
{{ $birth->days_to_go }}d
|
|
</div>
|
|
<div class="text-xs font-black text-rose-700 uppercase mb-1">{{ $birth->dam->nama_kucing }}</div>
|
|
<div class="text-[9px] font-bold text-rose-400 uppercase tracking-tighter mb-3">Sire: {{ $birth->sire->nama_kucing }}</div>
|
|
<div class="text-[10px] font-bold text-slate-600">Estimasi: {{ $birth->edd->format('d M Y') }}</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Stats Cards --}}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<x-stats-card title="Total Pasien" :value="$stats['total_cats']" icon="fa-cat" color="indigo" />
|
|
<x-stats-card title="Indukan Hamil" :value="$stats['total_mating']" icon="fa-venus" color="rose" />
|
|
<x-stats-card title="Sedang Sakit" :value="$stats['sick_cats']" icon="fa-stethoscope" color="amber" />
|
|
<x-stats-card title="Stok Kritis" :value="$totalLowStock" icon="fa-exclamation-triangle" color="rose" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{{-- Left Content: Records & Stock --}}
|
|
<div class="lg:col-span-2 space-y-8">
|
|
<div class="bg-white rounded-[3rem] border border-slate-100 shadow-sm overflow-hidden">
|
|
<div class="p-8 border-b border-slate-50 flex justify-between items-center">
|
|
<h3 class="text-xs font-black text-slate-800 uppercase tracking-widest">Rekam Medis Terbaru</h3>
|
|
<a href="{{ route('treatments.index') }}" class="text-[10px] font-black text-indigo-600 uppercase hover:underline">Lihat Semua</a>
|
|
</div>
|
|
<table class="w-full text-left">
|
|
<tbody>
|
|
@foreach($recentTreatments as $t)
|
|
<tr class="hover:bg-slate-50/50">
|
|
<td class="px-8 py-5 flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600 font-black text-xs">
|
|
{{ substr($t->cat->nama_kucing, 0, 1) }}
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-black text-slate-800 uppercase leading-none">{{ $t->cat->nama_kucing }}</div>
|
|
<div class="text-[9px] text-slate-400 font-bold mt-1">{{ $t->created_at->diffForHumans() }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-8 py-5 text-xs italic text-slate-500">"{{ $t->keluhan }}"</td>
|
|
<td class="px-8 py-5 text-right font-black text-indigo-600 text-[10px] uppercase">{{ $t->nama_obat }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- Charts --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="bg-white rounded-[3rem] border border-slate-100 p-8">
|
|
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">Sebaran Ras</h4>
|
|
<canvas id="breedChart" class="max-h-[200px]"></canvas>
|
|
</div>
|
|
<div class="bg-white rounded-[3rem] border border-slate-100 p-8">
|
|
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">Tren Berat Badan (kg)</h4>
|
|
<canvas id="weightChart" class="max-h-[200px]"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Right Content: Reminders --}}
|
|
<div class="space-y-8">
|
|
<div class="bg-slate-900 rounded-[3rem] p-8 text-white relative overflow-hidden shadow-2xl">
|
|
<h3 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] mb-6">Medical Reminders</h3>
|
|
<div class="space-y-6">
|
|
@foreach([['Vaksin', 'vaccine', 'syringe'], ['Kutu', 'flea', 'bug'], ['Cacing', 'deworming', 'bug-slash'], ['Grooming', 'grooming', 'soap']] as $item)
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[10px] font-bold text-slate-300 uppercase"><i class="fas fa-{{ $item[2] }} mr-2"></i> {{ $item[0] }}</span>
|
|
<span class="text-xs font-black {{ $medicalAlerts[$item[1]] > 0 ? 'text-rose-400 animate-pulse' : 'text-slate-500' }}">{{ $medicalAlerts[$item[1]] }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="bg-indigo-600 rounded-[3rem] p-8 text-white">
|
|
<h4 class="font-black text-sm uppercase tracking-widest mb-2 italic">Breeder Tip</h4>
|
|
<p class="text-[10px] text-indigo-100 leading-relaxed font-medium">Jangan lupa berikan vitamin bulu khusus untuk kucing <strong>Persian</strong> Anda setiap pagi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Breed Chart
|
|
new Chart(document.getElementById('breedChart'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: {!! json_encode($chartData->pluck('ras')) !!},
|
|
datasets: [{ data: {!! json_encode($chartData->pluck('total')) !!}, backgroundColor: ['#6366f1', '#f43f5e', '#fbbf24', '#10b981'], borderWidth: 0, spacing: 10 }]
|
|
},
|
|
options: { cutout: '80%', plugins: { legend: { position: 'bottom', labels: { font: { size: 10, weight: 'bold' }, usePointStyle: true } } } }
|
|
});
|
|
|
|
// Weight Chart
|
|
new Chart(document.getElementById('weightChart'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: {!! json_encode($weightTrends->pluck('month')) !!},
|
|
datasets: [{ label: 'Berat (kg)', data: {!! json_encode($weightTrends->pluck('avg_weight')) !!}, borderColor: '#6366f1', tension: 0.4, fill: true, backgroundColor: 'rgba(99, 102, 241, 0.1)' }]
|
|
},
|
|
options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false, grid: { display: false } }, x: { grid: { display: false } } } }
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |