MIF_E31230892/DOKUMENTASI_REDESIGN_JADWAL_ABSENSI.md

Dokumentasi Redesign Halaman Jadwal & Absensi Kegiatan

🎯 Perubahan yang Dilakukan

1. Halaman Jadwal Kegiatan (admin.kegiatan.data.index)

Lokasi: sim-pkpps/resources/views/admin/kegiatan/data/index.blade.php

Perubahan Tampilan:

✅ Dari: Tabel flat dengan filter dropdown di atas
✅ Ke: 7 tab horizontal (Senin-Ahad) dengan card grid per hari

Fitur Utama:

• Tab Navigation: 7 tab horizontal untuk setiap hari dalam seminggu
• Auto-Select Tab: Tab hari ini otomatis terpilih saat pertama kali membuka halaman
• Card Layout: Kegiatan ditampilkan sebagai card, bukan baris tabel
• Filter per Tab: Dropdown filter kelas & kategori di dalam setiap tab
• Tab Switching JavaScript: Berpindah tab tanpa reload (URL state preserved dengan pushState)

Struktur Card Kegiatan:

┌─────────────────────────────────┐
│ Nama Kegiatan          [Badge]  │
│ 🕐 08:00 - 10:00               │
│ [Kelas1] [Kelas2] [+2 lainnya]│
│ 📖 Materi: ...                 │
│                                 │
│ [Input Absensi] [Detail]       │
└─────────────────────────────────┘

CSS Responsif:

• Grid auto-fill dengan minimum width 320px
• Horizontal scroll pada tab navigation untuk mobile
• Hover effects & animations (fadeIn, translateY)

---

2. Halaman Input Absensi (admin.absensi-kegiatan.index)

Lokasi: sim-pkpps/resources/views/admin/kegiatan/absensi/index.blade.php

Perubahan Tampilan:

✅ Dari: Filter dropdown biasa + tabel list kegiatan
✅ Ke: Date picker dengan header tanggal + card grid dengan status badge

Fitur Utama:

• Date Picker Section: Background gradient hijau dengan header tanggal lengkap
• Nama Hari Otomatis: Menampilkan "Jumat, 8 Desember 2024" berdasarkan tanggal dipilih
• Filter dalam Date Picker: Kategori & Kelas digabung dalam satu section
• Status Badge: Menampilkan "Sudah Input" (hijau) atau "Belum Input" (merah)
• Progress Bar: Jika sudah ada data absensi, tampilkan persentase kehadiran
• Query Otomatis Hari: Sistem otomatis filter kegiatan berdasarkan hari dari tanggal dipilih

Struktur Card Kegiatan:

┌─────────────────────────────────┬──────────────┐
│ Nama Kegiatan          [Badge]  │ [Status]     │
│ 🕐 08:00 - 10:00               │              │
│ [Kelas1] [Kelas2] [Kelas3]     │              │
│                                 │              │
│ ┌─────────────────────────────┐│              │
│ │ Kehadiran  15/20 (75%)      ││              │
│ │ ████████████░░░░░░░░        ││              │
│ └─────────────────────────────┘│              │
│                                 │              │
│ [Input Absensi] [Rekap]        │              │
└─────────────────────────────────┴──────────────┘

Logika Backend (View Only):

// Map hari Indonesia ke hari sistem
$hariDipilih = Carbon::parse($tanggal)->locale('id')->isoFormat('dddd');
$hariMap = ['Senin' => 'Senin', 'Minggu' => 'Ahad', ...];
$hariFilter = $hariMap[$hariDipilih] ?? 'Senin';

// Filter kegiatan berdasarkan hari dari tanggal dipilih
$query = $kegiatans->where('hari', $hariFilter);

// Cek apakah sudah ada data absensi
$absensiExists = AbsensiKegiatan::where('kegiatan_id', $kegiatan->kegiatan_id)
    ->whereDate('tanggal', $tanggal)
    ->exists();

// Hitung persentase kehadiran
$absensiData = AbsensiKegiatan::where('kegiatan_id', $kegiatan->kegiatan_id)
    ->whereDate('tanggal', $tanggal)
    ->get();
$hadirCount = $absensiData->where('status', 'Hadir')->count();
$persenKehadiran = round(($hadirCount / $totalSantri) * 100);

---

🎨 Palette Warna

Elemen	Warna	Hex Code
Primary Green	Eucalyptus Green	#6FBA9D
Dark Green	Darker Shade	#5EA98C
Light Green	Background	#E8F7F2
Page Background	Very Light	#F8FBF9
Status Sudah (Green)	Success	#D1FAE5 / #065F46
Status Belum (Red)	Error	#FEE2E2 / #991B1B
Blue Button	Info	#3B82F6

---

📦 Tidak Ada Perubahan Controller

✅ Semua perubahan hanya pada VIEW layer
✅ Controller logic tetap sama:

• App\Http\Controllers\Admin\KegiatanController@jadwal → index.blade.php
• App\Http\Controllers\Admin\AbsensiKegiatanController@index → absensi/index.blade.php

✅ Model relationships tetap digunakan:

• $kegiatan->kelasKegiatan (many-to-many via kelas_kegiatan)
• $kegiatan->kategori (belongsTo)
• AbsensiKegiatan::where() queries

---

🚀 Testing Checklist

Halaman Jadwal (/admin/kegiatan/jadwal)

• Tab navigation berfungsi (klik untuk switch)
• Tab hari ini otomatis terpilih
• Filter kelas & kategori submit dengan GET parameter
• Card menampilkan semua informasi kegiatan
• Tombol "Input Absensi" redirect ke input page
• Tombol "Detail" redirect ke detail page
• Responsive di mobile (tab horizontal scroll)

Halaman Absensi (/admin/absensi-kegiatan)

• Date picker default ke hari ini
• Nama hari + tanggal tampil di header
• Filter kategori & kelas berfungsi
• Status badge menampilkan "Sudah Input" / "Belum Input" dengan benar
• Progress bar muncul jika sudah ada data absensi
• Persentase kehadiran dihitung dengan benar (hadir/total)
• Tombol "Input Absensi" membawa parameter tanggal dalam URL
• Tombol "Rekap" redirect ke rekap page
• Empty state muncul jika tidak ada kegiatan di hari tersebut

---

🔧 Teknologi & Dependencies

View Engine: Laravel Blade
Styling: Inline CSS (no external library)
JavaScript: Vanilla JS (tab switching, no jQuery)
PHP Helpers: Carbon (date formatting dengan locale Indonesia)
Icons: Font Awesome 5

Browser Compatibility:

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ CSS Grid supported
• Mobile: ✅ Responsive grid & horizontal scroll

---

📝 Catatan Teknis

URL Parameters yang Digunakan:

Jadwal:

GET /admin/kegiatan/jadwal?hari=Senin&kelas_id=1&kategori_id=2

Absensi:

GET /admin/absensi-kegiatan?tanggal=2024-12-06&kategori_id=1&id_kelas=2

Mapping Hari Minggu → Ahad:

$hariMap = [
    'Senin' => 'Senin',
    'Selasa' => 'Selasa',
    'Rabu' => 'Rabu',
    'Kamis' => 'Kamis',
    'Jumat' => 'Jumat',
    'Sabtu' => 'Sabtu',
    'Minggu' => 'Ahad'  // Penting untuk database
];

Animation Classes:

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

---

✅ Hasil Akhir

• Jadwal: Tab-based layout dengan 7 hari, auto-select hari ini, card grid per tab
• Absensi: Date picker dengan header tanggal, card dengan status badge & progress bar
• UI/UX: Clean, modern, responsif, dengan animasi smooth
• Performance: Lightweight CSS tanpa library eksternal
• Code Quality: Clean Blade syntax, reusable CSS classes

Total Files Modified: 2 files Lines Changed: ~600 lines (redesign complete) No Breaking Changes: Semua route & controller logic tetap sama

---

Dibuat: {{ now()->format('d F Y H:i') }}
Developer: GitHub Copilot
Project: SIM-PKPPS (Sistem Informasi Manajemen Pesantren)