# 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):
```php
// 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:
```php
$hariMap = [
    'Senin' => 'Senin',
    'Selasa' => 'Selasa',
    'Rabu' => 'Rabu',
    'Kamis' => 'Kamis',
    'Jumat' => 'Jumat',
    'Sabtu' => 'Sabtu',
    'Minggu' => 'Ahad'  // Penting untuk database
];
```

### Animation Classes:
```css
@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)