276 lines
23 KiB
PHP
276 lines
23 KiB
PHP
<x-master-page title="Detail Arsip Siswa Lulus" description="Lihat ringkasan arsip lulusan dan kelola dokumen kelulusan tanpa bercampur dengan siswa aktif.">
|
|
@php
|
|
$documentGroups = [
|
|
[
|
|
'title' => 'Dokumen Akademik Utama',
|
|
'badge' => 'Akademik',
|
|
'badgeClass' => 'bg-sky-100 text-sky-700',
|
|
'items' => [
|
|
['label' => 'SKL', 'path' => 'skl_file_path', 'name' => 'skl_file_name', 'route' => 'skl', 'icon' => 'fa-solid fa-file-lines'],
|
|
['label' => 'Ijazah', 'path' => 'ijazah_file_path', 'name' => 'ijazah_file_name', 'route' => 'ijazah', 'icon' => 'fa-solid fa-graduation-cap'],
|
|
['label' => 'Transkrip Nilai', 'path' => 'transcript_file_path', 'name' => 'transcript_file_name', 'route' => 'transcript', 'icon' => 'fa-solid fa-table-list'],
|
|
],
|
|
],
|
|
[
|
|
'title' => 'Dokumen Sertifikasi',
|
|
'badge' => 'Sertifikasi',
|
|
'badgeClass' => 'bg-violet-100 text-violet-700',
|
|
'items' => [
|
|
['label' => 'Sertifikat UKK', 'path' => 'ukk_certificate_file_path', 'name' => 'ukk_certificate_file_name', 'route' => 'ukk-certificate', 'icon' => 'fa-solid fa-award'],
|
|
['label' => 'Sertifikat LSP', 'path' => 'lsp_certificate_file_path', 'name' => 'lsp_certificate_file_name', 'route' => 'lsp-certificate', 'icon' => 'fa-solid fa-certificate'],
|
|
],
|
|
],
|
|
];
|
|
|
|
$allDocuments = collect($documentGroups)->flatMap(fn ($group) => $group['items']);
|
|
$availableDocuments = $allDocuments->filter(fn ($item) => filled($graduation->{$item['path']}))->count();
|
|
$totalDocuments = $allDocuments->count();
|
|
$missingDocuments = max($totalDocuments - $availableDocuments, 0);
|
|
@endphp
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-sky-50/40 p-6 shadow-sm shadow-slate-200/50 ring-1 ring-white/70">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-medium text-slate-500">Status Arsip</div>
|
|
<div class="mt-3 text-lg font-bold text-slate-900">Siswa Lulus</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-sky-600 ring-1 ring-sky-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-user-graduate text-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-3xl border border-sky-200 bg-gradient-to-br from-white via-sky-50/50 to-sky-100/60 p-6 shadow-sm shadow-sky-100/50 ring-1 ring-white/70">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-medium text-sky-700">Tanggal Lulus</div>
|
|
<div class="mt-3 text-lg font-bold text-sky-800">{{ $graduation->graduation_date?->format('d M Y') ?: 'Belum diisi' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-sky-600 ring-1 ring-sky-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-calendar-check text-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-3xl border {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'border-emerald-200 bg-gradient-to-br from-white via-emerald-50/50 to-emerald-100/60' : 'border-amber-200 bg-gradient-to-br from-white via-amber-50/50 to-amber-100/60' }} p-6 shadow-sm {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'shadow-emerald-100/50' : 'shadow-amber-100/50' }} ring-1 ring-white/70">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-medium {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'text-emerald-700' : 'text-amber-700' }}">Kelengkapan Dokumen</div>
|
|
<div class="mt-3 text-lg font-bold {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'text-emerald-800' : 'text-amber-800' }}">{{ $availableDocuments }}/{{ $totalDocuments }} tersedia</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'text-emerald-600 ring-1 ring-emerald-100' : 'text-amber-600 ring-1 ring-amber-100' }} backdrop-blur-sm">
|
|
<i class="fa-solid {{ $availableDocuments === $totalDocuments && $totalDocuments > 0 ? 'fa-file-circle-check' : 'fa-file-circle-exclamation' }} text-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-3xl border border-violet-200 bg-gradient-to-br from-white via-violet-50/50 to-violet-100/60 p-6 shadow-sm shadow-violet-100/50 ring-1 ring-white/70">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-medium text-violet-700">Kelas Terakhir</div>
|
|
<div class="mt-3 text-lg font-bold text-violet-800">{{ $graduation->classRoom?->name ?: '-' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-violet-600 ring-1 ring-violet-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-school text-lg"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 xl:grid-cols-[1.05fr_0.95fr]">
|
|
<div class="space-y-6">
|
|
<x-master-card title="Identitas Siswa" subtitle="Snapshot data terakhir saat siswa dipindahkan ke arsip lulusan.">
|
|
<div class="mb-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-sky-100 text-sky-600">
|
|
<i class="fa-solid fa-id-card text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Snapshot Identitas</div>
|
|
<div class="mt-1 text-sm font-semibold text-slate-800">Identitas dasar siswa saat masuk arsip lulusan</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-user"></i><span>Nama Lengkap</span></div>
|
|
<div class="mt-2 text-sm font-semibold text-slate-900">{{ $graduation->full_name }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-badge-check"></i><span>Status Arsip</span></div>
|
|
<div class="mt-2"><span class="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700"><i class="fa-solid fa-user-graduate"></i><span>Siswa Lulus</span></span></div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-hashtag"></i><span>NIS</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->student_number ?: '-' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-fingerprint"></i><span>NISN</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->nisn ?: '-' }}</div>
|
|
</div>
|
|
</div>
|
|
</x-master-card>
|
|
|
|
<x-master-card title="Akademik Terakhir" subtitle="Data akademik terakhir sebelum siswa dinyatakan lulus.">
|
|
<div class="mb-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-100 text-amber-600">
|
|
<i class="fa-solid fa-graduation-cap text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Posisi Akademik Terakhir</div>
|
|
<div class="mt-1 text-sm font-semibold text-slate-800">Rombel dan relasi akademik sebelum siswa lulus dari sekolah</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-calendar-days"></i><span>Tahun Angkatan</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->academicYear?->name ?: '-' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-sitemap"></i><span>Program Keahlian</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->department?->name ?: '-' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-school"></i><span>Kelas Terakhir</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->classRoom?->name ?: '-' }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-500"><i class="fa-solid fa-door-open"></i><span>Tanggal Masuk</span></div>
|
|
<div class="mt-2 text-sm text-slate-700">{{ $graduation->entry_date?->format('d-m-Y') ?: '-' }}</div>
|
|
</div>
|
|
</div>
|
|
</x-master-card>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<x-master-card title="Dokumen Kelulusan" subtitle="Ringkasan status dokumen lulusan yang sudah tersimpan di arsip.">
|
|
<div class="mb-4 rounded-2xl border {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'border-emerald-200 bg-gradient-to-r from-emerald-50 to-white' : 'border-amber-200 bg-gradient-to-r from-amber-50 to-white' }} px-4 py-4 shadow-sm {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'shadow-emerald-100/40' : 'shadow-amber-100/40' }}">
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-white {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'text-emerald-600 ring-1 ring-emerald-100' : 'text-amber-600 ring-1 ring-amber-100' }} shadow-sm">
|
|
<i class="fa-solid {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'fa-folder-open' : 'fa-triangle-exclamation' }}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-semibold {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'text-emerald-700' : 'text-amber-700' }}">
|
|
{{ $missingDocuments === 0 && $totalDocuments > 0 ? 'Dokumen kelulusan sudah lengkap' : 'Masih ada dokumen yang perlu dilengkapi' }}
|
|
</div>
|
|
<div class="mt-1 text-xs {{ $missingDocuments === 0 && $totalDocuments > 0 ? 'text-emerald-600' : 'text-amber-600' }}">
|
|
{{ $availableDocuments }} dari {{ $totalDocuments }} dokumen tersedia{{ $missingDocuments > 0 ? ', sisa ' . $missingDocuments . ' dokumen belum ada.' : '.' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
|
|
@foreach ($documentGroups as $group)
|
|
<div class="rounded-3xl border border-slate-200 bg-slate-50/70 p-4">
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-semibold text-slate-800">{{ $group['title'] }}</div>
|
|
<div class="text-xs text-slate-500">Status arsip dokumen pada kategori ini.</div>
|
|
</div>
|
|
<span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ $group['badgeClass'] }}">{{ $group['badge'] }}</span>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-3">
|
|
@foreach ($group['items'] as $item)
|
|
@php
|
|
$hasFile = filled($graduation->{$item['path']});
|
|
@endphp
|
|
<div class="rounded-2xl border {{ $hasFile ? 'border-emerald-200 bg-emerald-50 shadow-sm shadow-emerald-50' : 'border-amber-200 bg-amber-50' }} px-4 py-4 transition hover:-translate-y-0.5">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="inline-flex items-center gap-2 text-sm font-semibold {{ $hasFile ? 'text-emerald-700' : 'text-amber-700' }}"><i class="{{ $item['icon'] }} w-4 text-center"></i><span>{{ $item['label'] }} {{ $hasFile ? 'sudah tersedia' : 'belum diupload' }}</span></div>
|
|
@if ($graduation->{$item['name']})
|
|
<div class="mt-1 break-all text-xs {{ $hasFile ? 'text-emerald-600' : 'text-amber-600' }}">{{ $graduation->{$item['name']} }}</div>
|
|
@endif
|
|
</div>
|
|
@if ($hasFile)
|
|
<a href="{{ route('graduated-students.preview-document', [$graduation, $item['route']]) }}" class="inline-flex items-center gap-2 rounded-xl border border-sky-200 bg-sky-50 px-3 py-2 text-xs font-semibold text-sky-700 transition hover:bg-sky-100">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<span>Preview</span>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-master-card>
|
|
|
|
<x-master-card title="Form Update Arsip Kelulusan" subtitle="Kelola tanggal lulus, catatan, dan upload dokumen dalam panel terpisah agar layout lebih proporsional.">
|
|
<form method="POST" action="{{ route('graduated-students.update', $graduation) }}" enctype="multipart/form-data" class="space-y-5">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-sky-50/20 p-4 shadow-sm ring-1 ring-white/70">
|
|
<div class="grid grid-cols-1 gap-4">
|
|
<x-form-input name="graduation_date" label="Tanggal Lulus" type="date" :value="optional($graduation->graduation_date)->format('Y-m-d')" />
|
|
<x-form-textarea name="graduation_note" label="Catatan Kelulusan" :value="$graduation->graduation_note" rows="4" placeholder="Masukkan catatan tambahan bila perlu" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-5 xl:grid-cols-2">
|
|
<div class="rounded-3xl border border-slate-200 bg-slate-50/70 p-4">
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-semibold text-slate-800">Upload Dokumen Akademik</div>
|
|
<div class="text-xs text-slate-500">Untuk arsip kelulusan inti dan dokumen nilai.</div>
|
|
</div>
|
|
<span class="inline-flex rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700 shadow-sm">Akademik</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="skl_file" class="mb-2 block text-sm font-medium text-slate-700">Upload / Ganti SKL</label>
|
|
<input id="skl_file" name="skl_file" type="file" accept=".pdf,.jpg,.jpeg,.png" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG. Maksimal 4 MB.</p>
|
|
<x-input-error :messages="$errors->get('skl_file')" class="mt-2" />
|
|
</div>
|
|
<div>
|
|
<label for="ijazah_file" class="mb-2 block text-sm font-medium text-slate-700">Upload / Ganti Ijazah</label>
|
|
<input id="ijazah_file" name="ijazah_file" type="file" accept=".pdf,.jpg,.jpeg,.png" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG. Maksimal 4 MB.</p>
|
|
<x-input-error :messages="$errors->get('ijazah_file')" class="mt-2" />
|
|
</div>
|
|
<div>
|
|
<label for="transcript_file" class="mb-2 block text-sm font-medium text-slate-700">Upload / Ganti Transkrip Nilai</label>
|
|
<input id="transcript_file" name="transcript_file" type="file" accept=".pdf,.jpg,.jpeg,.png" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG. Maksimal 4 MB.</p>
|
|
<x-input-error :messages="$errors->get('transcript_file')" class="mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-3xl border border-slate-200 bg-slate-50/70 p-4">
|
|
<div class="mb-3 flex items-center justify-between gap-3">
|
|
<div>
|
|
<div class="text-sm font-semibold text-slate-800">Upload Dokumen Sertifikasi</div>
|
|
<div class="text-xs text-slate-500">Untuk bukti kompetensi dan sertifikasi lulusan.</div>
|
|
</div>
|
|
<span class="inline-flex rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700 shadow-sm">Sertifikasi</span>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="ukk_certificate_file" class="mb-2 block text-sm font-medium text-slate-700">Upload / Ganti Sertifikat UKK</label>
|
|
<input id="ukk_certificate_file" name="ukk_certificate_file" type="file" accept=".pdf,.jpg,.jpeg,.png" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG. Maksimal 4 MB.</p>
|
|
<x-input-error :messages="$errors->get('ukk_certificate_file')" class="mt-2" />
|
|
</div>
|
|
<div>
|
|
<label for="lsp_certificate_file" class="mb-2 block text-sm font-medium text-slate-700">Upload / Ganti Sertifikat LSP</label>
|
|
<input id="lsp_certificate_file" name="lsp_certificate_file" type="file" accept=".pdf,.jpg,.jpeg,.png" class="block w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200">
|
|
<p class="mt-2 text-xs text-slate-500">Format: PDF, JPG, JPEG, PNG. Maksimal 4 MB.</p>
|
|
<x-input-error :messages="$errors->get('lsp_certificate_file')" class="mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-indigo-200 transition hover:bg-indigo-700">
|
|
<i class="fa-solid fa-floppy-disk"></i>
|
|
<span>Simpan Arsip Kelulusan</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</x-master-card>
|
|
</div>
|
|
</div>
|
|
</x-master-page>
|