9.1 KiB

Raw Blame History

DOKUMENTASI PENGEMBANGAN FITUR PEMBAYARAN SPP

📋 Overview

Fitur Pembayaran SPP telah dikembangkan dengan sistem tab yang memisahkan antara santri yang sudah bayar dan belum bayar, dilengkapi dengan sistem filter yang komprehensif dan badge status yang jelas.

✨ Fitur yang Dikembangkan

1. Sistem Tab "Sudah Bayar" & "Belum Bayar"

Tab Sudah Bayar: Menampilkan daftar santri yang telah melunasi SPP periode tertentu
- Menampilkan nominal yang dibayarkan
- Tanggal pembayaran
- Link ke riwayat pembayaran santri
- Tombol cetak bukti pembayaran
Tab Belum Bayar: Menampilkan daftar santri yang belum melunasi SPP
- Menampilkan nominal tagihan
- Batas waktu pembayaran
- Jumlah hari keterlambatan (jika telat)
- Link ke halaman tagihan santri
- Tombol untuk membuat tagihan baru (jika belum ada)

2. Status Pembayaran

Tiga status utama:

✅ Sudah Bayar (Lunas): Badge hijau dengan gradient
⏰ Belum Bayar (Belum Lunas): Badge warning dengan gradient pink
🚨 Terlambat: Badge merah dengan animasi pulse dan highlight baris

3. Filter Data

Filter Bulan: Dropdown untuk memilih bulan (1-12)
Filter Tahun: Dropdown tahun berdasarkan data yang ada
Filter Status (hanya di tab Belum Bayar):
- Semua Status
- Belum Lunas
- Terlambat
- Belum Ada Tagihan
Search: Pencarian berdasarkan nama santri, NIS, atau ID Santri
Default Filter: Otomatis menampilkan bulan dan tahun saat ini

4. Badge & Penanda Khusus

Badge "TERLAMBAT" berwarna merah terang dengan animasi pulse
Highlight baris dengan background merah muda untuk santri yang terlambat
Informasi jumlah hari keterlambatan
Badge dengan gradient yang menarik untuk setiap status

5. Statistik Dashboard

Empat card statistik dengan gradient:

👥 Total Santri: Jumlah total santri aktif
✅ Sudah Bayar: Jumlah santri yang sudah bayar + total nominal
❌ Belum Bayar: Jumlah santri yang belum bayar + total tunggakan
⏰ Terlambat: Jumlah santri yang melewati batas waktu

6. Navigasi & UX

Tab navigation dengan counter badge
Informasi periode yang sedang ditampilkan
Tombol reset filter
Pagination manual dengan info halaman
Hover effects pada tombol dan baris tabel
Responsive design

7. Integrasi Form Create

Pre-fill form dengan parameter dari URL
Otomatis memilih santri, bulan, dan tahun dari link "Buat Tagihan"

🗂️ File yang Dimodifikasi

1. Controller - `PembayaranSppController.php`

// Method index() - Complete rewrite
- Menambahkan sistem tab (sudah-bayar / belum-bayar)
- Grouping data per santri (bukan per transaksi)
- Filter berdasarkan bulan, tahun, search, dan status
- Perhitungan statistik real-time
- Manual pagination
- Default filter ke bulan/tahun saat ini

Fitur Utama:

Eager loading untuk optimasi query
Collection mapping untuk data transformation
Filter dinamis berdasarkan tab
Statistik agregasi (count & sum)

2. View - `index.blade.php`

Struktur Baru:

1. Alert messages (success/error)
2. Filter section dengan label dan icon
3. Statistics cards (4 cards dengan gradient)
4. Tab navigation (Belum Bayar & Sudah Bayar)
5. Action buttons (Generate, Tambah, Laporan)
6. Periode info
7. Data table dengan kolom dinamis
8. Manual pagination
9. Custom CSS untuk badge dan animasi

Styling:

Gradient backgrounds untuk cards
Badge dengan animasi pulse untuk status terlambat
Hover effects
Highlight baris untuk santri terlambat
Responsive grid layout

3. View - `create.blade.php`

Modifikasi:

Pre-fill id_santri dari request parameter
Pre-fill bulan dari request parameter
Pre-fill tahun dari request parameter
Fallback ke nilai default jika parameter tidak ada

📊 Flow Data

Tab "Belum Bayar"

1. Query santri aktif dengan eager load pembayaran
2. Filter by bulan & tahun
3. Filter santri yang belum lunas atau belum ada tagihan
4. Apply search filter
5. Apply status filter (Belum Lunas/Telat/Belum Ada Tagihan)
6. Hitung statistik
7. Manual pagination
8. Return view dengan data

Tab "Sudah Bayar"

1. Query santri aktif dengan eager load pembayaran
2. Filter by bulan & tahun
3. Filter santri yang status = Lunas
4. Apply search filter
5. Hitung statistik
6. Manual pagination
7. Return view dengan data

🎨 Design Decisions

1. Grouping per Santri (bukan per transaksi)

Alasan:

Lebih intuitif untuk monitoring pembayaran
Mudah melihat siapa yang sudah/belum bayar
Menghindari duplikasi data santri

2. Default Filter ke Bulan/Tahun Saat Ini

Alasan:

Fokus pada periode aktif
Mengurangi clutter data
Admin biasanya ingin cek bulan berjalan

3. Manual Pagination

Alasan:

Data sudah difilter di collection
Built-in paginator tidak cocok untuk collection hasil transform
Lebih fleksibel untuk custom logic

4. Badge dengan Animasi Pulse

Alasan:

Menarik perhatian untuk santri yang telat
Visual feedback yang jelas
Meningkatkan UX

5. Tab System

Alasan:

Pemisahan yang jelas antara lunas dan belum lunas
Mengurangi cognitive load
Mudah fokus pada salah satu kelompok

🔍 Query Optimization

Eager Loading

Santri::where('status', 'Aktif')
    ->with(['pembayaranSpp' => function($q) use ($bulan, $tahun) {
        $q->where('bulan', $bulan)->where('tahun', $tahun);
    }])

Benefit:

Menghindari N+1 query problem
Load hanya data pembayaran yang relevan
Performa lebih cepat

Collection Filtering vs Query Filtering

Query filtering untuk periode (bulan/tahun)
Collection filtering untuk status dan search
Lebih fleksibel untuk logic complex

🎯 Key Features Breakdown

Penanda Telat

// Check telat di Model
public function isTelat() {
    if ($this->status === 'Lunas') return false;
    return Carbon::now()->isAfter($this->batas_bayar);
}

// Highlight visual
- Background baris: #fff5f5 (pink muda)
- Badge: Gradient merah dengan animasi
- Info: Jumlah hari keterlambatan

Filter yang Sedang Aktif

// Preserve filter saat pindah tab
array_merge(request()->except('tab'), ['tab' => 'sudah-bayar'])

// Show reset button jika ada filter
@if(request()->hasAny(['search', 'filter_status']) || $bulan != date('n') || $tahun != date('Y'))

Link ke Riwayat/Tagihan

// Riwayat pembayaran per santri
route('admin.pembayaran-spp.riwayat', $item['id_santri'])

// Create dengan pre-fill
route('admin.pembayaran-spp.create', [
    'id_santri' => $item['id_santri'], 
    'bulan' => $bulan, 
    'tahun' => $tahun
])

📱 Responsive Design

Grid Layout

display: grid; 
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Benefit:

Auto-responsive tanpa media queries manual
Kartu statistik menyesuaikan lebar layar

Form Filter

display: flex; 
flex-wrap: wrap;

Benefit:

Input fields wrap ke baris baru di layar kecil
Tetap horizontal di layar besar

⚡ Performance Considerations

Pagination: 20 items per page - balance antara UX dan performa
Eager Loading: Hindari N+1 queries
Collection Operations: Lebih cepat daripada multiple queries
CSS Animations: Hardware-accelerated (opacity, transform)

🚀 Testing Checklist

Tab switching preserve filter
Filter bulan & tahun berfungsi
Search santri berfungsi
Filter status di tab Belum Bayar
Badge terlambat muncul untuk santri telat
Statistik terupdate sesuai filter
Pagination berfungsi
Link riwayat pembayaran
Link buat tagihan dengan pre-fill
Tombol reset filter
Cetak bukti di tab Sudah Bayar
Responsive di mobile

📝 Notes untuk Developer

Jangan Ubah:

❌ Struktur database
❌ Alur bisnis (create, update, delete)
❌ Routes yang sudah ada
❌ Model relationships

Boleh Dikustomisasi:

✅ Warna gradient badge
✅ Jumlah item per page
✅ Default filter (jika tidak ingin ke bulan saat ini)
✅ Kolom tambahan di tabel
✅ Statistik tambahan

Tips Maintenance:

Gunakan Collection operations untuk filtering complex
Keep controller logic readable dengan method extract jika perlu
Cache tahunList jika data besar
Monitor query performance dengan Laravel Debugbar

🐛 Known Limitations

Manual Pagination: Tidak kompatibel dengan Laravel Pagination Links bawaan
Collection Filtering: Semua data santri di-load dulu sebelum filter - bisa lambat jika santri > 1000
Real-time Stats: Dihitung setiap request - pertimbangkan caching untuk production

💡 Future Enhancements

Export Excel: Export data berdasarkan filter
Bulk Actions: Tandai lunas multiple santri sekaligus
Notifications: Email/SMS reminder untuk yang telat
Dashboard Chart: Visualisasi trend pembayaran
Auto Reminder: Cron job untuk reminder otomatis
Payment Gateway: Integrasi pembayaran online

Last Updated: February 6, 2026
Version: 1.0
Developer: GitHub Copilot Assistant

9.1 KiB Raw Blame History

DOKUMENTASI PENGEMBANGAN FITUR PEMBAYARAN SPP

📋 Overview

✨ Fitur yang Dikembangkan

1. Sistem Tab "Sudah Bayar" & "Belum Bayar"

2. Status Pembayaran

3. Filter Data

4. Badge & Penanda Khusus

5. Statistik Dashboard

6. Navigasi & UX

7. Integrasi Form Create

🗂️ File yang Dimodifikasi

1. Controller - PembayaranSppController.php

2. View - index.blade.php

3. View - create.blade.php

📊 Flow Data

Tab "Belum Bayar"

Tab "Sudah Bayar"

🎨 Design Decisions

1. Grouping per Santri (bukan per transaksi)

2. Default Filter ke Bulan/Tahun Saat Ini

3. Manual Pagination

4. Badge dengan Animasi Pulse

5. Tab System

🔍 Query Optimization

Eager Loading

Collection Filtering vs Query Filtering

🎯 Key Features Breakdown

Penanda Telat

Filter yang Sedang Aktif

Link ke Riwayat/Tagihan

📱 Responsive Design

Grid Layout

Form Filter

⚡ Performance Considerations

🚀 Testing Checklist

📝 Notes untuk Developer

Jangan Ubah:

Boleh Dikustomisasi:

Tips Maintenance:

🐛 Known Limitations

💡 Future Enhancements

9.1 KiB

Raw Blame History

1. Controller - `PembayaranSppController.php`

2. View - `index.blade.php`

3. View - `create.blade.php`