feat: update student import and graduation workflows
This commit is contained in:
@@ -1,43 +1,173 @@
|
||||
<x-master-page :title="'Preview Dokumen ' . $documentLabel" description="Lihat dokumen siswa lulus langsung di browser bila format mendukung.">
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
||||
<x-master-card :title="'Informasi ' . $documentLabel" subtitle="Metadata dokumen siswa lulus.">
|
||||
<div class="space-y-4 text-sm text-slate-600">
|
||||
<div><span class="font-semibold text-slate-800">Nama Siswa:</span> {{ $graduation->full_name }}</div>
|
||||
<div><span class="font-semibold text-slate-800">Jenis Dokumen:</span> {{ $documentLabel }}</div>
|
||||
<div><span class="font-semibold text-slate-800">Nama File:</span> {{ $fileName ?: '-' }}</div>
|
||||
<div><span class="font-semibold text-slate-800">Tipe MIME:</span> {{ $mimeType ?: '-' }}</div>
|
||||
<div><span class="font-semibold text-slate-800">Ukuran:</span> {{ ($documentType === 'skl' ? $graduation->skl_file_size : $graduation->ijazah_file_size) ? number_format((($documentType === 'skl' ? $graduation->skl_file_size : $graduation->ijazah_file_size) / 1024), 1) . ' KB' : '-' }}</div>
|
||||
<div><span class="font-semibold text-slate-800">Tanggal Lulus:</span> {{ $graduation->graduation_date?->format('d-m-Y') ?: '-' }}</div>
|
||||
@if ($graduation->graduation_note)
|
||||
<div class="rounded-2xl bg-slate-50 px-4 py-3 text-xs text-slate-500">
|
||||
<span class="font-semibold text-slate-700">Catatan Kelulusan:</span> {{ $graduation->graduation_note }}
|
||||
</div>
|
||||
@endif
|
||||
<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">Nama Siswa</div>
|
||||
<div class="mt-3 text-lg font-bold text-slate-900">{{ $graduation->full_name }}</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">Format File</div>
|
||||
<div class="mt-3 text-lg font-bold text-sky-800">{{ strtoupper(pathinfo($fileName ?: '', PATHINFO_EXTENSION) ?: 'FILE') }}</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-file-lines text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-3xl border border-emerald-200 bg-gradient-to-br from-white via-emerald-50/50 to-emerald-100/60 p-6 shadow-sm shadow-emerald-100/50 ring-1 ring-white/70">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<div class="text-sm font-medium text-emerald-700">Ukuran File</div>
|
||||
<div class="mt-3 text-lg font-bold text-emerald-800">{{ match($documentType) {
|
||||
'skl' => $graduation->skl_file_size,
|
||||
'ijazah' => $graduation->ijazah_file_size,
|
||||
'transcript' => $graduation->transcript_file_size,
|
||||
'ukk-certificate' => $graduation->ukk_certificate_file_size,
|
||||
'lsp-certificate' => $graduation->lsp_certificate_file_size,
|
||||
default => null,
|
||||
} ? number_format((match($documentType) {
|
||||
'skl' => $graduation->skl_file_size,
|
||||
'ijazah' => $graduation->ijazah_file_size,
|
||||
'transcript' => $graduation->transcript_file_size,
|
||||
'ukk-certificate' => $graduation->ukk_certificate_file_size,
|
||||
'lsp-certificate' => $graduation->lsp_certificate_file_size,
|
||||
default => null,
|
||||
} / 1024), 1) . ' KB' : '-' }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl bg-white/80 p-3 text-emerald-600 ring-1 ring-emerald-100 backdrop-blur-sm">
|
||||
<i class="fa-solid fa-weight-scale 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">Tanggal Lulus</div>
|
||||
<div class="mt-3 text-lg font-bold text-violet-800">{{ $graduation->graduation_date?->format('d M Y') ?: 'Belum diisi' }}</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-calendar-check text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
|
||||
<x-master-card :title="'Informasi ' . $documentLabel" subtitle="Metadata file dan ringkasan arsip kelulusan.">
|
||||
<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-folder-open text-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Metadata Dokumen</div>
|
||||
<div class="mt-1 text-sm font-semibold text-slate-800">Informasi cepat sebelum file dibuka atau diunduh</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 text-sm text-slate-600">
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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 Siswa</span></div>
|
||||
<div class="mt-2 font-semibold text-slate-800">{{ $graduation->full_name }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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-folder-tree"></i><span>Jenis Dokumen</span></div>
|
||||
<div class="mt-2 font-semibold text-slate-800">{{ $documentLabel }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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-file-signature"></i><span>Nama File</span></div>
|
||||
<div class="mt-2 break-words font-semibold text-slate-800">{{ $fileName ?: '-' }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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-code"></i><span>Tipe MIME</span></div>
|
||||
<div class="mt-2 text-slate-700">{{ $mimeType ?: '-' }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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-weight-scale"></i><span>Ukuran File</span></div>
|
||||
<div class="mt-2 text-slate-700">{{ match($documentType) {
|
||||
'skl' => $graduation->skl_file_size,
|
||||
'ijazah' => $graduation->ijazah_file_size,
|
||||
'transcript' => $graduation->transcript_file_size,
|
||||
'ukk-certificate' => $graduation->ukk_certificate_file_size,
|
||||
'lsp-certificate' => $graduation->lsp_certificate_file_size,
|
||||
default => null,
|
||||
} ? number_format((match($documentType) {
|
||||
'skl' => $graduation->skl_file_size,
|
||||
'ijazah' => $graduation->ijazah_file_size,
|
||||
'transcript' => $graduation->transcript_file_size,
|
||||
'ukk-certificate' => $graduation->ukk_certificate_file_size,
|
||||
'lsp-certificate' => $graduation->lsp_certificate_file_size,
|
||||
default => null,
|
||||
} / 1024), 1) . ' KB' : '-' }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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>Tanggal Lulus</span></div>
|
||||
<div class="mt-2 text-slate-700">{{ $graduation->graduation_date?->format('d-m-Y') ?: '-' }}</div>
|
||||
</div>
|
||||
<div class="rounded-2xl border border-slate-200 bg-white px-4 py-3 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-align-left"></i><span>Catatan Kelulusan</span></div>
|
||||
<div class="mt-2 leading-6 text-slate-700">{{ $graduation->graduation_note ?: '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<a href="{{ $fileUrl }}" target="_blank" rel="noopener noreferrer" class="rounded-2xl bg-sky-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-700">Buka File Asli</a>
|
||||
<a href="{{ route('graduated-students.index') }}" class="rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Kembali ke Arsip</a>
|
||||
<a href="{{ $fileUrl }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 rounded-2xl bg-sky-600 px-4 py-3 text-sm font-semibold text-white transition hover:bg-sky-700">
|
||||
<i class="fa-solid fa-up-right-from-square"></i>
|
||||
<span>Buka File Asli</span>
|
||||
</a>
|
||||
<a href="{{ route('graduated-students.show', $graduation) }}" class="inline-flex items-center gap-2 rounded-2xl border border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
|
||||
<i class="fa-solid fa-arrow-left"></i>
|
||||
<span>Kembali ke Detail</span>
|
||||
</a>
|
||||
</div>
|
||||
</x-master-card>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<x-master-card :title="'Tampilan ' . $documentLabel" subtitle="Preview langsung untuk gambar dan PDF.">
|
||||
@if ($isImage)
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 p-4">
|
||||
<img src="{{ $fileUrl }}" alt="{{ $fileName ?: $documentLabel }}" class="mx-auto max-h-[70vh] rounded-xl object-contain shadow-sm">
|
||||
<x-master-card :title="'Tampilan ' . $documentLabel" subtitle="Preview langsung untuk gambar dan PDF.">
|
||||
<div class="mb-4 flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-gradient-to-r from-white via-slate-50 to-sky-50/30 px-4 py-3 shadow-sm ring-1 ring-white/70">
|
||||
<div>
|
||||
<div class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-500">Mode Preview</div>
|
||||
<div class="mt-1 text-sm font-semibold text-slate-800">
|
||||
@if ($isImage)
|
||||
Gambar langsung di browser
|
||||
@elseif ($isPdf)
|
||||
PDF embed di browser
|
||||
@else
|
||||
Preview tidak didukung
|
||||
@endif
|
||||
</div>
|
||||
@elseif ($isPdf)
|
||||
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-slate-50">
|
||||
<iframe src="{{ $fileUrl }}" class="h-[75vh] w-full rounded-2xl" title="Preview {{ $documentLabel }}"></iframe>
|
||||
</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 {{ $isImage ? 'fa-image' : ($isPdf ? 'fa-file-pdf' : 'fa-circle-info') }} text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($isImage)
|
||||
<div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 p-4 shadow-sm ring-1 ring-white/70">
|
||||
<img src="{{ $fileUrl }}" alt="{{ $fileName ?: $documentLabel }}" class="mx-auto max-h-[72vh] rounded-2xl object-contain shadow-sm">
|
||||
</div>
|
||||
@elseif ($isPdf)
|
||||
<div class="overflow-hidden rounded-3xl border border-slate-200 bg-slate-50 shadow-sm ring-1 ring-white/70">
|
||||
<iframe src="{{ $fileUrl }}" class="h-[78vh] w-full rounded-3xl" title="Preview {{ $documentLabel }}"></iframe>
|
||||
</div>
|
||||
@else
|
||||
<div class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-10 text-center shadow-sm ring-1 ring-white/70">
|
||||
<div class="mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-slate-500 shadow-sm ring-1 ring-slate-200">
|
||||
<i class="fa-solid fa-file-circle-question text-xl"></i>
|
||||
</div>
|
||||
@else
|
||||
<div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 p-10 text-center">
|
||||
<div class="text-lg font-semibold text-slate-800">Preview tidak tersedia</div>
|
||||
<p class="mt-2 text-sm text-slate-500">Format file ini belum didukung untuk preview langsung di browser. Silakan gunakan tombol buka file asli.</p>
|
||||
</div>
|
||||
@endif
|
||||
</x-master-card>
|
||||
</div>
|
||||
<div class="mt-4 text-lg font-semibold text-slate-800">Preview tidak tersedia</div>
|
||||
<p class="mt-2 text-sm text-slate-500">Format file ini belum didukung untuk preview langsung di browser. Gunakan tombol buka file asli untuk melihat dokumen.</p>
|
||||
</div>
|
||||
@endif
|
||||
</x-master-card>
|
||||
</div>
|
||||
</x-master-page>
|
||||
|
||||
Reference in New Issue
Block a user