novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: form presensi manual (attendances/create) — opsi status PKL (P ungu) + warna selaras (S=amber); rotasi H→S→I→P→A→T; tombol bulk 'Semua PKL'; legenda & teks info

Browse Source
This commit is contained in:
Novy San87
2026-08-22 20:14:08 +07:00
parent 39c9e031fd
commit 629f6efb08
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/attendances/create.blade.php
+15 -10
View File
@@ -154,9 +154,11 @@
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'hadir')" title="Semua Hadir" <button type="button" onclick="studentBulkSet('{{ $s->id }}', 'hadir')" title="Semua Hadir"
class="w-8 h-8 rounded-lg text-xs font-bold bg-emerald-100 text-emerald-700 border-2 border-emerald-300 hover:bg-emerald-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">H</button> class="w-8 h-8 rounded-lg text-xs font-bold bg-emerald-100 text-emerald-700 border-2 border-emerald-300 hover:bg-emerald-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">H</button>
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'sakit')" title="Semua Sakit" <button type="button" onclick="studentBulkSet('{{ $s->id }}', 'sakit')" title="Semua Sakit"
class="w-8 h-8 rounded-lg text-xs font-bold bg-purple-100 text-purple-700 border-2 border-purple-300 hover:bg-purple-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">S</button> class="w-8 h-8 rounded-lg text-xs font-bold bg-amber-100 text-amber-700 border-2 border-amber-300 hover:bg-amber-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">S</button>
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'izin')" title="Semua Izin" <button type="button" onclick="studentBulkSet('{{ $s->id }}', 'izin')" title="Semua Izin"
class="w-8 h-8 rounded-lg text-xs font-bold bg-blue-100 text-blue-700 border-2 border-blue-300 hover:bg-blue-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">I</button> class="w-8 h-8 rounded-lg text-xs font-bold bg-blue-100 text-blue-700 border-2 border-blue-300 hover:bg-blue-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">I</button>
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'pkl')" title="Semua PKL"
class="w-8 h-8 rounded-lg text-xs font-bold bg-violet-100 text-violet-700 border-2 border-violet-300 hover:bg-violet-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">P</button>
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'alpha')" title="Semua Alpha" <button type="button" onclick="studentBulkSet('{{ $s->id }}', 'alpha')" title="Semua Alpha"
class="w-8 h-8 rounded-lg text-xs font-bold bg-red-100 text-red-700 border-2 border-red-300 hover:bg-red-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">A</button> class="w-8 h-8 rounded-lg text-xs font-bold bg-red-100 text-red-700 border-2 border-red-300 hover:bg-red-200 hover:scale-110 active:scale-95 transition-all duration-150 shadow-sm">A</button>
<button type="button" onclick="studentBulkSet('{{ $s->id }}', 'terlambat')" title="Semua Terlambat" <button type="button" onclick="studentBulkSet('{{ $s->id }}', 'terlambat')" title="Semua Terlambat"
@@ -172,19 +174,20 @@
$statusColors = [ $statusColors = [
'belum' => 'bg-gray-100 border-gray-300 text-gray-400 hover:bg-gray-200', 'belum' => 'bg-gray-100 border-gray-300 text-gray-400 hover:bg-gray-200',
'hadir' => 'bg-emerald-100 border-emerald-300 text-emerald-700 hover:bg-emerald-200', 'hadir' => 'bg-emerald-100 border-emerald-300 text-emerald-700 hover:bg-emerald-200',
'sakit' => 'bg-purple-100 border-purple-300 text-purple-700 hover:bg-purple-200', 'sakit' => 'bg-amber-100 border-amber-300 text-amber-700 hover:bg-amber-200',
'izin' => 'bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200', 'izin' => 'bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200',
'pkl' => 'bg-violet-100 border-violet-300 text-violet-700 hover:bg-violet-200',
'alpha' => 'bg-red-100 border-red-300 text-red-700 hover:bg-red-200', 'alpha' => 'bg-red-100 border-red-300 text-red-700 hover:bg-red-200',
'terlambat' => 'bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200', 'terlambat' => 'bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200',
]; ];
$statusLabels = [ $statusLabels = [
'belum' => '—', 'belum' => '—',
'hadir' => 'H', 'sakit' => 'S', 'izin' => 'I', 'hadir' => 'H', 'sakit' => 'S', 'izin' => 'I', 'pkl' => 'P',
'alpha' => 'A', 'terlambat' => 'T', 'alpha' => 'A', 'terlambat' => 'T',
]; ];
$statusFull = [ $statusFull = [
'belum' => 'Belum diisi', 'belum' => 'Belum diisi',
'hadir' => 'Hadir', 'sakit' => 'Sakit', 'izin' => 'Izin', 'hadir' => 'Hadir', 'sakit' => 'Sakit', 'izin' => 'Izin', 'pkl' => 'PKL',
'alpha' => 'Alpha', 'terlambat' => 'Terlambat', 'alpha' => 'Alpha', 'terlambat' => 'Terlambat',
]; ];
@endphp @endphp
@@ -224,8 +227,9 @@
@php @php
$legends = [ $legends = [
'hadir' => ['emerald', 'H', 'Hadir'], 'hadir' => ['emerald', 'H', 'Hadir'],
'sakit' => ['purple', 'S', 'Sakit'], 'sakit' => ['amber', 'S', 'Sakit'],
'izin' => ['blue', 'I', 'Izin'], 'izin' => ['blue', 'I', 'Izin'],
'pkl' => ['violet', 'P', 'PKL'],
'alpha' => ['red', 'A', 'Alpha'], 'alpha' => ['red', 'A', 'Alpha'],
'terlambat' => ['yellow', 'T', 'Terlambat'], 'terlambat' => ['yellow', 'T', 'Terlambat'],
]; ];
@@ -252,7 +256,7 @@
<div class="w-6 h-6 rounded-lg bg-emerald-100 flex items-center justify-center flex-shrink-0 shadow-sm"> <div class="w-6 h-6 rounded-lg bg-emerald-100 flex items-center justify-center flex-shrink-0 shadow-sm">
<i class="fa-solid fa-circle-info text-emerald-500 text-[10px]"></i> <i class="fa-solid fa-circle-info text-emerald-500 text-[10px]"></i>
</div> </div>
<span>Siswa dengan status <strong>Alpha (A)</strong> minimal 1 jam akan otomatis dicatat sebagai pelanggaran. Klik tombol status untuk <strong>rotasi</strong>: H → S → I → A → T → H.</span> <span>Siswa dengan status <strong>Alpha (A)</strong> minimal 1 jam akan otomatis dicatat sebagai pelanggaran. Klik tombol status untuk <strong>rotasi</strong>: H → S → I → P → A → T → H.</span>
</div> </div>
</div> </div>
</div> </div>
@@ -263,23 +267,24 @@
@push('scripts') @push('scripts')
<script> <script>
const STATUS_CYCLE = ['belum', 'hadir', 'sakit', 'izin', 'alpha', 'terlambat']; const STATUS_CYCLE = ['belum', 'hadir', 'sakit', 'izin', 'pkl', 'alpha', 'terlambat'];
const STATUS_COLORS = { const STATUS_COLORS = {
'belum': 'bg-gray-100 border-gray-300 text-gray-400 hover:bg-gray-200', 'belum': 'bg-gray-100 border-gray-300 text-gray-400 hover:bg-gray-200',
'hadir': 'bg-emerald-100 border-emerald-300 text-emerald-700 hover:bg-emerald-200', 'hadir': 'bg-emerald-100 border-emerald-300 text-emerald-700 hover:bg-emerald-200',
'sakit': 'bg-purple-100 border-purple-300 text-purple-700 hover:bg-purple-200', 'sakit': 'bg-amber-100 border-amber-300 text-amber-700 hover:bg-amber-200',
'izin': 'bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200', 'izin': 'bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200',
'pkl': 'bg-violet-100 border-violet-300 text-violet-700 hover:bg-violet-200',
'alpha': 'bg-red-100 border-red-300 text-red-700 hover:bg-red-200', 'alpha': 'bg-red-100 border-red-300 text-red-700 hover:bg-red-200',
'terlambat': 'bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200', 'terlambat': 'bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200',
}; };
const STATUS_LABELS = { const STATUS_LABELS = {
'belum': '-', 'belum': '-',
'hadir': 'H', 'sakit': 'S', 'izin': 'I', 'hadir': 'H', 'sakit': 'S', 'izin': 'I', 'pkl': 'P',
'alpha': 'A', 'terlambat': 'T', 'alpha': 'A', 'terlambat': 'T',
}; };
const STATUS_FULL = { const STATUS_FULL = {
'belum': 'Belum diisi', 'belum': 'Belum diisi',
'hadir': 'Hadir', 'sakit': 'Sakit', 'izin': 'Izin', 'hadir': 'Hadir', 'sakit': 'Sakit', 'izin': 'Izin', 'pkl': 'PKL',
'alpha': 'Alpha', 'terlambat': 'Terlambat', 'alpha': 'Alpha', 'terlambat': 'Terlambat',
}; };