import React, { useState, useEffect } from 'react'; import { Head } from '@inertiajs/react'; import ModalInput from '@/Components/ModalInput'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '@/Components/features/common/headerSlice'; import { CurrencyDollarIcon } from '@heroicons/react/24/outline' import { usePage } from '@inertiajs/react'; import Swal from "sweetalert2" export default function ManualPayment({ santri, fields, options }) { const [selectedSantri, setSelectedSantri] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [filteredSantri, setFilteredSantri] = useState([]); const [selectedPayments, setSelectedPayments] = useState(null); const { flash } = usePage().props; const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle("Data Payment")); }, [dispatch]); // console.log(santri.id) useEffect(() => { if (santri?.data) { if (santri?.data) { const filtered = santri.data.filter(item => item.nama.toLowerCase().includes(searchTerm.toLowerCase()) || item.nis.toString().includes(searchTerm) ); setFilteredSantri(filtered); } } }, [searchTerm, santri]); const handleSearch = (e) => { setSearchTerm(e.target.value); }; const monthNames = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ]; return (
setSelectedSantri(null)} />

Data Pembayaran

Overview
{filteredSantri.length > 0 ? ( filteredSantri.map((item, i) => ( )) ) : ( )}
Nama Nis Status Aksi
Avatar
{item.nama}
{item.level == 1 ? 'Admin' : 'User'}
 {item.nis}
{item.status_santri || "Open"}
Tidak ada data santri.
{santri.current_page > 1 && ( )} {santri.current_page > 3 && ( ... )} {Array.from({ length: santri.last_page }, (_, i) => i + 1) .filter((page) => page === 1 || page === santri.last_page || Math.abs(page - santri.current_page) <= 2 ) .map((page) => ( ))} {santri.current_page < santri.last_page - 2 && ( ... )} {santri.current_page < santri.last_page && ( )}
{selectedPayments && (

Riwayat Pembayaran

{selectedPayments.map((payment, idx) => payment.detail_payments.map((detail) => ( )) )}
Tipe Pembayaran Tahun Bulan Denda Status
{detail.payment_type?.payment_type} {detail.payment_year} {monthNames[detail.payment_month - 1] || detail.payment_month} {detail.penalty} {detail.status}
{/*
*/}
)}
); }