110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
import { Container, DataGridInner } from '@/components';
|
|
import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
|
|
import { Breadcrumbs, Link } from '@mui/material';
|
|
import { Helmet } from 'react-helmet';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useState } from 'react';
|
|
import { useCallApi } from '@/hooks';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import { toast } from 'sonner';
|
|
|
|
const TransactionDisbursement = () => {
|
|
const [form, setForm] = useState({
|
|
customerId: '',
|
|
amount: '',
|
|
pin: ''
|
|
});
|
|
const { GetData, PostData } = useCallApi();
|
|
const API_URL = apiConfig.transaction;
|
|
|
|
const handleSubmit = async (e: any) => {
|
|
e.preventDefault();
|
|
console.log('Submitted Data:', form);
|
|
if (form.amount == '' || form.customerId == '' || form.pin == '') {
|
|
toast.warning('Please fill in all required fields.')
|
|
return
|
|
}
|
|
try {
|
|
// let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
|
|
// amount: form.topupAmount,
|
|
// pin: form.pin
|
|
// })
|
|
// console.log(requestTopup)
|
|
// if (requestTopup?.status == true) {
|
|
// toast.success('Success Request Topup')
|
|
// } else {
|
|
// toast.warning(`${requestTopup?.message}`)
|
|
// }
|
|
toast.warning('Failed')
|
|
} catch (error) {
|
|
toast.warning('Failed')
|
|
}
|
|
// TODO: Kirim ke backend atau proses lainnya
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<title>TPAY | Transaction Disbursement Saldo</title>
|
|
</Helmet>
|
|
<TransactionDisbursementProvider>
|
|
<Container className="mb-7">
|
|
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
|
|
<Breadcrumbs sx={{ mb: 2 }}>
|
|
<Link underline="none" color="inherit" href="/">
|
|
<span className="text-sm hover:underline">Dashboard</span>
|
|
</Link>
|
|
<Link underline="none" color="inherit">
|
|
<span className="text-sm">Transaction</span>
|
|
</Link>
|
|
<Link underline="none" color="inherit">
|
|
<span className="text-sm">Disbursement Saldo</span>
|
|
</Link>
|
|
</Breadcrumbs>
|
|
<Container className="flex items-center justify-center">
|
|
<div className="card max-w-[750px] w-full">
|
|
<div className="card-body p-10">
|
|
{/* form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="customerId">Customer ID</label><span className="text-red-500">*</span>
|
|
<Input
|
|
id="customerId"
|
|
value={form.customerId}
|
|
onChange={(e) => setForm({ ...form, customerId: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
|
|
<Input
|
|
id="amount"
|
|
type="number"
|
|
value={form.amount}
|
|
onChange={(e) => setForm({ ...form, amount: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
|
|
<Input
|
|
id="pin"
|
|
type="password"
|
|
value={form.pin}
|
|
onChange={(e) => setForm({ ...form, pin: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Button type="submit">Submit</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Container>
|
|
</TransactionDisbursementProvider>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionDisbursement;
|