feat: penanganan pelanggaran (handling system)
- Migration: handling_status, handled_at, handled_by ke violations - Migration: tabel violation_handlings, handling_participants - Model: ViolationHandling, HandlingParticipant + relasi - Routes: storeHandling, resolveHandling, destroyHandling, calendar data - ViolationController: CRUD penanganan + filter status handling - DashboardController: data handling stats + calendar endpoint - Dashboard view: kalender pelanggaran interaktif (Alpine.js) - Violations index: filter status penanganan + kolom status - Violations show: stat card penanganan + timeline + modal tambah - Menambahkan handling_status filter di index
This commit is contained in:
Bro
@@ -5,15 +5,16 @@
|
||||
@section('content')
|
||||
<div>
|
||||
{{-- Header --}}
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Data Siswa</h1>
|
||||
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">Data Siswa</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Daftar siswa aktif — sinkron dari Database Kesiswaan</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<span class="text-gray-500">{{ $students->total() }} siswa</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-500 font-medium">{{ $students->total() }} siswa</span>
|
||||
@if(request()->anyFilled(['search','class_level','class_name','department']))
|
||||
<span class="inline-flex items-center px-2.5 py-1 text-xs font-medium bg-blue-100 text-red-700 rounded-full">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full">
|
||||
<i class="fa-solid fa-filter text-xs"></i>
|
||||
{{ $students->total() }} ditemukan
|
||||
</span>
|
||||
@endif
|
||||
@@ -21,28 +22,23 @@
|
||||
</div>
|
||||
|
||||
{{-- Filter Card --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
|
||||
<form method="GET">
|
||||
<div class="p-5 space-y-4">
|
||||
{{-- Baris 1: Search --}}
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1.5">Pencarian</label>
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="Cari NISN, NIS, atau Nama siswa..."
|
||||
class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
{{-- Search --}}
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="Cari NISN, NIS, atau Nama siswa..."
|
||||
class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
|
||||
{{-- Baris 2: Dropdown --}}
|
||||
{{-- Dropdowns --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1.5">Tingkat Kelas</label>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Tingkat Kelas</label>
|
||||
<select name="class_level"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition bg-white">
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">Semua Tingkat</option>
|
||||
@foreach($classLevels as $level)
|
||||
<option value="{{ $level }}" @selected(request('class_level') == $level)>Kelas {{ $level }}</option>
|
||||
@@ -50,9 +46,9 @@
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1.5">Kelas</label>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Kelas</label>
|
||||
<select name="class_name"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition bg-white">
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">Semua Kelas</option>
|
||||
@foreach($classNames as $cn)
|
||||
<option value="{{ $cn }}" @selected(request('class_name') == $cn)>{{ $cn }}</option>
|
||||
@@ -60,30 +56,26 @@
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500 mb-1.5">Jurusan</label>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5">Jurusan</label>
|
||||
<select name="department"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition bg-white">
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">Semua Jurusan</option>
|
||||
@foreach($departments as $code => $name)
|
||||
<option value="{{ $code }}" @selected(request('department') == $code)>{{ $name }} ({{ $code }})</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-end space-x-2">
|
||||
<div class="flex items-end gap-2">
|
||||
<button type="submit"
|
||||
class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm flex items-center justify-center space-x-1.5">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<span>Cari</span>
|
||||
class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm inline-flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-magnifying-glass text-xs"></i>
|
||||
Cari
|
||||
</button>
|
||||
@if(request()->anyFilled(['search','class_level','class_name','department']))
|
||||
<a href="{{ route('students.index') }}"
|
||||
class="px-4 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition flex items-center space-x-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
<span>Reset</span>
|
||||
class="px-4 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition inline-flex items-center gap-1.5">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
Reset
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
@@ -93,64 +85,92 @@
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">NISN</th>
|
||||
<th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nama</th>
|
||||
<th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Kelas</th>
|
||||
<th class="px-4 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Jurusan</th>
|
||||
<th class="px-4 py-3.5 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Pelanggaran</th>
|
||||
<th class="px-4 py-3.5 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Total Poin</th>
|
||||
<th class="px-4 py-3.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Aksi</th>
|
||||
<table class="min-w-full divide-y divide-gray-100">
|
||||
<thead>
|
||||
<tr class="bg-gray-50/80">
|
||||
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Siswa</th>
|
||||
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">NISN</th>
|
||||
<th class="px-5 py-3.5 text-left hidden sm:table-cell text-xs font-semibold text-gray-400 uppercase tracking-wider">Kelas</th>
|
||||
<th class="px-5 py-3.5 text-left hidden lg:table-cell text-xs font-semibold text-gray-400 uppercase tracking-wider">Jurusan</th>
|
||||
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Pelanggaran</th>
|
||||
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Total Poin</th>
|
||||
<th class="px-5 py-3.5 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tbody class="divide-y divide-gray-50">
|
||||
@forelse($students as $s)
|
||||
@php $pts = $s->total_points; @endphp
|
||||
<tr class="hover:bg-gray-50 transition">
|
||||
<td class="px-4 py-3.5 whitespace-nowrap text-sm font-mono text-gray-700">{{ $s->nisn }}</td>
|
||||
<td class="px-4 py-3.5">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $s->full_name }}</div>
|
||||
<tr class="hover:bg-gray-50/50 transition">
|
||||
{{-- Siswa --}}
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-sm font-bold shadow-sm flex-shrink-0">
|
||||
{{ strtoupper(substr($s->full_name, 0, 1)) }}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900 truncate max-w-[200px]">{{ $s->full_name }}</p>
|
||||
<div class="flex flex-wrap items-center gap-1 mt-0.5">
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 text-[10px] font-mono font-medium bg-gray-100 text-gray-500 rounded-md">{{ $s->nisn ?? '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3.5 whitespace-nowrap text-sm text-gray-700">{{ $s->class_name ?? '-' }}</td>
|
||||
<td class="px-4 py-3.5 text-sm text-gray-500">{{ $s->department_code ?? '-' }}</td>
|
||||
<td class="px-4 py-3.5 text-center text-sm text-gray-700">
|
||||
<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-600">
|
||||
{{-- NISN --}}
|
||||
<td class="px-5 py-4 whitespace-nowrap">
|
||||
<span class="text-sm font-mono text-gray-700">{{ $s->nisn ?? '—' }}</span>
|
||||
</td>
|
||||
{{-- Kelas --}}
|
||||
<td class="px-5 py-4 whitespace-nowrap hidden sm:table-cell">
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium bg-blue-50 text-blue-700 rounded-full border border-blue-200">
|
||||
<i class="fa-solid fa-building text-[10px]"></i>
|
||||
{{ $s->class_name ?? '—' }}
|
||||
</span>
|
||||
</td>
|
||||
{{-- Jurusan --}}
|
||||
<td class="px-5 py-4 hidden lg:table-cell">
|
||||
<span class="text-sm text-gray-500">{{ $s->department_code ?? '—' }}</span>
|
||||
</td>
|
||||
{{-- Pelanggaran --}}
|
||||
<td class="px-5 py-4 text-center whitespace-nowrap">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full
|
||||
{{ ($s->violations_count ?? 0) > 0 ? 'bg-orange-50 text-orange-700 border border-orange-200' : 'bg-gray-50 text-gray-400 border border-gray-200' }}">
|
||||
<i class="fa-solid {{ ($s->violations_count ?? 0) > 0 ? 'fa-exclamation' : 'fa-check' }} text-[10px]"></i>
|
||||
{{ $s->violations_count ?? 0 }}x
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3.5 text-center">
|
||||
{{-- Total Poin --}}
|
||||
<td class="px-5 py-4 text-center whitespace-nowrap">
|
||||
@if($pts >= 100)
|
||||
<span class="inline-flex px-3 py-1 text-xs font-bold rounded-full bg-blue-100 text-blue-800">{{ $pts }}</span>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1 text-xs font-bold bg-red-50 text-red-700 rounded-full">{{ $pts }}</span>
|
||||
@elseif($pts >= 50)
|
||||
<span class="inline-flex px-3 py-1 text-xs font-bold rounded-full bg-yellow-100 text-yellow-800">{{ $pts }}</span>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1 text-xs font-bold bg-yellow-50 text-yellow-700 rounded-full">{{ $pts }}</span>
|
||||
@elseif($pts > 0)
|
||||
<span class="inline-flex px-3 py-1 text-xs font-bold rounded-full bg-orange-100 text-orange-700">{{ $pts }}</span>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1 text-xs font-bold bg-orange-50 text-orange-600 rounded-full">{{ $pts }}</span>
|
||||
@else
|
||||
<span class="inline-flex px-3 py-1 text-xs rounded-full bg-green-100 text-green-700">0</span>
|
||||
<span class="inline-flex items-center gap-1 px-3 py-1 text-xs bg-green-50 text-green-600 rounded-full">0</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-4 py-3.5 text-right">
|
||||
{{-- Aksi --}}
|
||||
<td class="px-5 py-4 text-right whitespace-nowrap">
|
||||
<a href="{{ route('students.show', $s->id) }}"
|
||||
class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-600 bg-red-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
class="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
Detail
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-4 py-16 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zM6 10h.01M18 10h.01"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-500 mb-1">Tidak ada siswa ditemukan</p>
|
||||
<p class="text-xs text-gray-400">Coba ubah filter pencarian atau lakukan sinkronisasi data</p>
|
||||
<td colspan="7" class="px-5 py-20 text-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-14 h-14 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center mb-4">
|
||||
<i class="fa-solid fa-users-slash text-gray-300 text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-gray-500 mb-1">Tidak ada siswa ditemukan</p>
|
||||
<p class="text-xs text-gray-400">Coba ubah filter atau lakukan sinkronisasi data</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
@@ -158,13 +178,15 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- Pagination --}}
|
||||
@if($students->hasPages())
|
||||
<div class="px-4 py-3 border-t border-gray-100 bg-gray-50">
|
||||
<div class="px-5 py-3 border-t border-gray-100 bg-gray-50/50">
|
||||
{{ $students->appends(request()->query())->links() }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="px-4 py-3 border-t border-gray-100 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
|
||||
{{-- Summary --}}
|
||||
<div class="px-5 py-3 border-t border-gray-100 bg-gray-50/50 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Menampilkan {{ $students->firstItem() ?? 0 }}–{{ $students->lastItem() ?? 0 }} dari {{ $students->total() }} siswa</span>
|
||||
<span class="font-medium">{{ $students->total() }} total</span>
|
||||
</div>
|
||||
|
||||
@@ -7,26 +7,15 @@
|
||||
.violation-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 8px;
|
||||
bottom: 8px;
|
||||
left: 23px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 2px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.sp-progress-bar {
|
||||
background: linear-gradient(90deg, #dbeafe 0%, #93c5fd 40%, #60a5fa 70%, #3b82f6 100%);
|
||||
}
|
||||
.perspective-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.perspective-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.glass-stat {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -35,28 +24,25 @@
|
||||
{{-- Header --}}
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<nav class="flex items-center space-x-2 text-sm text-gray-400 mb-2">
|
||||
<nav class="flex items-center gap-1.5 text-sm text-gray-400 mb-1">
|
||||
<a href="{{ route('students.index') }}" class="hover:text-gray-600 transition">Data Siswa</a>
|
||||
<span>/</span>
|
||||
<span class="text-gray-300">/</span>
|
||||
<span class="text-gray-700 font-medium truncate max-w-[200px]">{{ $student->full_name }}</span>
|
||||
</nav>
|
||||
<h1 class="text-2xl font-bold text-gray-900 tracking-tight">Profil Siswa</h1>
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Profil Siswa</h1>
|
||||
</div>
|
||||
<a href="{{ route('students.index') }}"
|
||||
class="inline-flex items-center px-4 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-gray-300 transition-all shadow-sm">
|
||||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
class="inline-flex items-center gap-1.5 px-3.5 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 hover:border-gray-300 transition shadow-sm">
|
||||
<i class="fa-solid fa-arrow-left text-xs"></i>
|
||||
Kembali
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- ===== HERO CARD ===== --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6 perspective-card">
|
||||
<div class="bg-gradient-to-r from-blue-500 via-blue-400 to-sky-300 h-28 sm:h-36"></div>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="bg-gradient-to-r from-blue-500 via-blue-400 to-sky-300 h-24 sm:h-32"></div>
|
||||
<div class="relative px-6 pb-6">
|
||||
{{-- Avatar --}}
|
||||
<div class="flex flex-col sm:flex-row sm:items-end -mt-14 sm:-mt-20 mb-4 gap-4">
|
||||
<div class="flex flex-col sm:flex-row sm:items-end -mt-12 sm:-mt-16 mb-5 gap-4">
|
||||
<div class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl bg-white shadow-lg border-2 border-white flex items-center justify-center flex-shrink-0">
|
||||
@if($student->photo_path)
|
||||
<img src="{{ Storage::url($student->photo_path) }}" alt="{{ $student->full_name }}"
|
||||
@@ -66,20 +52,20 @@
|
||||
@endif
|
||||
</div>
|
||||
<div class="flex-1 min-w-0 pt-5 sm:pt-0">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 truncate leading-tight tracking-tight">{{ $student->full_name }}</h2>
|
||||
<h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate leading-tight tracking-tight">{{ $student->full_name }}</h2>
|
||||
<div class="flex flex-wrap items-center gap-2 mt-3">
|
||||
<span class="inline-flex items-center gap-2 px-3.5 py-1.5 text-sm font-mono font-semibold bg-gray-50 text-blue-700 border border-blue-200 rounded-xl">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0"/></svg>
|
||||
<span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-mono font-semibold bg-gray-100 text-blue-700 rounded-full border border-blue-200">
|
||||
<i class="fa-solid fa-id-card text-blue-400"></i>
|
||||
{{ $student->nisn ?? '—' }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-2 px-3.5 py-1.5 text-sm font-medium bg-blue-50 text-blue-700 border border-blue-200 rounded-xl">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
||||
<span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium bg-emerald-50 text-emerald-700 rounded-full border border-emerald-200">
|
||||
<i class="fa-solid fa-building text-emerald-400"></i>
|
||||
{{ $student->class_name ?? '—' }}
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-2 px-3.5 py-1.5 text-sm font-medium bg-blue-50 text-blue-700 border border-blue-200 rounded-xl">
|
||||
<svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
||||
<span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium bg-purple-50 text-purple-700 rounded-full border border-purple-200">
|
||||
<i class="fa-solid fa-graduation-cap text-purple-400"></i>
|
||||
{{ $student->department_name ?? $student->department_code ?? '—' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -105,37 +91,41 @@
|
||||
@if($currentSpLevel)
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold mb-4"
|
||||
style="background-color: {{ $currentSpLevel->color }}15; color: {{ $currentSpLevel->color }}; border: 1px solid {{ $currentSpLevel->color }}30;">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
{{ $currentSpLevel->name }} — {{ $currentSpLevel->min_points }}+ poin
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Quick Stats --}}
|
||||
{{-- Gradient Stat Cards --}}
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div class="glass-stat rounded-xl border border-gray-100 p-4 text-center">
|
||||
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Total Poin</p>
|
||||
<p class="text-2xl font-bold {{ $totalPoints >= 100 ? 'text-blue-600' : ($totalPoints >= 50 ? 'text-blue-500' : ($totalPoints > 0 ? 'text-blue-400' : 'text-gray-400')) }}">
|
||||
{{ $totalPoints }}
|
||||
</p>
|
||||
<div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 p-4 shadow-sm">
|
||||
<div class="absolute right-0 top-0 w-12 h-12 opacity-15">
|
||||
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<p class="text-[10px] font-semibold text-white/70 uppercase tracking-wider">Total Poin</p>
|
||||
<p class="text-xl font-bold text-white mt-1">{{ $totalPoints }}</p>
|
||||
</div>
|
||||
<div class="glass-stat rounded-xl border border-gray-100 p-4 text-center">
|
||||
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Pelanggaran</p>
|
||||
<p class="text-2xl font-bold text-gray-800">{{ $violationCount }}<span class="text-sm font-medium text-gray-400">x</span></p>
|
||||
<div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-500 to-red-600 p-4 shadow-sm">
|
||||
<div class="absolute right-0 top-0 w-12 h-12 opacity-15">
|
||||
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<p class="text-[10px] font-semibold text-white/70 uppercase tracking-wider">Pelanggaran</p>
|
||||
<p class="text-xl font-bold text-white mt-1">{{ $violationCount }}<span class="text-sm font-medium text-white/60">x</span></p>
|
||||
</div>
|
||||
<div class="glass-stat rounded-xl border border-gray-100 p-4 text-center">
|
||||
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">SP Terbit</p>
|
||||
<p class="text-2xl font-bold {{ $activeSpLetters > 0 ? 'text-blue-600' : 'text-gray-400' }}">{{ $activeSpLetters }}</p>
|
||||
<div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-violet-500 to-violet-700 p-4 shadow-sm">
|
||||
<div class="absolute right-0 top-0 w-12 h-12 opacity-15">
|
||||
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||
</div>
|
||||
<p class="text-[10px] font-semibold text-white/70 uppercase tracking-wider">SP Terbit</p>
|
||||
<p class="text-xl font-bold text-white mt-1">{{ $activeSpLetters }}</p>
|
||||
</div>
|
||||
<div class="glass-stat rounded-xl border border-gray-100 p-4 text-center">
|
||||
<p class="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Terakhir</p>
|
||||
<p class="text-sm font-semibold text-gray-700 mt-1">
|
||||
@if($lastViolation)
|
||||
{{ $lastViolation->violation_date->diffForHumans() }}
|
||||
@else
|
||||
—
|
||||
@endif
|
||||
<div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-teal-500 to-teal-700 p-4 shadow-sm">
|
||||
<div class="absolute right-0 top-0 w-12 h-12 opacity-15">
|
||||
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
<p class="text-[10px] font-semibold text-white/70 uppercase tracking-wider">Terakhir</p>
|
||||
<p class="text-sm font-bold text-white mt-1">
|
||||
@if($lastViolation) {{ $lastViolation->violation_date->diffForHumans() }} @else — @endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,70 +134,56 @@
|
||||
|
||||
{{-- ===== SP PROGRESS ===== --}}
|
||||
@if($spThresholds->count() > 0)
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-6 perspective-card">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h3 class="text-base font-semibold text-gray-900">Progress Ambang Surat Peringatan</h3>
|
||||
<span class="text-xs text-gray-400">{{ $totalPoints }} / {{ $nextSpThreshold ? $nextSpThreshold->min_points : $spThresholds->last()->min_points }} poin</span>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-chart-line text-blue-500 text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900">Progress Ambang SP</h3>
|
||||
<p class="text-xs text-gray-400">{{ $totalPoints }} / {{ $nextSpThreshold ? $nextSpThreshold->min_points : $spThresholds->last()->min_points }} poin</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Progress Bar --}}
|
||||
@php
|
||||
$maxPoints = $nextSpThreshold ? $nextSpThreshold->min_points : $spThresholds->last()->min_points;
|
||||
if ($totalPoints >= $spThresholds->last()->min_points) {
|
||||
$progressPercent = 100;
|
||||
} else {
|
||||
$progressPercent = min(100, ($totalPoints / $maxPoints) * 100);
|
||||
}
|
||||
$progressPercent = $totalPoints >= $spThresholds->last()->min_points ? 100 : min(100, ($totalPoints / $maxPoints) * 100);
|
||||
@endphp
|
||||
<div class="relative h-3 bg-gray-100 rounded-full overflow-hidden mb-4">
|
||||
<div class="sp-progress-bar h-full rounded-full transition-all duration-500 ease-out"
|
||||
style="width: {{ $progressPercent }}%"></div>
|
||||
<div class="sp-progress-bar h-full rounded-full transition-all duration-500" style="width: {{ $progressPercent }}%"></div>
|
||||
</div>
|
||||
|
||||
{{-- Threshold Markers --}}
|
||||
<div class="relative flex justify-between">
|
||||
@foreach($spThresholds as $threshold)
|
||||
@php
|
||||
$tsReached = $totalPoints >= $threshold->min_points;
|
||||
@endphp
|
||||
@php $tsReached = $totalPoints >= $threshold->min_points; @endphp
|
||||
<div class="flex flex-col items-center" style="flex:1">
|
||||
<div class="flex items-center gap-1.5 mb-1.5">
|
||||
<span class="w-3 h-3 rounded-full {{ $tsReached ? 'shadow-sm' : 'bg-gray-300' }}"
|
||||
style="background-color: {{ $tsReached ? $threshold->color : '' }}"></span>
|
||||
<span class="text-xs font-semibold {{ $tsReached ? '' : 'text-gray-400' }}"
|
||||
style="color: {{ $tsReached ? $threshold->color : '' }}">
|
||||
{{ $threshold->min_points }}
|
||||
</span>
|
||||
<span class="w-3 h-3 rounded-full {{ $tsReached ? 'shadow-sm' : 'bg-gray-300' }}" style="background-color: {{ $tsReached ? $threshold->color : '' }}"></span>
|
||||
<span class="text-xs font-semibold {{ $tsReached ? '' : 'text-gray-400' }}" style="color: {{ $tsReached ? $threshold->color : '' }}">{{ $threshold->min_points }}</span>
|
||||
</div>
|
||||
<span class="text-[10px] {{ $tsReached ? 'font-medium' : 'text-gray-400' }} leading-tight text-center"
|
||||
style="color: {{ $tsReached ? $threshold->color : '' }}">
|
||||
{{ $threshold->name }}
|
||||
</span>
|
||||
<span class="text-[10px] {{ $tsReached ? 'font-medium' : 'text-gray-400' }}" style="color: {{ $tsReached ? $threshold->color : '' }}">{{ $threshold->name }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Status --}}
|
||||
@if($currentSpLevel)
|
||||
<div class="mt-5 p-3.5 rounded-xl text-sm flex items-start gap-3"
|
||||
style="background-color: {{ $currentSpLevel->color }}10; border: 1px solid {{ $currentSpLevel->color }}20;">
|
||||
<svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
style="color: {{ $currentSpLevel->color }}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="mt-5 p-4 rounded-xl flex items-start gap-3" style="background-color: {{ $currentSpLevel->color }}10; border: 1px solid {{ $currentSpLevel->color }}20;">
|
||||
<div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background-color: {{ $currentSpLevel->color }}20;">
|
||||
<i class="fa-solid fa-triangle-exclamation" style="color: {{ $currentSpLevel->color }}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold" style="color: {{ $currentSpLevel->color }}">{{ $currentSpLevel->name }} sudah tercapai</p>
|
||||
<p class="text-gray-500 mt-0.5 text-xs">Siswa ini telah mencapai ambang minimal {{ $currentSpLevel->min_points }} poin. Surat peringatan telah diterbitkan.</p>
|
||||
<p class="text-sm font-semibold" style="color: {{ $currentSpLevel->color }}">{{ $currentSpLevel->name }} Sudah Tercapai</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">Siswa telah mencapai ambang {{ $currentSpLevel->min_points }} poin. Surat peringatan telah diterbitkan.</p>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($nextSpThreshold && $violationCount > 0)
|
||||
<div class="mt-5 p-3.5 rounded-xl bg-blue-50 border border-blue-100 text-sm flex items-start gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 text-blue-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="mt-5 p-4 rounded-xl bg-blue-50 border border-blue-100 flex items-start gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<i class="fa-solid fa-circle-info text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-blue-700">Menuju {{ $nextSpThreshold->name }}</p>
|
||||
<p class="text-blue-600/70 mt-0.5 text-xs">{{ $nextSpThreshold->min_points - $totalPoints }} poin lagi untuk mencapai ambang {{ $nextSpThreshold->name }} ({{ $nextSpThreshold->min_points }} poin)</p>
|
||||
<p class="text-sm font-semibold text-blue-700">Menuju {{ $nextSpThreshold->name }}</p>
|
||||
<p class="text-xs text-blue-500/70 mt-0.5">{{ $nextSpThreshold->min_points - $totalPoints }} poin lagi untuk mencapai {{ $nextSpThreshold->name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@@ -217,76 +193,66 @@
|
||||
{{-- ===== VIOLATIONS TIMELINE ===== --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-orange-500 to-red-500 flex items-center justify-center shadow-sm">
|
||||
<i class="fa-solid fa-triangle-exclamation text-white text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900">Riwayat Pelanggaran</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-900">Riwayat Pelanggaran</h3>
|
||||
<p class="text-xs text-gray-400">{{ $violationCount }} catatan pelanggaran</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@forelse($student->violations as $v)
|
||||
<div class="violation-timeline relative pl-14 pr-6 py-4 {{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition">
|
||||
{{-- Timeline dot --}}
|
||||
<div class="absolute left-[13px] top-[18px] w-[15px] h-[15px] rounded-full border-2 flex items-center justify-center"
|
||||
style="border-color: {{ $v->violationType?->category?->color ?? '#9ca3af' }}; background-color: white;">
|
||||
<span class="w-[7px] h-[7px] rounded-full" style="background-color: {{ $v->violationType?->category?->color ?? '#9ca3af' }}"></span>
|
||||
<div class="violation-timeline relative pl-[52px] pr-6 py-4 {{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition">
|
||||
<div class="absolute left-[15px] top-[15px] w-[16px] h-[16px] rounded-full border-[3px] bg-white flex items-center justify-center"
|
||||
style="border-color: {{ $v->violationType?->category?->color ?? '#9ca3af' }}">
|
||||
<span class="w-[6px] h-[6px] rounded-full" style="background-color: {{ $v->violationType?->category?->color ?? '#9ca3af' }}"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-medium text-gray-900">{{ $v->violationType->name ?? '—' }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900">{{ $v->violationType->name ?? '—' }}</span>
|
||||
@if($v->is_verified)
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium bg-blue-50 text-blue-600 border border-blue-200 rounded">✓ Terverifikasi</span>
|
||||
<span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium bg-emerald-50 text-emerald-600 rounded-full border border-emerald-200">
|
||||
<span class="w-1 h-1 bg-emerald-500 rounded-full"></span>
|
||||
Terverifikasi
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@if($v->description)
|
||||
<p class="text-sm text-gray-500 mt-0.5 line-clamp-2">{{ $v->description }}</p>
|
||||
@endif
|
||||
<div class="flex items-center gap-3 mt-1.5 text-xs text-gray-400">
|
||||
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 mt-2 text-xs text-gray-400">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<i class="fa-solid fa-calendar text-gray-300"></i>
|
||||
{{ $v->violation_date->format('d M Y') }}
|
||||
@if($v->violation_time)
|
||||
{{ $v->violation_time }}
|
||||
@endif
|
||||
@if($v->violation_time) {{ \Carbon\Carbon::parse($v->violation_time)->format('H:i') }} @endif
|
||||
</span>
|
||||
@if($v->location)
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<i class="fa-solid fa-location-dot text-gray-300"></i>
|
||||
{{ $v->location }}
|
||||
</span>
|
||||
@endif
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<i class="fa-solid fa-user-pen text-gray-300"></i>
|
||||
{{ $v->recorder->name ?? '—' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- Evidence photos --}}
|
||||
@if($v->evidences && $v->evidences->count() > 0)
|
||||
<div class="flex gap-2 mt-2">
|
||||
<div class="flex gap-2 mt-2.5">
|
||||
@foreach($v->evidences->take(3) as $ev)
|
||||
<a href="{{ Storage::url($ev->file_path) }}" target="_blank"
|
||||
class="w-14 h-14 rounded-lg border border-gray-200 overflow-hidden hover:ring-2 hover:ring-blue-300 transition-all">
|
||||
class="w-12 h-12 rounded-lg border border-gray-200 overflow-hidden hover:ring-2 hover:ring-blue-300 transition-all">
|
||||
<img src="{{ Storage::url($ev->file_path) }}" class="w-full h-full object-cover" alt="Bukti">
|
||||
</a>
|
||||
@endforeach
|
||||
@if($v->evidences->count() > 3)
|
||||
<div class="w-14 h-14 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center text-xs text-gray-400 font-medium">
|
||||
<div class="w-12 h-12 rounded-lg bg-gray-50 border border-gray-200 flex items-center justify-center text-[10px] text-gray-400 font-medium">
|
||||
+{{ $v->evidences->count() - 3 }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -294,23 +260,26 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end flex-shrink-0">
|
||||
<span class="text-sm font-bold {{ $v->points >= 50 ? 'text-blue-600' : ($v->points >= 15 ? 'text-blue-500' : 'text-blue-400') }}">
|
||||
<div class="flex flex-col items-center flex-shrink-0 gap-2.5 min-w-[72px]">
|
||||
<span class="inline-flex items-center px-3 py-1 text-xs font-bold rounded-lg shadow-sm
|
||||
{{ $v->points >= 50 ? 'bg-red-500 text-white' : ($v->points >= 15 ? 'bg-yellow-500 text-white' : 'bg-blue-500 text-white') }}">
|
||||
+{{ $v->points }}
|
||||
</span>
|
||||
@if($v->sanction)
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 line-clamp-1 max-w-[100px] text-right">{{ $v->sanction }}</span>
|
||||
<span class="text-[10px] text-gray-400 leading-tight text-center line-clamp-2 max-w-[72px]">{{ $v->sanction }}</span>
|
||||
@endif
|
||||
<a href="{{ route('violations.show', $v->id) }}" class="text-[10px] text-blue-500 hover:text-blue-700 font-medium mt-1 transition">Detail</a>
|
||||
<a href="{{ route('violations.show', $v->id) }}"
|
||||
class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 hover:border-blue-300 transition-all shadow-sm w-full">
|
||||
Detail
|
||||
<i class="fa-solid fa-arrow-right text-[10px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="py-16 text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-7 h-7 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="w-16 h-16 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center mx-auto mb-4">
|
||||
<i class="fa-solid fa-face-smile text-gray-300 text-2xl"></i>
|
||||
</div>
|
||||
<h4 class="text-sm font-medium text-gray-500 mb-1">Belum Ada Pelanggaran</h4>
|
||||
<p class="text-xs text-gray-400">Siswa ini belum memiliki catatan pelanggaran</p>
|
||||
@@ -322,14 +291,12 @@
|
||||
@if($student->spLetters->count() > 0)
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500 to-violet-600 flex items-center justify-center shadow-sm">
|
||||
<i class="fa-solid fa-file-lines text-white text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900">Surat Peringatan</h3>
|
||||
<h3 class="text-sm font-semibold text-gray-900">Surat Peringatan</h3>
|
||||
<p class="text-xs text-gray-400">{{ $student->spLetters->count() }} surat diterbitkan</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -340,108 +307,324 @@
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0"
|
||||
style="background-color: {{ $sp->spThreshold?->color ?? '#3b82f6' }}15">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
||||
style="color: {{ $sp->spThreshold?->color ?? '#3b82f6' }}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
<i class="fa-solid fa-file-lines" style="color: {{ $sp->spThreshold?->color ?? '#3b82f6' }}"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium text-gray-900 truncate">
|
||||
<p class="text-sm font-semibold text-gray-900 truncate">
|
||||
{{ $sp->spThreshold?->name ?? 'SP' }}
|
||||
@if($sp->status === 'draft')
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium bg-blue-50 text-blue-600 border border-blue-200 rounded ml-1.5">Draft</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium bg-yellow-50 text-yellow-600 rounded-full border border-yellow-200 ml-1.5">Draft</span>
|
||||
@elseif($sp->status === 'issued')
|
||||
<span class="inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium bg-emerald-50 text-emerald-600 border border-emerald-200 rounded ml-1.5">Terbit</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium bg-emerald-50 text-emerald-600 rounded-full border border-emerald-200 ml-1.5">Terbit</span>
|
||||
@endif
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-0.5">{{ $sp->letter_number }} • {{ $sp->created_at->format('d M Y') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<a href="{{ route('sp-letters.show', $sp->id) }}"
|
||||
class="px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all">
|
||||
Lihat
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition">
|
||||
<i class="fa-solid fa-eye"></i>
|
||||
<span class="hidden sm:inline">Lihat</span>
|
||||
</a>
|
||||
<a href="{{ route('sp-letters.print', $sp->id) }}"
|
||||
class="px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-all">
|
||||
Cetak
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
<i class="fa-solid fa-print"></i>
|
||||
<span class="hidden sm:inline">Cetak</span>
|
||||
</a>
|
||||
</div>
|
||||
{{-- Always show on mobile --}}
|
||||
<div class="flex items-center gap-2 flex-shrink-0 sm:hidden">
|
||||
<a href="{{ route('sp-letters.show', $sp->id) }}" class="text-xs text-blue-600 font-medium">Lihat</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- ===== STUDENT INFO DETAILS ===== --}}
|
||||
{{-- ===== INFO DETAILS ===== --}}
|
||||
<div x-data="{ showEditModal: false }">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm flex-shrink-0">
|
||||
<i class="fa-solid fa-circle-info text-white text-sm"></i>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-sm font-semibold text-gray-900 truncate">Informasi Lengkap</h3>
|
||||
<p class="text-xs text-gray-400 truncate">Data diri siswa</p>
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-gray-900">Informasi Lengkap</h3>
|
||||
</div>
|
||||
<button @click="showEditModal = true"
|
||||
class="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition flex-shrink-0 shadow-sm">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
Update Data
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">NISN</p>
|
||||
<p class="text-sm font-medium text-gray-900 font-mono">{{ $student->nisn ?? '—' }}</p>
|
||||
@php
|
||||
// Identitas: kiri
|
||||
$identityLeft = [
|
||||
['NISN', $student->nisn, 'fa-id-card'],
|
||||
['NIS', $student->student_number, 'fa-hashtag'],
|
||||
];
|
||||
// Identitas: kanan
|
||||
$identityRight = [
|
||||
['Jenis Kelamin', $student->gender === 'L' ? 'Laki-laki' : ($student->gender === 'P' ? 'Perempuan' : '—'), 'fa-venus-mars'],
|
||||
['Tempat Lahir', $student->place_of_birth, 'fa-map-pin'],
|
||||
['Tanggal Lahir', $student->date_of_birth ? $student->date_of_birth->format('d M Y') : '—', 'fa-cake-candles'],
|
||||
];
|
||||
// Akademik
|
||||
$academic = [
|
||||
['Kelas', $student->class_name, 'fa-building'],
|
||||
['Jurusan', $student->department_name ?? $student->department_code, 'fa-graduation-cap'],
|
||||
['Tahun Akademik', $student->academic_year_name, 'fa-calendar'],
|
||||
];
|
||||
// Kontak
|
||||
$contact = [
|
||||
['Telepon', $student->phone_number, 'fa-phone'],
|
||||
['Email', $student->email, 'fa-envelope'],
|
||||
];
|
||||
// Sistem
|
||||
$system = [
|
||||
['Terakhir Sinkron', $student->synced_at ? $student->synced_at->format('d M Y H:i') : '—', 'fa-cloud-arrow-down'],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="space-y-5">
|
||||
{{-- Row: Identitas --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
||||
{{-- Identitas Kiri --}}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-blue-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-id-card text-blue-600 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-blue-600 uppercase tracking-wider">Identitas</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
@foreach($identityLeft as $f)
|
||||
@if($f[1])
|
||||
<div class="flex items-center justify-between bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<span class="text-xs text-gray-400">{{ $f[0] }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 {{ $f[0] === 'NISN' || $f[0] === 'NIS' ? 'font-mono' : '' }}">{{ $f[1] }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
{{-- Identitas Kanan --}}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-blue-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-user text-blue-600 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-blue-600 uppercase tracking-wider">Pribadi</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
@foreach($identityRight as $f)
|
||||
@if($f[1])
|
||||
<div class="flex items-center justify-between bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<span class="text-xs text-gray-400">{{ $f[0] }}</span>
|
||||
<span class="text-sm font-semibold text-gray-900 max-w-[55%] text-right truncate">{{ $f[1] }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">NIS</p>
|
||||
<p class="text-sm font-medium text-gray-900 font-mono">{{ $student->student_number ?? '—' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Jenis Kelamin</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->gender === 'L' ? 'Laki-laki' : ($student->gender === 'P' ? 'Perempuan' : '—') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Tempat, Tanggal Lahir</p>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
{{ $student->place_of_birth ?? '—' }}{{ $student->place_of_birth && $student->date_of_birth ? ', ' : '' }}
|
||||
{{ $student->date_of_birth ? $student->date_of_birth->format('d M Y') : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Kelas</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->class_name ?? '—' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Jurusan</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->department_name ?? $student->department_code ?? '—' }}</p>
|
||||
</div>
|
||||
<div class="sm:col-span-2 lg:col-span-3">
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Alamat</p>
|
||||
<p class="text-sm text-gray-700">{{ $student->address ?? '—' }}</p>
|
||||
</div>
|
||||
@if($student->phone_number || $student->email)
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Telepon</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->phone_number ?? '—' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Email</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->email ?? '—' }}</p>
|
||||
|
||||
{{-- Row: Akademik --}}
|
||||
@php $academicHasValue = collect($academic)->filter(fn($f) => $f[1] !== '—' && $f[1] !== null)->count() > 0; @endphp
|
||||
@if($academicHasValue)
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-violet-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-graduation-cap text-violet-600 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-violet-600 uppercase tracking-wider">Akademik</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
|
||||
@foreach($academic as $f)
|
||||
@if($f[1])
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<p class="text-xs text-gray-400">{{ $f[0] }}</p>
|
||||
<p class="text-sm font-semibold text-gray-900 mt-0.5">{{ $f[1] }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Tahun Akademik</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->academic_year_name ?? '—' }}</p>
|
||||
|
||||
{{-- Row: Kontak --}}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-emerald-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-address-book text-emerald-600 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-emerald-600 uppercase tracking-wider">Kontak</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach($contact as $f)
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<p class="text-xs text-gray-400">{{ $f[0] }}</p>
|
||||
<p class="text-sm font-medium text-gray-900 mt-0.5 font-mono">{{ $f[1] ?: '—' }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] font-semibold text-gray-400 uppercase tracking-widest mb-1.5">Terakhir Sinkron</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ $student->synced_at ? $student->synced_at->format('d M Y H:i') : '—' }}</p>
|
||||
|
||||
{{-- Alamat --}}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-blue-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-location-dot text-blue-600 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-blue-600 uppercase tracking-wider">Alamat</span>
|
||||
</div>
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<p class="text-sm text-gray-700 leading-relaxed">{{ $student->address ?: '—' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Row: Sistem --}}
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded-md bg-gray-200 flex items-center justify-center">
|
||||
<i class="fa-solid fa-gear text-gray-500 text-[10px]"></i>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Sistem</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
@foreach($system as $f)
|
||||
@if($f[1])
|
||||
<div class="bg-gray-50 rounded-xl border border-gray-100 px-4 py-3">
|
||||
<p class="text-xs text-gray-400">{{ $f[0] }}</p>
|
||||
<p class="text-sm font-medium text-gray-900 mt-0.5">{{ $f[1] }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Edit Modal --}}
|
||||
<div x-show="showEditModal"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
||||
<div class="flex items-center justify-center min-h-screen px-4 py-4">
|
||||
<div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
|
||||
<div class="relative bg-white rounded-2xl shadow-xl border border-gray-200 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
||||
<i class="fa-solid fa-pen-to-square text-white text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900">Update Data Siswa</h3>
|
||||
<p class="text-xs text-gray-400">Perbarui data diri {{ $student->full_name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="showEditModal = false" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('students.update', $student->id) }}" method="POST" class="p-6">
|
||||
@csrf @method('PUT')
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap <span class="text-red-500">*</span></label>
|
||||
<input type="text" name="full_name" value="{{ $student->full_name }}" required
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">NISN</label>
|
||||
<input type="text" name="nisn" value="{{ $student->nisn }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">NIS</label>
|
||||
<input type="text" name="student_number" value="{{ $student->student_number }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Jenis Kelamin</label>
|
||||
<select name="gender"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">—</option>
|
||||
<option value="L" @selected($student->gender === 'L')>Laki-laki</option>
|
||||
<option value="P" @selected($student->gender === 'P')>Perempuan</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tempat Lahir</label>
|
||||
<input type="text" name="place_of_birth" value="{{ $student->place_of_birth }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tanggal Lahir</label>
|
||||
<input type="date" name="date_of_birth" value="{{ $student->date_of_birth ? $student->date_of_birth->format('Y-m-d') : '' }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>
|
||||
<textarea name="address" rows="2"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">{{ $student->address }}</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">No. Telepon</label>
|
||||
<input type="text" name="phone_number" value="{{ $student->phone_number }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input type="email" name="email" value="{{ $student->email }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Kelas</label>
|
||||
<input type="text" name="class_name" value="{{ $student->class_name }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Tingkat Kelas</label>
|
||||
<input type="text" name="class_level" value="{{ $student->class_level }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Kode Jurusan</label>
|
||||
<input type="text" name="department_code" value="{{ $student->department_code }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Jurusan</label>
|
||||
<input type="text" name="department_name" value="{{ $student->department_name }}"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
|
||||
<button type="button" @click="showEditModal = false"
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm inline-flex items-center gap-2">
|
||||
<i class="fa-solid fa-floppy-disk text-xs"></i>
|
||||
Simpan Perubahan
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user