MIF_E31222881/resources/js/Pages/list-admin/payment/ManualPayment.jsx

91 lines
5.5 KiB
JavaScript

import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import ModalInput from '@/Components/ModalInput';
import Layout from '@/Components/Layout'
export default function ManualPayment({ santri, penalty, bill, fields, options }) {
const [selectedSantri, setSelectedSantri] = useState(null);
// console.log(LeftSidebar)
return (
<div className='text-red-500'>
{/* <Layout /> */}
<Head title="Manual Payment" />
<ModalInput showPayments={true} fields={fields} options={options} tableName='payments' initialData={selectedSantri} onClose={() => setSelectedSantri(null)} />
{santri && santri.length > 0 ? santri.map((item, i) => (
<div key={i} className="p-4 border-b">
<p>Nis: {item.user.nis}</p>
<p><strong>Santri:</strong> {item.nama}</p>
{item.payments && item.payments.length > 0 ? (
<div className="ml-4">
<p className="font-semibold">Payments:</p>
{item.payments.map((payment) => (
<div key={payment.id} className="ml-4">
{payment.detail_payments.map((detail) => (
<div key={detail.id}>
<p>{detail.penalty ? `Denda: Rp ${detail.penalty}` : 'Tidak ada denda'}</p>
<p>{detail.status}</p>
<label htmlFor="my_modal_7" className="btn">show pembayaran</label>
<input type="checkbox" id="my_modal_7" className="modal-toggle" />
<div className="modal" role="dialog">
<div className="modal-box">
<h3 className="text-lg font-bold">data pembayaran</h3>
<p className="py-4">{detail.payment_type?.payment_type}</p>
<div className="overflow-x-auto">
<table className="table">
<thead>
<tr>
<th>tipe pembayaran</th>
<th>tahun</th>
<th>bulan</th>
<th>denda</th>
<th>status pemabayaran</th>
</tr>
</thead>
<tbody>
<tr>
<th>{detail.payment_type?.payment_type}</th>
<td className='text-center'>{detail.payment_year}</td>
<td className='text-center'>{detail.payment_month}</td>
<td className='text-center'>{detail.penalty}</td>
<td className='text-center'>
<div className='p-2 bg-red-600 text-white rounded-md'>
{detail.status}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
</div>
</div>
))}
</div>
))}
</div>
) : <p className="ml-4 text-gray-500">Tidak ada pembayaran.</p>}
<div>
<button className='btn btn-accent text-white mt-2' onClick={() => {
setSelectedSantri({
id: item.id,
nama: item.nama,
alamat: item.alamat,
status_santri: item.status_santri,
role_santri: item.role_santri,
nis: item.user?.nis
})
document.getElementById('modal_input').checked = true
}}>Bayar</button>
</div>
</div>
)) : <p>Tidak ada data santri.</p>}
</div>
);
}