Merge pull request #13 from alealien666/manualPay

insyaallah done manual payment fe
This commit is contained in:
AleAlien 2025-02-21 04:43:00 +07:00 committed by GitHub
commit 6600397b3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 173 additions and 45 deletions

View File

@ -5,9 +5,12 @@
use App\Models\Payment;
use Illuminate\Http\Request;
use App\Models\Santri;
use App\Models\PaymentType;
use App\Models\DetailPayment;
use Inertia\Inertia;
use App\Services\cekDenda;
use App\Services\GenerateMonthlyBill;
use Exception;
class PaymentController extends Controller
{
@ -16,16 +19,18 @@ public function indexManualPayment(cekDenda $cekDenda, GenerateMonthlyBill $gene
$penalty = $cekDenda->applyPenalty();
$bill = $generateMonthlyBill->generateAutoBill();
$paymentType = PaymentType::pluck('payment_type');
$nominal = PaymentType::pluck('nominal');
$paymentPenalties = DetailPayment::with('paymentType')
->get()
->pluck('penalty', 'type_id');
$santri = Santri::with([
'payments.detailPayments.paymentType',
'user'
])->get();
// $santri = Payment::with('detailPayments')->get();
// dd($santri);
return Inertia::render('list-admin/payment/ManualPayment', [
'santri' => $santri,
'penalty' => $penalty,
@ -35,11 +40,30 @@ public function indexManualPayment(cekDenda $cekDenda, GenerateMonthlyBill $gene
'nama' => 'text',
'status_santri' => 'text',
'role_santri' => 'text',
'total_penalty' => 'text',
'amount' => 'text',
// 'total_penalty' => 'text',
// 'amount_payment' => 'text',
// 'nominal' => 'text',
// 'payment_type' => 'select',
],
'options' => [
'payment_type' => $paymentType,
'payment_nominal' => $nominal,
'payment_penalty' => $paymentPenalties
]
]);
}
public function manualPayment() {}
public function manualPayment(Request $request, $id)
{
$request->validate([
'amount' => 'required',
'penalty' => 'nullable'
], [
'amount.required' => 'wajib mengisi nominal pembayaran',
]);
try {
} catch (Exception $e) {
}
}
}

View File

@ -14,7 +14,7 @@ public function up(): void
Schema::create('payment_types', function (Blueprint $table) {
$table->id();
$table->string('payment_type');
$table->float('amount');
$table->float('nominal');
$table->timestamps();
});
}

View File

@ -14,7 +14,7 @@ public function up(): void
Schema::create('payments', function (Blueprint $table) {
$table->id();
$table->enum('payment_status', ['pending', 'failed', 'success']);
$table->float('amount_payment');
$table->float('amount_payment')->nullable();
$table->String('bank')->nullable();
$table->string('no_va')->nullable();
$table->dateTime('expired_at')->nullable();

View File

@ -4,9 +4,13 @@ import React, { useState, useEffect } from "react";
const ModalInput = ({ fields, tableName, options, initialData, onClose }) => {
const [formData, setFormData] = useState({});
const [errors, setErrors] = useState({});
const [selectedPayments, setSelectedPayments] = useState([]);
const [paymentDetails, setPaymentDetails] = useState({});
useEffect(() => {
setFormData(initialData || {})
setFormData(initialData || {});
setSelectedPayments([]);
setPaymentDetails({});
}, [initialData]);
const handleChange = (e) => {
@ -17,41 +21,75 @@ const ModalInput = ({ fields, tableName, options, initialData, onClose }) => {
}
};
const handleSubmit = (e) => {
e.preventDefault()
// console.log("tableName:", tableName);
const handlePaymentChange = (e) => {
const value = e.target.value;
if (!selectedPayments.includes(value)) {
setSelectedPayments([...selectedPayments, value]);
const formDataObj = new FormData()
Object.keys(formData).forEach((key) => {
if (key === 'foto' && !(formData[key] instanceof File)) {
return
}
formDataObj.append(key, formData[key])
})
const nominal = options.payment_nominal?.[value] || 0;
const penalty = options.payment_penalty?.[value] || 0;
if (initialData) {
Inertia.post(`/update${tableName}/${initialData.id}`, formDataObj, {
forceFormData: true,
onError: (errors) => setErrors(errors),
onSuccess: () => {
document.getElementById('modal_input').checked = false
setFormData({})
setErrors({})
onClose({})
}
})
} else {
Inertia.post(`/add${tableName}`, formDataObj, {
forceFormData: true,
onError: (errors) => setErrors(errors),
onSuccess: () => {
document.getElementById('modal_input').checked = false
setFormData({})
setErrors({})
}
})
setPaymentDetails({
...paymentDetails,
[value]: {
range: 1,
nominal,
penalty,
amount: nominal + penalty,
},
});
}
}
};
const handleRangeChange = (paymentType, newRange) => {
setPaymentDetails((prevDetails) => {
const validRange = newRange && !isNaN(newRange) ? Math.max(1, Number(newRange)) : 1;
const currentDetails = prevDetails[paymentType] || { nominal: 0, penalty: 0 };
const newAmount = (currentDetails.nominal + currentDetails.penalty) * validRange;
return {
...prevDetails,
[paymentType]: {
...currentDetails,
range: validRange,
amount: newAmount, // Pastikan amount diperbarui
},
};
});
};
const handleRemovePayment = (paymentType) => {
setSelectedPayments(selectedPayments.filter((p) => p !== paymentType));
const newDetails = { ...paymentDetails };
delete newDetails[paymentType];
setPaymentDetails(newDetails);
};
const handleSubmit = (e) => {
e.preventDefault();
const formDataObj = new FormData();
Object.entries(formData).forEach(([key, value]) => {
if (key === 'foto' && !(value instanceof File)) return;
formDataObj.append(key, value);
});
formDataObj.append("payments", JSON.stringify(paymentDetails));
const url = initialData ? `/update${tableName}/${initialData.id}` : `/add${tableName}`;
Inertia.post(url, formDataObj, {
forceFormData: true,
onError: (errors) => setErrors(errors),
onSuccess: () => {
document.getElementById("modal_input").checked = false;
setFormData({});
setErrors({});
if (onClose) onClose({});
},
});
};
return (
<div>
@ -102,7 +140,73 @@ const ModalInput = ({ fields, tableName, options, initialData, onClose }) => {
</div>
))}
<button type="submit" className="btn btn-secondary">
<div className="mb-2">
<label className="input input-bordered input-secondary flex items-center gap-2">
Payment Type
<select onChange={handlePaymentChange} className="select select-bordered w-full select-secondary">
<option disabled value="">Pilih Payment Type</option>
{options.payment_type &&
Object.entries(options.payment_type).map(([key, value]) => (
<option key={key} value={key}>{value}</option>
))}
</select>
</label>
</div>
{selectedPayments.map((paymentType) => (
<div key={paymentType} className="mb-2 border p-2 rounded relative">
<button
type="button"
onClick={() => handleRemovePayment(paymentType)}
className="absolute top-0 right-0 bg-red-500 text-white px-2 py-1 rounded-full text-xs"
>
X
</button>
<div className="mb-2">
<label className="input input-bordered input-secondary flex items-center gap-2">
{options.payment_type[paymentType]} - Range Bulan
<input
type="number"
min="1"
value={paymentDetails[paymentType].range}
onChange={(e) => handleRangeChange(paymentType, parseInt(e.target.value))}
className="grow border-none focus:ring-0"
/>
</label>
</div>
<div className="mb-2">
<label className="input input-bordered input-secondary flex items-center gap-2">
Nominal
<input type="text" value={paymentDetails[paymentType].nominal} readOnly className="grow border-none focus:ring-0 bg-gray-100" />
</label>
</div>
<div className="mb-2">
<label className="input input-bordered input-secondary flex items-center gap-2">
Penalty
<input type="text" value={paymentDetails[paymentType].penalty} readOnly className="grow border-none focus:ring-0 bg-gray-100" />
</label>
</div>
</div>
))}
<div className="mb-2">
<label className="input input-bordered input-secondary flex items-center gap-2">
Total Amount
<input
type="text"
value={Object.values(paymentDetails).reduce((sum, p) => sum + (p.amount || 0), 0)}
readOnly
className="grow border-none focus:ring-0 bg-gray-100"
/>
</label>
</div>
<button type="submit" className="btn btn-secondary w-full mt-3">
{initialData ? "Simpan Perubahan" : "Tambah Data"}
</button>
</form>

View File

@ -2,12 +2,12 @@ import React, { useState } from 'react';
import { Head } from '@inertiajs/react';
import ModalInput from '@/Components/ModalInput';
export default function ManualPayment({ santri, penalty, bill, fields }) {
export default function ManualPayment({ santri, penalty, bill, fields, options }) {
const [selectedSantri, setSelectedSantri] = useState(null);
return (
<div className='text-red-500'>
<Head title="Manual Payment" />
<ModalInput fields={fields} tableName={['payments', 'detail_payments']} initialData={selectedSantri} onClose={() => setSelectedSantri(null)} />
<ModalInput fields={fields} options={options} tableName={['payments', 'detail_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>