Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,250 @@
|
||||
<x-app-layout>
|
||||
<div class="max-w-4xl mx-auto space-y-6 pb-12">
|
||||
{{-- Header & Back Button --}}
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight uppercase">Tambah Kucing Baru</h2>
|
||||
<p class="text-sm text-slate-500 font-medium italic tracking-tight">Registrasi identitas permanen & silsilah ke database Ilycats.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Notifikasi Error --}}
|
||||
@if ($errors->any())
|
||||
<div class="p-5 bg-rose-50 border-2 border-rose-100 text-rose-600 rounded-[2rem] shadow-sm animate-fade-in">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<i class="fas fa-exclamation-circle text-lg"></i>
|
||||
<h3 class="text-xs font-black uppercase tracking-widest">Terdapat Kesalahan Input:</h3>
|
||||
</div>
|
||||
<ul class="list-disc list-inside text-[11px] font-bold space-y-1 ml-1">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('cats.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
||||
@csrf
|
||||
|
||||
{{-- SECTION 1: IDENTITAS UTAMA --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
|
||||
<h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
|
||||
<i class="fas fa-id-card"></i> Identitas & Dokumen Resmi
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{-- Nama Kucing --}}
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Lengkap Kucing (Sesuai Pedigree)</label>
|
||||
<input type="text" name="nama_kucing" value="{{ old('nama_kucing') }}" required placeholder="Contoh: Earrin Cats Moonlight" class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 transition-all text-sm font-bold text-slate-800">
|
||||
</div>
|
||||
|
||||
{{-- No. Pedigree, Microchip, & EMS (GRID 3 KOLOM) --}}
|
||||
<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Pedigree</label>
|
||||
<input type="text" name="pedigree" value="{{ old('pedigree') }}" placeholder="ICA.LO.xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Microchip</label>
|
||||
<input type="text" name="microchip" value="{{ old('microchip') }}" placeholder="90011xxxx" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kode EMS</label>
|
||||
<input type="text" name="kode_ems" value="{{ old('kode_ems') }}" placeholder="PER d 03" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 transition-all text-xs font-bold text-slate-800">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Ras Kucing --}}
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Ras / Breed</label>
|
||||
<select name="ras" required class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 transition-all text-sm font-bold text-slate-800">
|
||||
<option value="Persian" {{ old('ras') == 'Persian' ? 'selected' : '' }}>Persian</option>
|
||||
<option value="British Shorthair" {{ old('ras') == 'British Shorthair' ? 'selected' : '' }}>British Shorthair</option>
|
||||
<option value="Lainnya" {{ old('ras') == 'Lainnya' ? 'selected' : '' }}>Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- Tanggal Lahir --}}
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Lahir</label>
|
||||
<input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir') }}" class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-indigo-500 transition-all text-sm font-bold text-slate-800">
|
||||
</div>
|
||||
|
||||
{{-- Registry --}}
|
||||
<div class="md:col-span-2 space-y-3">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1 block">Federasi / Registry</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
@foreach(['ICA', 'CFA', 'WCF', 'FFF'] as $reg)
|
||||
<label class="block cursor-pointer group">
|
||||
<input type="checkbox" name="registry[]" value="{{ $reg }}"
|
||||
{{ is_array(old('registry')) && in_array($reg, old('registry')) ? 'checked' : '' }}
|
||||
class="sr-only peer">
|
||||
<div class="py-4 text-center border-2 border-slate-100 rounded-2xl text-[10px] font-black text-slate-400
|
||||
peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600
|
||||
transition-all shadow-sm group-hover:border-slate-300 uppercase">
|
||||
{{ $reg }}
|
||||
</div>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Jenis Kelamin --}}
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jenis Kelamin</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex-1 cursor-pointer">
|
||||
<input type="radio" name="jenis_kelamin" value="Jantan" {{ old('jenis_kelamin', 'Jantan') == 'Jantan' ? 'checked' : '' }} class="hidden peer">
|
||||
<div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-blue-50 peer-checked:border-blue-500 peer-checked:text-blue-600 transition-all shadow-sm">
|
||||
<i class="fas fa-mars mr-2"></i> JANTAN (SIRE)
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1 cursor-pointer">
|
||||
<input type="radio" name="jenis_kelamin" value="Betina" {{ old('jenis_kelamin') == 'Betina' ? 'checked' : '' }} class="hidden peer">
|
||||
<div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-pink-50 peer-checked:border-pink-500 peer-checked:text-pink-600 transition-all shadow-sm">
|
||||
<i class="fas fa-venus mr-2"></i> BETINA (DAM)
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 2: GENETIK & LOKASI --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
|
||||
<h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
|
||||
<i class="fas fa-dna"></i> Penempatan & Silsilah Induk
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Jantan</label>
|
||||
<select name="induk_jantan_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
|
||||
<option value="">-- Tanpa Sire --</option>
|
||||
@foreach($sires as $sire)
|
||||
<option value="{{ $sire->id }}" {{ old('induk_jantan_id') == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Induk Betina</label>
|
||||
<select name="induk_betina_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
|
||||
<option value="">-- Tanpa Dam --</option>
|
||||
@foreach($dams as $dam)
|
||||
<option value="{{ $dam->id }}" {{ old('induk_betina_id') == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Lokasi Kandang</label>
|
||||
<select name="lokasi_kandang" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-indigo-600 uppercase">
|
||||
@foreach(['A1', 'A2', 'Lorong', 'E1', 'E2'] as $loc)
|
||||
<option value="{{ $loc }}" {{ old('lokasi_kandang') == $loc ? 'selected' : '' }}>{{ $loc }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">PIC (Penanggung Jawab)</label>
|
||||
<select name="pic_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700">
|
||||
@foreach($users as $user)
|
||||
<option value="{{ $user->id }}" {{ old('pic_id', auth()->id()) == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 3: JADWAL & PERTUMBUHAN --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{-- Jadwal Medis --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
|
||||
<h4 class="text-xs font-black text-rose-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
|
||||
<i class="fas fa-calendar-alt"></i> Jadwal Perawatan
|
||||
</h4>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@foreach (['vaksin', 'obat_cacing', 'obat_kutu', 'grooming'] as $task)
|
||||
<div class="space-y-1">
|
||||
<label class="text-[9px] font-bold text-slate-400 uppercase ml-1">{{ str_replace('_', ' ', $task) }}</label>
|
||||
<input type="date" name="jadwal_{{ $task }}" value="{{ old('jadwal_'.$task) }}" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl text-[10px] font-black text-slate-700 focus:ring-rose-500">
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Monitoring Berat --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
|
||||
<h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
|
||||
<i class="fas fa-weight-scale"></i> Vitalitas & Berat
|
||||
</h4>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase ml-1">Berat Badan Awal</label>
|
||||
<div class="relative mt-2">
|
||||
<input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan') }}" placeholder="0.00" class="w-full pl-6 pr-14 py-5 bg-slate-50 border border-slate-200 rounded-3xl text-2xl font-black text-slate-800 focus:ring-emerald-500">
|
||||
<span class="absolute right-6 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">KG</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 4: FOTO --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-4">
|
||||
<h4 class="text-xs font-black text-slate-800 uppercase tracking-widest ml-1 mb-2">Unggah Foto Utama</h4>
|
||||
<div class="relative group">
|
||||
<input type="file" name="foto" id="foto" class="hidden" onchange="previewImage(event)">
|
||||
<label for="foto" class="flex flex-col items-center justify-center border-4 border-dashed border-slate-100 rounded-[3rem] p-12 text-center cursor-pointer hover:border-indigo-200 hover:bg-indigo-50/20 transition-all duration-500 group">
|
||||
<div id="preview-container" class="hidden mb-6">
|
||||
<img id="image-preview" class="w-48 h-48 rounded-[2.5rem] object-cover shadow-2xl ring-8 ring-white">
|
||||
</div>
|
||||
<div id="upload-instruction" class="space-y-4">
|
||||
<div class="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center mx-auto group-hover:scale-110 group-hover:bg-white transition-all duration-500 shadow-sm">
|
||||
<i class="fas fa-camera-retro text-3xl text-slate-300 group-hover:text-indigo-500"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-slate-600 font-black tracking-widest uppercase">Pilih Foto Terbaik</p>
|
||||
<p class="text-[10px] text-slate-400 mt-1 uppercase font-bold tracking-tighter italic">JPG, PNG, WEBP (Maks 2MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Action Button --}}
|
||||
<div class="pt-4">
|
||||
<button type="submit" class="w-full py-6 bg-indigo-600 text-white text-xs font-black rounded-[2.5rem] shadow-2xl shadow-indigo-100 hover:bg-indigo-700 hover:-translate-y-1 transition-all active:scale-[0.98] flex items-center justify-center gap-4 group">
|
||||
<i class="fas fa-save text-xl"></i>
|
||||
<span class="tracking-[0.2em] uppercase">Simpan Record Baru</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.animate-fade-in { animation: fadeIn 0.4s ease-out; }
|
||||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function previewImage(event) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function() {
|
||||
const output = document.getElementById('image-preview');
|
||||
const container = document.getElementById('preview-container');
|
||||
const instruction = document.getElementById('upload-instruction');
|
||||
|
||||
output.src = reader.result;
|
||||
container.classList.remove('hidden');
|
||||
instruction.classList.add('hidden');
|
||||
}
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
</script>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,245 @@
|
||||
<x-app-layout>
|
||||
<div class="max-w-4xl mx-auto space-y-6 pb-12">
|
||||
{{-- Header & Back Button --}}
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight">Edit Profil: {{ $cat->nama_kucing }}</h2>
|
||||
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-tighter">ID Pasien #{{ str_pad($cat->id, 4, '0', STR_PAD_LEFT) }} • Update Identitas</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Notifikasi Error --}}
|
||||
@if ($errors->any())
|
||||
<div class="p-5 bg-rose-50 border-2 border-rose-100 text-rose-600 rounded-[2rem] shadow-sm animate-fade-in">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<i class="fas fa-exclamation-circle text-lg"></i>
|
||||
<h3 class="text-xs font-black uppercase tracking-widest">Gagal Memperbarui Data:</h3>
|
||||
</div>
|
||||
<ul class="list-disc list-inside text-[11px] font-bold space-y-1 ml-1">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('cats.update', $cat->id) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
||||
@csrf
|
||||
@method('PATCH')
|
||||
|
||||
{{-- SECTION 1: IDENTITAS UTAMA & DOKUMEN --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-8">
|
||||
<div class="flex items-center gap-4 mb-2 border-b border-slate-100 pb-4">
|
||||
<div class="w-8 h-8 bg-indigo-600 text-white rounded-xl flex items-center justify-center text-xs shadow-lg">
|
||||
<i class="fas fa-id-card"></i>
|
||||
</div>
|
||||
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Identitas & Dokumen Resmi</h4>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-6 items-start">
|
||||
|
||||
{{-- FOTO SECTION (THUMBNAIL) --}}
|
||||
<div class="relative group self-center md:self-start flex-shrink-0">
|
||||
<div class="w-24 h-24 rounded-3xl bg-slate-50 border-2 border-slate-200 overflow-hidden ring-4 ring-indigo-50 shadow-md flex items-center justify-center">
|
||||
<img id="image-preview" src="{{ $cat->foto_url }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
</div>
|
||||
<label for="foto" class="absolute -bottom-2 -right-2 w-9 h-9 bg-indigo-600 text-white rounded-xl border-4 border-white cursor-pointer shadow-sm hover:scale-110 transition-transform active:scale-95 flex items-center justify-center">
|
||||
<i class="fas fa-camera text-[10px]"></i>
|
||||
<input type="file" name="foto" id="foto" class="hidden" accept="image/*" onchange="previewImage(event)">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{-- Form Identitas Grid --}}
|
||||
<div class="flex-1 grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Nama Lengkap Kucing</label>
|
||||
<input type="text" name="nama_kucing" value="{{ old('nama_kucing', $cat->nama_kucing) }}" required class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500 transition-all">
|
||||
</div>
|
||||
|
||||
{{-- PERBAIKAN: GRID IDENTITAS (PEDIGREE, MICROCHIP, EMS) --}}
|
||||
<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-3 gap-4 border-y border-slate-50 py-6 my-2">
|
||||
{{-- Input Pedigree --}}
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Pedigree</label>
|
||||
<input type="text" name="pedigree" value="{{ old('pedigree', $cat->pedigree) }}" placeholder="ICA.LO.xxx"
|
||||
class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
|
||||
</div>
|
||||
|
||||
{{-- Input Microchip --}}
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">No. Microchip</label>
|
||||
<input type="text" name="microchip" value="{{ old('microchip', $cat->microchip) }}" placeholder="9001xxxx"
|
||||
class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-bold text-slate-800">
|
||||
</div>
|
||||
|
||||
{{-- Input Kode EMS (Highlight Indigo) --}}
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-indigo-600 uppercase tracking-widest ml-1 flex items-center gap-2">
|
||||
<i class="fas fa-dna text-[10px]"></i> Kode EMS
|
||||
</label>
|
||||
<input type="text" name="kode_ems" value="{{ old('kode_ems', $cat->kode_ems) }}" placeholder="PER d 03"
|
||||
class="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-xl focus:ring-2 focus:ring-indigo-500 text-xs font-black text-indigo-700 uppercase">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Ras / Breed</label>
|
||||
<select name="ras" required class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500">
|
||||
@foreach(['Persian', 'British Shorthair', 'Scottish Fold', 'Maine Coon', 'Munchkin', 'Lainnya'] as $ras)
|
||||
<option value="{{ $ras }}" {{ old('ras', $cat->ras) == $ras ? 'selected' : '' }}>{{ $ras }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Tanggal Lahir</label>
|
||||
<input type="date" name="tanggal_lahir" value="{{ old('tanggal_lahir', $cat->tanggal_lahir?->format('Y-m-d')) }}" class="w-full px-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-bold text-slate-800 focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
{{-- Registry / Federasi --}}
|
||||
<div class="space-y-3 md:col-span-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Registry / Federasi</label>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
@foreach(['ICA', 'CFA', 'WCF', 'FFF'] as $reg)
|
||||
@php
|
||||
$isChecked = (is_array(old('registry')) && in_array($reg, old('registry'))) ||
|
||||
(is_array($cat->registry) && in_array($reg, $cat->registry));
|
||||
@endphp
|
||||
<label class="block cursor-pointer group">
|
||||
<input type="checkbox" name="registry[]" value="{{ $reg }}" {{ $isChecked ? 'checked' : '' }} class="sr-only peer">
|
||||
<div class="py-4 text-center border-2 border-slate-100 rounded-2xl text-[10px] font-black text-slate-400 peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 transition-all shadow-sm group-hover:border-slate-300">
|
||||
{{ $reg }}
|
||||
</div>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Jenis Kelamin --}}
|
||||
<div class="space-y-2 md:col-span-2">
|
||||
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Jenis Kelamin</label>
|
||||
<div class="flex gap-4">
|
||||
<label class="flex-1 cursor-pointer group">
|
||||
<input type="radio" name="jenis_kelamin" value="Jantan" {{ old('jenis_kelamin', $cat->jenis_kelamin) == 'Jantan' ? 'checked' : '' }} class="sr-only peer">
|
||||
<div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-blue-50 peer-checked:border-blue-500 peer-checked:text-blue-600 transition-all shadow-sm group-hover:border-slate-200">
|
||||
<i class="fas fa-mars mr-2"></i> JANTAN
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1 cursor-pointer group">
|
||||
<input type="radio" name="jenis_kelamin" value="Betina" {{ old('jenis_kelamin', $cat->jenis_kelamin) == 'Betina' ? 'checked' : '' }} class="sr-only peer">
|
||||
<div class="p-4 text-center border-2 border-slate-100 rounded-2xl text-xs font-black text-slate-400 peer-checked:bg-pink-50 peer-checked:border-pink-500 peer-checked:text-pink-600 transition-all shadow-sm group-hover:border-slate-200">
|
||||
<i class="fas fa-venus mr-2"></i> BETINA
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 2: GENETIK & LOKASI --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6">
|
||||
<h4 class="text-xs font-black text-indigo-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-2 flex items-center gap-2 italic">
|
||||
<i class="fas fa-dna text-sm"></i> Penempatan & Silsilah Induk
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Sire (Bapak)</label>
|
||||
<select name="induk_jantan_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
|
||||
<option value="">-- Tidak Diketahui --</option>
|
||||
@foreach($sires as $sire)
|
||||
<option value="{{ $sire->id }}" {{ old('induk_jantan_id', $cat->induk_jantan_id) == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Dam (Ibu)</label>
|
||||
<select name="induk_betina_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
|
||||
<option value="">-- Tidak Diketahui --</option>
|
||||
@foreach($dams as $dam)
|
||||
<option value="{{ $dam->id }}" {{ old('induk_betina_id', $cat->induk_betina_id) == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Lokasi Kandang</label>
|
||||
<select name="lokasi_kandang" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-indigo-600 uppercase focus:ring-2 focus:ring-indigo-500">
|
||||
@foreach(['A1', 'A2', 'Lorong', 'E1', 'E2', 'Karantina'] as $loc)
|
||||
<option value="{{ $loc }}" {{ old('lokasi_kandang', $cat->lokasi_kandang) == $loc ? 'selected' : '' }}>{{ $loc }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">PIC Bertugas</label>
|
||||
<select name="pic_id" class="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-2xl text-[11px] font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500">
|
||||
@foreach($users as $user)
|
||||
<option value="{{ $user->id }}" {{ old('pic_id', $cat->pic_id) == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 3: JADWAL & DATA FISIK --}}
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2 bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm">
|
||||
<div class="flex items-center gap-3 mb-6 border-b border-slate-100 pb-4">
|
||||
<div class="w-7 h-7 bg-rose-50 text-rose-600 rounded-lg flex items-center justify-center text-[10px]">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<h4 class="text-xs font-black text-rose-600 uppercase tracking-widest italic">Jadwal Perawatan</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
@foreach(['jadwal_vaksin' => 'Vaksin', 'jadwal_obat_cacing' => 'Obat Cacing', 'jadwal_obat_kutu' => 'Obat Kutu', 'jadwal_grooming' => 'Grooming'] as $key => $label)
|
||||
<div>
|
||||
<label class="text-[9px] font-bold text-slate-400 uppercase ml-1">{{ $label }}</label>
|
||||
<input type="date" name="{{ $key }}" value="{{ old($key, $cat->$key ? $cat->$key->format('Y-m-d') : '') }}" class="w-full mt-1 p-3 bg-slate-50 border border-slate-200 rounded-xl text-[10px] font-black text-slate-700 focus:ring-2 focus:ring-rose-200 transition-all">
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm">
|
||||
<h4 class="text-xs font-black text-emerald-600 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6 italic flex items-center gap-2">
|
||||
<i class="fas fa-weight-scale text-sm"></i> Vitalitas
|
||||
</h4>
|
||||
<label class="text-[10px] font-bold text-slate-400 uppercase ml-1">Berat Badan</label>
|
||||
<div class="relative mt-2">
|
||||
<input type="number" step="0.01" name="berat_badan" value="{{ old('berat_badan', $cat->berat_badan) }}" class="w-full pl-5 pr-14 py-4 bg-slate-50 border border-slate-200 rounded-[1.5rem] text-2xl font-black text-slate-800 focus:ring-2 focus:ring-emerald-500 transition-all">
|
||||
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-xs font-black text-slate-400">KG</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm border-l-4 border-l-rose-500">
|
||||
<label class="text-[10px] font-black text-rose-600 uppercase tracking-widest ml-1">Kondisi Kesehatan</label>
|
||||
<textarea name="riwayat_sakit_terakhir" class="w-full mt-2 p-4 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-700 h-24 focus:ring-2 focus:ring-rose-200 transition-all">{{ old('riwayat_sakit_terakhir', $cat->riwayat_sakit_terakhir) }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Action Button --}}
|
||||
<button type="submit" class="w-full py-6 bg-indigo-600 text-white text-xs font-black rounded-[2.5rem] shadow-2xl hover:bg-indigo-700 transition-all active:scale-[0.98] flex items-center justify-center gap-4 group">
|
||||
<i class="fas fa-cloud-upload-alt text-lg group-hover:animate-bounce transition-transform"></i>
|
||||
<span class="tracking-[0.2em] uppercase">Simpan Perubahan Data Ilycats</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function previewImage(event) {
|
||||
const reader = new FileReader();
|
||||
const preview = document.getElementById('image-preview');
|
||||
reader.onload = function() {
|
||||
if(reader.readyState === 2) {
|
||||
preview.src = reader.result;
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
</script>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,185 @@
|
||||
<x-app-layout>
|
||||
<div class="space-y-6 pb-8">
|
||||
{{-- 1. STATS OVERVIEW --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<x-stats-card title="Total Kucing" :value="$totalCats" icon="fa-cat" color="indigo" />
|
||||
<x-stats-card title="Kucing Sehat" :value="$totalCats - $sickCats" icon="fa-heart" color="emerald" />
|
||||
<x-stats-card title="Dalam Perawatan" :value="$sickCats" icon="fa-stethoscope" color="rose" />
|
||||
</div>
|
||||
|
||||
{{-- 2. ACTION HEADER --}}
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Manajemen Kucing</h2>
|
||||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Cattery Management System • Ilycats</p>
|
||||
</div>
|
||||
|
||||
{{-- PROTEKSI TOMBOL CREATE --}}
|
||||
@can('check-access', ['cats', 'create'])
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('cats.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white text-xs font-black rounded-2xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
|
||||
<i class="fas fa-plus-circle mr-2"></i> REGISTRASI KUCING BARU
|
||||
</a>
|
||||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
|
||||
{{-- 3. TABLE CONTAINER --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
|
||||
{{-- SEARCH & QUICK FILTER --}}
|
||||
<div class="p-6 bg-slate-50/50 border-b border-slate-100 flex flex-col md:flex-row justify-between gap-4">
|
||||
<form action="{{ route('cats.index') }}" method="GET" class="relative w-full md:w-1/3">
|
||||
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
|
||||
<input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, ras, atau microchip..."
|
||||
class="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500 transition-all shadow-sm">
|
||||
</form>
|
||||
|
||||
<div class="flex items-center p-1 bg-slate-100 rounded-xl shrink-0">
|
||||
<a href="{{ route('cats.index') }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ !request('status') ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Semua</a>
|
||||
<a href="{{ route('cats.index', ['status' => 'Active']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Active' ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Dewasa</a>
|
||||
<a href="{{ route('cats.index', ['status' => 'Kitten']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Kitten' ? 'bg-white text-amber-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Kitten</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-5">Informasi Kucing</th>
|
||||
<th class="px-6 py-5">Usia & Silsilah</th>
|
||||
<th class="px-6 py-5 text-center">Lokasi Kandang</th>
|
||||
<th class="px-6 py-5 text-center">Penanggung Jawab</th>
|
||||
<th class="px-6 py-5 text-center">Monitoring Berat</th>
|
||||
<th class="px-6 py-5 text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 font-medium text-slate-700">
|
||||
@forelse($cats as $cat)
|
||||
<tr class="hover:bg-slate-50/80 transition-all group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative shrink-0">
|
||||
<div class="w-14 h-14 rounded-2xl bg-slate-100 overflow-hidden ring-4 ring-white shadow-sm transition-transform group-hover:scale-105">
|
||||
<img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
@if($cat->status === 'Kitten')
|
||||
<div class="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 border-2 border-white rounded-full shadow-sm animate-pulse" title="Kitten"></div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<a href="{{ route('cats.show', $cat->id) }}" class="text-sm font-black text-slate-800 hover:text-indigo-600 transition-colors uppercase tracking-tight">{{ $cat->nama_kucing }}</a>
|
||||
{!! $cat->gender_icon !!}
|
||||
</div>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="px-2 py-0.5 bg-indigo-50 text-indigo-500 rounded text-[9px] font-black uppercase">{{ $cat->ras }}</span>
|
||||
<span class="text-slate-300">•</span>
|
||||
{!! $cat->registry_badges !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[11px] font-black text-slate-700">{{ $cat->age }}</span>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<i class="fas fa-birthday-cake text-[8px] text-slate-300"></i>
|
||||
<span class="text-[9px] text-slate-400 font-bold italic">{{ $cat->tanggal_lahir?->format('d M Y') ?? 'N/A' }}</span>
|
||||
</div>
|
||||
@if($cat->induk_betina_id)
|
||||
<span class="text-[8px] text-rose-400 font-bold uppercase mt-1 tracking-tighter">Dam: {{ $cat->dam->nama_kucing }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50/50 text-indigo-600 rounded-xl text-[10px] font-black border border-indigo-100 uppercase italic">
|
||||
<i class="fas fa-door-closed text-[9px]"></i>
|
||||
{{ $cat->lokasi_kandang ?? 'Global' }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[10px] font-black text-slate-600 uppercase tracking-tighter">{{ $cat->pic->name ?? 'System' }}</span>
|
||||
<span class="text-[8px] text-slate-400 font-bold uppercase tracking-widest">In Charge</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-center">
|
||||
@php $isOverdue = $cat->updated_at->diffInDays(now()) >= 3; @endphp
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-baseline gap-0.5 {{ $isOverdue ? 'text-rose-600' : 'text-emerald-600' }}">
|
||||
<span class="text-sm font-black">{{ number_format($cat->berat_badan, 2) }}</span>
|
||||
<span class="text-[9px] font-bold">KG</span>
|
||||
</div>
|
||||
@if($isOverdue)
|
||||
<div class="flex items-center gap-1 mt-1 text-rose-400 animate-pulse">
|
||||
<i class="fas fa-exclamation-triangle text-[8px]"></i>
|
||||
<span class="text-[7px] font-black uppercase tracking-widest">Update!</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div class="flex justify-end items-center gap-2">
|
||||
{{-- PROTEKSI TOMBOL READ --}}
|
||||
@can('check-access', ['cats', 'read'])
|
||||
<a href="{{ route('cats.show', $cat->id) }}"
|
||||
class="w-9 h-9 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm group-hover:shadow-indigo-100"
|
||||
title="Detail Medis">
|
||||
<i class="fas fa-heartbeat text-xs"></i>
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
{{-- PROTEKSI TOMBOL EDIT/UPDATE --}}
|
||||
@can('check-access', ['cats', 'update'])
|
||||
<a href="{{ route('cats.edit', $cat->id) }}"
|
||||
class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 rounded-xl hover:bg-amber-600 hover:text-white transition-all shadow-sm"
|
||||
title="Edit Profil">
|
||||
<i class="fas fa-pencil-alt text-xs"></i>
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
{{-- PROTEKSI TOMBOL DELETE --}}
|
||||
@can('check-access', ['cats', 'delete'])
|
||||
<button type="button"
|
||||
onclick="confirmDelete('delete-form-{{ $cat->id }}', '{{ $cat->nama_kucing }}')"
|
||||
class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 rounded-xl hover:bg-rose-500 hover:text-white transition-all shadow-sm"
|
||||
title="Hapus">
|
||||
<i class="fas fa-trash text-xs"></i>
|
||||
</button>
|
||||
|
||||
<form id="delete-form-{{ $cat->id }}" action="{{ route('cats.destroy', $cat->id) }}" method="POST" class="hidden">
|
||||
@csrf @method('DELETE')
|
||||
</form>
|
||||
@endcan
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-32 text-center bg-slate-50/30">
|
||||
<div class="flex flex-col items-center">
|
||||
<i class="fas fa-cat text-5xl text-slate-100 mb-4 animate-bounce"></i>
|
||||
<h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Belum Ada Data Kucing</h3>
|
||||
<p class="text-slate-300 text-[10px] font-bold mt-2 uppercase">Silakan klik tombol registrasi untuk memulai</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="p-8 border-t border-slate-100 bg-slate-50/30">
|
||||
{{ $cats->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
@page { margin: 0; }
|
||||
body {
|
||||
font-family: 'Helvetica', 'Arial', sans-serif;
|
||||
background-color: #f1f5f9;
|
||||
margin: 0; padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-wrapper { padding-top: 30px; }
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 260pt;
|
||||
background: #ffffff;
|
||||
border-radius: 30px;
|
||||
padding: 0; /* Padding dipindah ke dalam agar aksen bar bisa full width */
|
||||
text-align: left;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden; /* Memastikan border-radius memotong aksen bar */
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
/* Akses Bar Warna di Atas */
|
||||
.accent-bar {
|
||||
height: 8px;
|
||||
background: linear-gradient(to right, #4f46e5, #818cf8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-content { padding: 25px; }
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #f8fafc;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 11pt;
|
||||
font-weight: 900;
|
||||
color: #4f46e5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-size: 22pt;
|
||||
font-weight: bold;
|
||||
color: #0f172a;
|
||||
margin-top: 4px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.info-table { width: 100%; border-collapse: collapse; }
|
||||
|
||||
.label {
|
||||
font-size: 7.5pt;
|
||||
font-weight: 900;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
color: #334155;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
background-color: #f8fafc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.qr-image { margin-bottom: 8px; }
|
||||
|
||||
.qr-text {
|
||||
font-size: 8pt;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 7pt;
|
||||
color: #94a3b8;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-wrapper">
|
||||
<div class="card">
|
||||
<div class="accent-bar"></div>
|
||||
<div class="card-content">
|
||||
<div class="header">
|
||||
<div class="brand">ILY Aregau Cattery</div>
|
||||
<div class="cat-name">{{ $cat->nama_kucing }}</div>
|
||||
</div>
|
||||
|
||||
<table class="info-table">
|
||||
<tr>
|
||||
<td width="55%">
|
||||
<div class="label">Ras / Breed</div>
|
||||
<div class="value">{{ $cat->ras }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="label">ID Kucing</div>
|
||||
<div class="value">#{{ str_pad($cat->id, 4, '0', STR_PAD_LEFT) }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="label">Jenis Kelamin</div>
|
||||
<div class="value">{{ $cat->jenis_kelamin }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="label">Usia</div>
|
||||
<div class="value">{{ $cat->age }}</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="qr-section">
|
||||
<div class="qr-image">
|
||||
{{-- FIX: Base64 SVG yang sudah Anda buat di Controller --}}
|
||||
<img src="data:image/svg+xml;base64,{{ $qrCode }}" width="90">
|
||||
</div>
|
||||
<div class="qr-text">Scan Medical History</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
Generated by ILY Cattery Management System<br>
|
||||
{{ now()->format('d M Y H:i') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,352 @@
|
||||
<x-app-layout>
|
||||
@push('styles')
|
||||
<style>
|
||||
canvas { max-width: 100% !important; }
|
||||
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="max-w-[1600px] mx-auto space-y-8 pb-12">
|
||||
{{-- 1. Header Section --}}
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</a>
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none">{{ $cat->nama_kucing }}</h2>
|
||||
{!! $cat->gender_icon !!}
|
||||
</div>
|
||||
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Medical Record #FE-{{ str_pad($cat->id, 5, '0', STR_PAD_LEFT) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="{{ route('cats.pdf', $cat->id) }}" target="_blank" class="inline-flex items-center px-6 py-3.5 bg-rose-600 text-white text-[10px] font-black rounded-2xl hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 active:scale-95">
|
||||
<i class="fas fa-file-pdf mr-2 text-sm"></i> CETAK MEDICAL PASS
|
||||
</a>
|
||||
|
||||
{{-- PROTEKSI TOMBOL UPDATE: Hanya muncul jika memiliki izin Update ATAU Delete --}}
|
||||
@if(Gate::allows('check-access', ['cats', 'update']) || Gate::allows('check-access', ['cats', 'delete']))
|
||||
<a href="{{ route('cats.edit', $cat->id) }}" class="inline-flex items-center px-6 py-3.5 bg-white border border-slate-200 text-slate-600 text-[10px] font-black rounded-2xl hover:bg-slate-50 transition-all shadow-sm active:scale-95">
|
||||
<i class="fas fa-edit mr-2 text-indigo-500 text-sm"></i> UPDATE DATA
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{{-- Column 1: Profile & Core Identity --}}
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm text-center relative overflow-hidden group">
|
||||
<div class="absolute top-0 left-0 p-6">
|
||||
{!! $cat->status_badge !!}
|
||||
</div>
|
||||
|
||||
<div class="w-48 h-48 mx-auto rounded-[3rem] bg-slate-50 overflow-hidden ring-8 ring-slate-50 shadow-xl mb-6 transition-transform group-hover:scale-105 duration-500">
|
||||
<img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-black text-slate-800 mb-6 tracking-tighter uppercase">{{ $cat->nama_kucing }}</h3>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 text-left border-t border-slate-100 pt-6">
|
||||
<div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Registry</p>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
{!! $cat->registry_badges !!}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100 text-center">
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Umur Saat Ini</p>
|
||||
<p class="text-xs font-black text-slate-700 tracking-tighter">{{ $cat->age }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm space-y-5">
|
||||
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50 pb-3">Informasi Teknis</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs font-bold text-slate-400 uppercase">Microchip</span>
|
||||
<span class="text-xs font-black text-slate-700 font-mono">{{ $cat->microchip ?? 'Unchipped' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs font-bold text-slate-400 uppercase">Pedigree No.</span>
|
||||
<span class="text-xs font-black text-slate-700">{{ $cat->pedigree ?? '-' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs font-bold text-slate-400 uppercase">Lokasi Kandang</span>
|
||||
<span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 rounded text-[10px] font-black uppercase tracking-widest">{{ $cat->lokasi_kandang ?? 'Global' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-xs font-bold text-slate-400 uppercase">PIC Bertugas</span>
|
||||
<span class="text-xs font-black text-slate-700">{{ $cat->pic?->name ?? 'System' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php $isOverdue = $cat->updated_at->diffInDays(now()) >= 3; @endphp
|
||||
<div class="mt-6 p-5 {{ $isOverdue ? 'bg-rose-50 border-rose-100' : 'bg-emerald-50 border-emerald-100' }} border rounded-3xl">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<span class="text-[9px] font-black uppercase {{ $isOverdue ? 'text-rose-600' : 'text-emerald-600' }}">Monitoring Berat</span>
|
||||
<span class="text-[9px] font-bold text-slate-400 uppercase italic">{{ $cat->updated_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-2xl font-black text-slate-800">{{ number_format($cat->berat_badan, 2) }}</span>
|
||||
<span class="text-xs font-black text-slate-400 uppercase">Kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Column 2: Lineage & Health Routine --}}
|
||||
<div class="space-y-8">
|
||||
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm">
|
||||
<h4 class="text-xs font-black text-slate-800 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6">Parental Intelligence</h4>
|
||||
<div class="space-y-4">
|
||||
{{-- SIRE --}}
|
||||
<div class="p-4 bg-indigo-50/30 border border-indigo-100 rounded-3xl flex items-center gap-4 hover:bg-indigo-50 transition-colors cursor-default">
|
||||
<div class="w-12 h-12 bg-white border border-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm">
|
||||
<i class="fas fa-mars text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest">Sire (Pejantan)</p>
|
||||
<p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->sire->nama_kucing }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{-- DAM --}}
|
||||
<div class="p-4 bg-rose-50/30 border border-rose-100 rounded-3xl flex items-center gap-4 hover:bg-rose-50 transition-colors cursor-default">
|
||||
<div class="w-12 h-12 bg-white border border-rose-100 text-rose-600 rounded-2xl flex items-center justify-center shadow-sm">
|
||||
<i class="fas fa-venus text-lg"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-[9px] font-black text-rose-400 uppercase tracking-widest">Dam (Betina)</p>
|
||||
<p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->dam->nama_kucing }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900 rounded-[3rem] p-8 text-white shadow-2xl relative overflow-hidden">
|
||||
<h4 class="text-xs font-black uppercase tracking-widest border-b border-white/10 pb-4 mb-6 italic">Routine Medical Calendar</h4>
|
||||
<div class="grid grid-cols-1 gap-4 relative z-10">
|
||||
@foreach([
|
||||
['icon' => 'fa-syringe', 'label' => 'Vaksin', 'field' => 'jadwal_vaksin'],
|
||||
['icon' => 'fa-bug', 'label' => 'Obat Cacing', 'field' => 'jadwal_obat_cacing'],
|
||||
['icon' => 'fa-shield-virus', 'label' => 'Obat Kutu', 'field' => 'jadwal_obat_kutu'],
|
||||
['icon' => 'fa-bath', 'label' => 'Grooming', 'field' => 'jadwal_grooming']
|
||||
] as $item)
|
||||
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas {{ $item['icon'] }} text-xs text-slate-400"></i>
|
||||
<span class="text-[10px] font-black uppercase tracking-widest text-slate-300">{{ $item['label'] }}</span>
|
||||
</div>
|
||||
<span class="text-[11px] font-black {{ $cat->{$item['field']} && $cat->{$item['field']}->isPast() ? 'text-rose-400' : 'text-white' }}">
|
||||
{{ $cat->{$item['field']} ? $cat->{$item['field']}->format('d M Y') : 'NOT SET' }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<i class="fas fa-paw absolute -bottom-10 -right-10 text-[12rem] text-white/5 -rotate-12"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Column 3: Growth Analytics & Actions --}}
|
||||
<div class="space-y-8">
|
||||
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg leading-none">Analisis Berat</h4>
|
||||
<p class="text-[10px] text-slate-400 font-black uppercase mt-1">Growth Index (Kg)</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center">
|
||||
<i class="fas fa-chart-line text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-[250px]">
|
||||
<canvas id="weightChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- PROTEKSI QUICK ACTION: Hanya jika bisa Create Treatment --}}
|
||||
@can('check-access', ['treatments', 'create'])
|
||||
<div class="bg-indigo-600 rounded-[3rem] p-8 text-white shadow-xl shadow-indigo-100 flex flex-col justify-between h-[250px] group overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<h4 class="text-xs font-black uppercase tracking-widest mb-2 border-b border-white/20 pb-3">Quick Action</h4>
|
||||
<p class="text-[10px] text-indigo-100/60 leading-relaxed italic uppercase font-bold tracking-tighter">Gunakan menu ini untuk mencatat tindakan medis segera.</p>
|
||||
</div>
|
||||
<a href="{{ route('treatments.create', ['cat_id' => $cat->id]) }}" class="relative z-10 flex items-center justify-center gap-3 p-5 bg-white text-indigo-600 rounded-3xl font-black uppercase text-xs shadow-xl hover:scale-105 transition-all active:scale-95">
|
||||
<i class="fas fa-file-medical-alt text-lg"></i> Tambah Rekam Medis
|
||||
</a>
|
||||
<i class="fas fa-heartbeat absolute -bottom-10 -left-10 text-[10rem] text-white/5"></i>
|
||||
</div>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Log Section: Medical History Timeline --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[3rem] overflow-hidden shadow-sm">
|
||||
<div class="p-8 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<i class="fas fa-history text-slate-400"></i>
|
||||
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Historical Medical Log</h4>
|
||||
</div>
|
||||
<span class="text-[10px] font-black text-indigo-600 bg-white border border-indigo-100 px-5 py-2 rounded-full shadow-sm">{{ $cat->treatments->count() }} REKAMAN</span>
|
||||
</div>
|
||||
|
||||
<div class="p-10 max-h-[800px] overflow-y-auto custom-scrollbar">
|
||||
<div class="relative space-y-12">
|
||||
<div class="absolute left-[11px] top-2 bottom-2 w-0.5 bg-slate-100"></div>
|
||||
|
||||
@forelse($cat->treatments->sortByDesc('tanggal') as $treatment)
|
||||
<div class="relative flex items-start gap-8 group">
|
||||
<div class="z-10 w-6 h-6 rounded-full bg-white border-4 border-indigo-500 ring-8 ring-indigo-50 shadow-md"></div>
|
||||
|
||||
<div class="flex-1 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<p class="text-xs font-black text-indigo-600 uppercase tracking-widest bg-indigo-50 px-3 py-1 rounded-lg border border-indigo-100">
|
||||
{{ $treatment->tanggal->format('d F Y') }}
|
||||
</p>
|
||||
<span class="text-[10px] text-slate-400 font-bold italic">{{ $treatment->tanggal->diffForHumans() }}</span>
|
||||
</div>
|
||||
|
||||
{{-- PROTEKSI EDIT LOG: Hanya jika bisa Update Treatment --}}
|
||||
@can('check-access', ['treatments', 'update'])
|
||||
<a href="{{ route('treatments.edit', $treatment->id) }}" class="opacity-0 group-hover:opacity-100 p-2.5 bg-slate-50 text-slate-400 hover:text-amber-600 hover:bg-amber-50 rounded-xl transition-all" title="Edit Log">
|
||||
<i class="fas fa-pen text-xs"></i>
|
||||
</a>
|
||||
@endcan
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-sm group-hover:border-indigo-200 transition-all duration-300">
|
||||
<div class="flex flex-col md:flex-row gap-10">
|
||||
<div class="flex-1">
|
||||
<h5 class="text-lg font-black text-slate-800 mb-2 uppercase tracking-tight">{{ $treatment->keluhan }}</h5>
|
||||
<p class="text-sm text-slate-500 font-medium leading-relaxed italic border-l-4 border-indigo-100 pl-4 mb-6">Diagnosa: {{ $treatment->diagnosa }}</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl">
|
||||
<div class="w-10 h-10 rounded-xl bg-rose-50 flex items-center justify-center text-rose-500">
|
||||
<i class="fas fa-capsules"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Therapy</p>
|
||||
<p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->nama_obat }} ({{ $treatment->dosis }})</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl">
|
||||
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500">
|
||||
<i class="fas fa-user-md"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Medical Staff</p>
|
||||
<p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->user?->name ?? 'System' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($treatment->foto_bukti)
|
||||
<div class="shrink-0">
|
||||
<div class="w-44 h-44 rounded-[2.5rem] overflow-hidden ring-4 ring-slate-100 shadow-lg group/img relative">
|
||||
<img src="{{ asset('storage/' . $treatment->foto_bukti) }}" class="w-full h-full object-cover">
|
||||
<div class="absolute inset-0 bg-indigo-600/20 opacity-0 group-hover/img:opacity-100 transition-opacity flex items-center justify-center cursor-zoom-in">
|
||||
<i class="fas fa-search-plus text-white text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($treatment->keterangan)
|
||||
<div class="mt-8 p-5 bg-indigo-50/30 rounded-2xl border-l-4 border-indigo-200">
|
||||
<p class="text-[11px] text-slate-600 font-bold italic">
|
||||
<i class="fas fa-quote-left mr-3 text-indigo-200"></i> {{ $treatment->keterangan }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="text-center py-32 bg-slate-50/30 rounded-[4rem] border-4 border-dashed border-slate-100">
|
||||
<i class="fas fa-notes-medical text-slate-200 text-5xl mb-4"></i>
|
||||
<p class="text-slate-400 font-black uppercase text-xs tracking-[0.3em]">No Historical Medical Logs Recorded</p>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const ctx = document.getElementById('weightChart');
|
||||
|
||||
{{-- Data diurutkan dari yang terlama ke terbaru untuk Chart --}}
|
||||
const weightHistories = {!! json_encode($cat->weightHistories->sortBy('created_at')->values() ?? []) !!};
|
||||
|
||||
if(!weightHistories || weightHistories.length === 0) {
|
||||
ctx.parentNode.innerHTML = '<div class="h-full flex flex-col items-center justify-center text-slate-300 italic text-xs gap-3"><i class="fas fa-weight-hanging text-4xl opacity-20"></i>No growth data available yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const labels = weightHistories.map(d => {
|
||||
const date = new Date(d.created_at);
|
||||
return date.toLocaleDateString('id-ID', { day: '2-digit', month: 'short' });
|
||||
});
|
||||
const data = weightHistories.map(d => d.berat);
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Weight (Kg)',
|
||||
data: data,
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: (context) => {
|
||||
const chart = context.chart;
|
||||
const {ctx, chartArea} = chart;
|
||||
if (!chartArea) return null;
|
||||
const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
|
||||
gradient.addColorStop(0, 'rgba(16, 185, 129, 0)');
|
||||
gradient.addColorStop(1, 'rgba(16, 185, 129, 0.1)');
|
||||
return gradient;
|
||||
},
|
||||
borderWidth: 5,
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderColor: '#10b981',
|
||||
pointBorderWidth: 3,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
grid: { borderDash: [5, 5], color: '#f1f5f9' },
|
||||
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { font: { size: 10, weight: 'bold' }, color: '#94a3b8' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user