374 lines
28 KiB
PHP
374 lines
28 KiB
PHP
<x-app-layout>
|
|
@php
|
|
$isAdmin = auth()->user()?->isAdmin() ?? false;
|
|
@endphp
|
|
|
|
<x-slot name="header">
|
|
<div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
|
<div>
|
|
<h2 class="text-xl font-semibold leading-tight text-slate-900">
|
|
Dashboard Admin
|
|
</h2>
|
|
<p class="mt-1 text-sm text-slate-500">
|
|
Ringkasan operasional Database Kesiswaan, mulai dari master data, siswa, hingga status kelengkapan dokumen.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="{{ route('students.create') }}" class="inline-flex items-center 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">
|
|
Tambah Siswa
|
|
</a>
|
|
<a href="{{ route('student-promotions.index') }}" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">
|
|
Buka Promosi Siswa
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
|
<div class="overflow-hidden rounded-[2rem] border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-indigo-50 p-6 text-slate-900 shadow-2xl shadow-slate-200/60 xl:col-span-2">
|
|
<div class="flex flex-col gap-8 xl:flex-row xl:items-start xl:justify-between">
|
|
<div class="max-w-2xl">
|
|
<div class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-indigo-700">
|
|
<span class="inline-flex h-2 w-2 rounded-full bg-emerald-300"></span>
|
|
Ringkasan Utama
|
|
</div>
|
|
<h3 class="mt-4 text-3xl font-bold leading-tight text-slate-900">
|
|
Ringkasan utama statistik siswa dalam satu panel.
|
|
</h3>
|
|
<p class="mt-3 max-w-xl text-sm leading-6 text-slate-600">
|
|
Lihat total siswa, siswa keluar, siswa mutasi, dan siswa lulus secara cepat dari dashboard utama.
|
|
</p>
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3 text-xs text-slate-600">
|
|
<div class="rounded-full border border-slate-200 bg-white px-3 py-2 shadow-sm">Ringkasan status siswa</div>
|
|
<div class="rounded-full border border-slate-200 bg-white px-3 py-2 shadow-sm">Arsip keluar & mutasi</div>
|
|
<div class="rounded-full border border-slate-200 bg-white px-3 py-2 shadow-sm">Monitoring lulusan</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="group rounded-3xl border border-indigo-200 bg-gradient-to-br from-white via-indigo-50/40 to-indigo-100/50 p-5 shadow-sm shadow-indigo-100 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-200/60">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Total Siswa</p>
|
|
<div class="mt-3 text-4xl font-bold text-slate-900">{{ $stats['students'] }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-indigo-600 shadow-sm shadow-indigo-100 ring-1 ring-indigo-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-users text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs leading-5 text-slate-500">Jumlah seluruh siswa yang tercatat di sistem saat ini.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-rose-200 bg-gradient-to-br from-white via-rose-50/40 to-rose-100/50 p-5 shadow-sm shadow-rose-100 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-rose-200/60">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-rose-600">Siswa Keluar</p>
|
|
<div class="mt-3 text-4xl font-bold text-slate-900">{{ $stats['studentsDropped'] }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-rose-600 shadow-sm shadow-rose-100 ring-1 ring-rose-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-right-from-bracket text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs leading-5 text-slate-500">Jumlah siswa pada arsip siswa keluar.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-amber-200 bg-gradient-to-br from-white via-amber-50/40 to-amber-100/50 p-5 shadow-sm shadow-amber-100 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200/60">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-amber-600">Siswa Mutasi</p>
|
|
<div class="mt-3 text-4xl font-bold text-slate-900">{{ $stats['studentsTransferred'] }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-amber-600 shadow-sm shadow-amber-100 ring-1 ring-amber-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-right-left text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs leading-5 text-slate-500">Jumlah siswa pada arsip siswa mutasi.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-sky-200 bg-gradient-to-br from-white via-sky-50/40 to-sky-100/50 p-5 shadow-sm shadow-sky-100 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-sky-200/60">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-sky-600">Siswa Lulus</p>
|
|
<div class="mt-3 text-4xl font-bold text-slate-900">{{ $stats['studentsGraduated'] }}</div>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-sky-600 shadow-sm shadow-sky-100 ring-1 ring-sky-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-graduation-cap text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs leading-5 text-slate-500">Jumlah siswa yang sudah berstatus lulus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<x-master-card title="Snapshot Sistem" subtitle="Kondisi data yang paling sering dipakai admin.">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-100 text-cyan-600">
|
|
<i class="fa-solid fa-calendar-days text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Tahun Angkatan</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-900">{{ $stats['academicYears'] }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-blue-100 text-blue-600">
|
|
<i class="fa-solid fa-building-columns text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Program Keahlian</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-900">{{ $stats['departments'] }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
|
|
<i class="fa-solid fa-chalkboard text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Kelas</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-900">{{ $stats['classes'] }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
|
|
<i class="fa-solid fa-folder-tree text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Jenis Dokumen</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-900">{{ $stats['documentTypes'] }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
|
|
<i class="fa-solid fa-trophy text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Data Prestasi</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-slate-900">{{ $stats['studentAchievements'] }}</span>
|
|
</div>
|
|
</div>
|
|
</x-master-card>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-5">
|
|
<div class="group rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-indigo-50/30 p-5 shadow-sm shadow-slate-200/50 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200/70">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-500">Data Siswa</p>
|
|
<h3 class="mt-3 text-3xl font-bold text-slate-900">{{ $stats['students'] }}</h3>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-indigo-600 ring-1 ring-indigo-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-users text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs text-slate-400">Total siswa aktif yang tersimpan di sistem.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-emerald-50/30 p-5 shadow-sm shadow-slate-200/50 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200/70">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-500">Dokumen Wajib Lengkap</p>
|
|
<h3 class="mt-3 text-3xl font-bold text-slate-900">{{ $stats['studentsCompleteDocuments'] }}</h3>
|
|
</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-circle-check text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs text-slate-400">Siswa yang sudah upload seluruh dokumen wajib.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-amber-50/30 p-5 shadow-sm shadow-slate-200/50 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200/70">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-500">Belum Lengkap</p>
|
|
<h3 class="mt-3 text-3xl font-bold text-slate-900">{{ $stats['studentsIncompleteDocuments'] }}</h3>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-amber-600 ring-1 ring-amber-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-triangle-exclamation text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs text-slate-400">Siswa yang masih kurang upload dokumen wajib.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-sky-50/30 p-5 shadow-sm shadow-slate-200/50 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200/70">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-500">Belum Tervalidasi Penuh</p>
|
|
<h3 class="mt-3 text-3xl font-bold text-slate-900">{{ $stats['studentsUnverifiedDocuments'] }}</h3>
|
|
</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-clock text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs text-slate-400">Siswa yang dokumen wajibnya belum valid semua.</p>
|
|
</div>
|
|
|
|
<div class="group rounded-3xl border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-amber-50/30 p-5 shadow-sm shadow-slate-200/50 ring-1 ring-white/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-200/70">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-slate-500">Siswa Berprestasi</p>
|
|
<h3 class="mt-3 text-3xl font-bold text-slate-900">{{ $stats['studentsWithAchievements'] }}</h3>
|
|
</div>
|
|
<div class="rounded-2xl bg-white/80 p-3 text-amber-600 ring-1 ring-amber-100 backdrop-blur-sm">
|
|
<i class="fa-solid fa-trophy text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-xs text-slate-400">Jumlah siswa yang sudah memiliki minimal satu data prestasi.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
|
|
<x-master-card title="Akses Cepat" subtitle="Masuk langsung ke modul yang paling sering dipakai.">
|
|
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-1">
|
|
<a href="{{ route('students.index') }}" class="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-700 transition hover:border-indigo-200 hover:bg-indigo-50 hover:text-indigo-700">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600 transition group-hover:bg-indigo-200">
|
|
<i class="fa-solid fa-users text-sm"></i>
|
|
</span>
|
|
<span>Kelola Data Siswa</span>
|
|
</a>
|
|
@if ($isAdmin)
|
|
<a href="{{ route('classes.index') }}" class="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-700 transition hover:border-cyan-200 hover:bg-cyan-50 hover:text-cyan-700">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-100 text-cyan-600 transition group-hover:bg-cyan-200">
|
|
<i class="fa-solid fa-chalkboard text-sm"></i>
|
|
</span>
|
|
<span>Kelola Kelas & Generate Tahun Baru</span>
|
|
</a>
|
|
<a href="{{ route('document-types.index') }}" class="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-700 transition hover:border-violet-200 hover:bg-violet-50 hover:text-violet-700">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 text-violet-600 transition group-hover:bg-violet-200">
|
|
<i class="fa-solid fa-folder-tree text-sm"></i>
|
|
</span>
|
|
<span>Kelola Jenis Dokumen</span>
|
|
</a>
|
|
@endif
|
|
<a href="{{ route('student-achievements.index') }}" class="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-700 transition hover:border-amber-200 hover:bg-amber-50 hover:text-amber-700">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-amber-600 transition group-hover:bg-amber-200">
|
|
<i class="fa-solid fa-trophy text-sm"></i>
|
|
</span>
|
|
<span>Kelola Siswa Berprestasi</span>
|
|
</a>
|
|
<a href="{{ route('student-promotions.index') }}" class="group flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm font-medium text-slate-700 transition hover:border-lime-200 hover:bg-lime-50 hover:text-lime-700">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-lime-100 text-lime-600 transition group-hover:bg-lime-200">
|
|
<i class="fa-solid fa-arrow-trend-up text-sm"></i>
|
|
</span>
|
|
<span>Buka Modul Promosi Siswa</span>
|
|
</a>
|
|
</div>
|
|
</x-master-card>
|
|
|
|
<x-master-card title="Status Modul" subtitle="Modul yang sudah hidup dan siap dipakai.">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600">
|
|
<i class="fa-solid fa-lock text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Auth & Login</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Aktif</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-cyan-100 text-cyan-600">
|
|
<i class="fa-solid fa-database text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Master Data</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Aktif</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
|
|
<i class="fa-solid fa-users text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Data Siswa</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Aktif</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-violet-100 text-violet-600">
|
|
<i class="fa-solid fa-folder-check text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Dokumen & Verifikasi</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Aktif</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-sky-100 text-sky-600">
|
|
<i class="fa-solid fa-clock-rotate-left text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Histori Akademik</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700"><span class="h-2 w-2 rounded-full bg-sky-500"></span>Siap</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-lime-100 text-lime-600">
|
|
<i class="fa-solid fa-arrow-trend-up text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Promosi Siswa</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700"><span class="h-2 w-2 rounded-full bg-sky-500"></span>Siap</span>
|
|
</div>
|
|
<div class="flex items-center justify-between rounded-2xl bg-slate-50 px-4 py-3 transition hover:bg-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
|
|
<i class="fa-solid fa-trophy text-sm"></i>
|
|
</span>
|
|
<span class="text-sm text-slate-600">Siswa Berprestasi</span>
|
|
</div>
|
|
<span class="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700"><span class="h-2 w-2 rounded-full bg-sky-500"></span>Siap</span>
|
|
</div>
|
|
</div>
|
|
</x-master-card>
|
|
|
|
<x-master-card title="Rekap Data Siswa" subtitle="Ringkasan jumlah siswa pria dan perempuan per tahun angkatan.">
|
|
<div class="space-y-4 text-sm text-slate-600">
|
|
@forelse ($studentGenderByAcademicYear as $item)
|
|
<div class="rounded-3xl border border-slate-200 bg-slate-50/80 px-4 py-4 shadow-sm transition hover:border-slate-300 hover:bg-white">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600">
|
|
<i class="fa-solid fa-calendar-days text-sm"></i>
|
|
</span>
|
|
<div>
|
|
<div class="font-semibold text-slate-800">{{ $item['name'] }}</div>
|
|
<div class="text-xs text-slate-400">Distribusi siswa per gender</div>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white">Total {{ $item['total'] }}</div>
|
|
</div>
|
|
<div class="mt-4 grid grid-cols-2 gap-3">
|
|
<div class="rounded-2xl border border-sky-100 bg-white px-4 py-3 shadow-sm">
|
|
<div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-sky-500">
|
|
<i class="fa-solid fa-mars text-[11px]"></i>
|
|
<span>Laki-laki</span>
|
|
</div>
|
|
<div class="mt-2 text-2xl font-bold text-slate-900">{{ $item['male'] }}</div>
|
|
</div>
|
|
<div class="rounded-2xl border border-rose-100 bg-white px-4 py-3 shadow-sm">
|
|
<div class="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-rose-500">
|
|
<i class="fa-solid fa-venus text-[11px]"></i>
|
|
<span>Perempuan</span>
|
|
</div>
|
|
<div class="mt-2 text-2xl font-bold text-slate-900">{{ $item['female'] }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="rounded-2xl bg-slate-50 px-4 py-4 text-sm text-slate-500">
|
|
Belum ada data siswa yang bisa direkap per tahun angkatan.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</x-master-card>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|