// Import wajib import React, { useState, useEffect } from 'react'; import { Head } from '@inertiajs/react'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '@/Components/features/common/headerSlice'; import { CurrencyDollarIcon } from '@heroicons/react/24/outline'; import { Inertia } from '@inertiajs/inertia'; export default function Transaction({ transaction }) { const [searchTerm, setSearchTerm] = useState(''); const [filteredSantri, setFilteredSantri] = useState([]); const [selectedSantri, setSelectedSantri] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1); const [selectedYear, setSelectedYear] = useState(new Date().getFullYear()); const dispatch = useDispatch(); const bulanIndo = [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember' ]; useEffect(() => { dispatch(setPageTitle("Data Transaksi Santri")); }, []); useEffect(() => { if (transaction?.data) { const filtered = transaction.data.filter(item => { const matchSearch = item.nama.toLowerCase().includes(searchTerm.toLowerCase()) || item.nis?.toString().includes(searchTerm); const hasPaymentThisMonthYear = item.payments?.some(payment => payment.detail_payments?.some(d => d.payment_month === selectedMonth && (selectedYear === 'all' || d.payment_year === selectedYear) ) ); return matchSearch && hasPaymentThisMonthYear; }); setFilteredSantri(filtered); } }, [searchTerm, selectedMonth, selectedYear, transaction]); const closeModal = () => { setIsModalOpen(false); setSelectedSantri(null); }; return (

Data Transaksi User

setSearchTerm(e.target.value)} />
{/* TABEL SANTRI */}
{filteredSantri.length > 0 ? ( filteredSantri.map((item, i) => ( )) ) : ( )}
Nama Detail
Avatar
{item.nama}
{item.level === 1 ? 'Admin' : 'Santri'}
Tidak ada data santri.
{/* PAGINATION */}
{transaction.current_page > 1 && ( )} {Array.from({ length: transaction.last_page }, (_, i) => i + 1) .filter(page => page === 1 || page === transaction.last_page || Math.abs(page - transaction.current_page) <= 2) .map((page, i, arr) => { const prev = arr[i - 1]; const showDots = prev && page - prev > 1; return ( {showDots && ...} ); })} {transaction.current_page < transaction.last_page && ( )}
{/* MODAL DETAIL TRANSAKSI */} {isModalOpen && selectedSantri && (
e.stopPropagation()}>

Detail Transaksi {selectedSantri.nama}

{selectedSantri.payments ?.map(p => ({ ...p, details: p.detail_payments?.filter(d => d.payment_month === selectedMonth && (selectedYear === 'all' || d.payment_year === selectedYear)) })) .filter(p => p.details?.length) .map((payment, idx) => { const total = payment.details.reduce((sum, d) => sum + Number(d.amount) + Number(d.penalty || 0), 0); return (
Order ID: {payment.order_id || '-'}
{payment.payment_status}
{payment.details.map((detail, i) => ( ))}
Status Jumlah Jenis Tipe Denda Total
{detail.status} Rp {Number(detail.amount).toLocaleString()} {payment.transaction_type === 'payment' ? 'Pembayaran' : 'Topup'} {detail.payment_type?.payment_type || '-'} Rp {Number(detail.penalty || 0).toLocaleString()} Rp {(Number(detail.amount) + Number(detail.penalty || 0)).toLocaleString()}
Total: Rp {total.toLocaleString()}
); })}
)}
); }