216 lines
7.7 KiB
Markdown
216 lines
7.7 KiB
Markdown
# 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)
|