Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard
This commit is contained in:
unknown
@ -75,6 +75,7 @@
|
||||
"react-query": "^3.39.3",
|
||||
"react-router": "^6.28.0",
|
||||
"react-router-dom": "^6.28.0",
|
||||
"recharts": "^2.15.3",
|
||||
"sonner": "^1.7.0",
|
||||
"styled-components": "^6.1.13",
|
||||
"stylis": "^4.3.4",
|
||||
|
||||
@ -21,6 +21,8 @@ import { getAuth } from '@/auth';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import TransactionValue from './blocks/TransactionValue';
|
||||
import TransactionPieChart from './blocks/TransactionPieChart';
|
||||
import MemberActivity from './blocks/MemberActivity';
|
||||
|
||||
// sum -> nominal, count-> total
|
||||
type CountType = 'sum' | 'count';
|
||||
@ -339,10 +341,11 @@ const DashboardHomePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TransactionValue
|
||||
startdate={fromDate.toISOString()} // Invoke the toISOString method
|
||||
enddate={toDate.toISOString()} // Invoke the toISOString method
|
||||
/>
|
||||
<div className="flex space-x-4 mt-5">
|
||||
<TransactionValue startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
|
||||
<TransactionPieChart startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
|
||||
<MemberActivity startdate={fromDate.toISOString()} enddate={toDate.toISOString()} />
|
||||
</div>
|
||||
|
||||
</Container>
|
||||
</>
|
||||
|
||||
114
src/pages/dashboards/home/blocks/MemberActivity.tsx
Normal file
114
src/pages/dashboards/home/blocks/MemberActivity.tsx
Normal file
@ -0,0 +1,114 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { UsersIcon, UserCheckIcon } from "lucide-react";
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
|
||||
const API_URL = apiConfig.api_dashboard;
|
||||
|
||||
interface Props {
|
||||
startdate: string;
|
||||
enddate: string;
|
||||
}
|
||||
|
||||
const MemberActivity = ({ startdate, enddate }: Props) => {
|
||||
const { GetData } = useCallApi();
|
||||
const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDataTransactionValue = async () => {
|
||||
try {
|
||||
const res = await GetData(`${API_URL}/active-user`, {
|
||||
date_from: startdate,
|
||||
date_to: enddate,
|
||||
});
|
||||
setResponseTransactionValue(res);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction value:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDataTransactionValue();
|
||||
}, [startdate, enddate, GetData]);
|
||||
|
||||
const percentage = parseFloat((responseTransactionValue?.data?.total_customer_active_percentage ?? 0).toFixed(2)) ?? 0;
|
||||
const totalCustomer = responseTransactionValue?.data?.total_customer ?? 0;
|
||||
const activeCustomer = responseTransactionValue?.data?.total_customer_active ?? 0;
|
||||
|
||||
// Hitung sudut pointer
|
||||
const angle = (percentage / 100) * 180; // 0° (kiri) ke 180° (kanan)
|
||||
const radians = (angle * Math.PI) / 180;
|
||||
const radius = 40; // Radius dari setengah lingkaran
|
||||
const center = 50; // Titik pusat lingkaran
|
||||
const pointerLength = 25; // Panjang pointer
|
||||
|
||||
const x = center + pointerLength * Math.cos(radians - Math.PI); // offset agar mulai dari kiri
|
||||
const y = center + pointerLength * Math.sin(radians - Math.PI);
|
||||
|
||||
// Hitung titik akhir untuk arc aktif
|
||||
const arcAngle = (Math.PI * percentage) / 100;
|
||||
const arcX = 50 + radius * Math.cos(Math.PI - arcAngle);
|
||||
const arcY = 50 - radius * Math.sin(arcAngle);
|
||||
|
||||
return (
|
||||
<div className="p-6 bg-white rounded-lg shadow-md w-full max-w-xl">
|
||||
<div className="flex justify-between items-center pb-3 mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-700">Member Activity</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
{/* Sidebar */}
|
||||
<ul className="space-y-4 w-1/2 text-gray-700 text-sm">
|
||||
<li className="flex items-center gap-2">
|
||||
<UsersIcon className="w-4 h-4" />
|
||||
<span>Total Customer: {totalCustomer}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<UserCheckIcon className="w-4 h-4" />
|
||||
<span>Active Customer: {activeCustomer}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Gauge Chart */}
|
||||
<div className="w-1/2">
|
||||
<div className="border border-gray-200 rounded-md p-4 text-center">
|
||||
<h3 className="text-sm text-gray-600 font-medium mb-2">Active User</h3>
|
||||
<div className="relative h-24 w-full">
|
||||
<svg className="w-full h-full" viewBox="0 0 100 50">
|
||||
{/* Background arc */}
|
||||
<path
|
||||
d="M 10 50 A 40 40 0 0 1 90 50"
|
||||
fill="none"
|
||||
stroke="#e5e7eb"
|
||||
strokeWidth="10"
|
||||
/>
|
||||
{/* Active arc */}
|
||||
<path
|
||||
d={`M 10 50 A 40 40 0 ${percentage > 50 ? 1 : 0} 1 ${arcX} ${arcY}`}
|
||||
fill="none"
|
||||
stroke="#34d399"
|
||||
strokeWidth="10"
|
||||
/>
|
||||
{/* Pointer */}
|
||||
<line
|
||||
x1="50"
|
||||
y1="50"
|
||||
x2={x}
|
||||
y2={y}
|
||||
stroke="#111827"
|
||||
strokeWidth="4"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex justify-between text-xs text-gray-500 px-1">
|
||||
<span>{percentage}%</span>
|
||||
<span>100%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemberActivity;
|
||||
89
src/pages/dashboards/home/blocks/TransactionPieChart.tsx
Normal file
89
src/pages/dashboards/home/blocks/TransactionPieChart.tsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useCallApi } from '@/hooks';
|
||||
|
||||
const API_URL = apiConfig.api_dashboard;
|
||||
|
||||
interface Props {
|
||||
startdate: string;
|
||||
enddate: string;
|
||||
}
|
||||
|
||||
const TransactionPieChart = ({ startdate, enddate }: Props) => {
|
||||
|
||||
const { GetData } = useCallApi();
|
||||
const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchDataTransactionValue = async () => {
|
||||
try {
|
||||
const res = await GetData(`${API_URL}/transaction-chart`, {
|
||||
date_from: startdate,
|
||||
date_to: enddate,
|
||||
});
|
||||
setResponseTransactionValue(res);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction value:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchDataTransactionValue();
|
||||
}, [startdate, enddate, GetData]);
|
||||
|
||||
const data = [
|
||||
{ name: 'Transfer', value: parseFloat((responseTransactionValue?.data?.T ?? 0).toFixed(2)), color: '#3490dc' },
|
||||
{ name: 'Return', value: parseFloat((responseTransactionValue?.data?.R ?? 0).toFixed(2)), color: '#a0aec0' },
|
||||
{ name: 'Topup', value: parseFloat((responseTransactionValue?.data?.U ?? 0).toFixed(2)), color: '#9f7aea' },
|
||||
{ name: 'Purchase', value: parseFloat((responseTransactionValue?.data?.P ?? 0).toFixed(2)), color: '#baf7c5' },
|
||||
{ name: 'Withdraw', value: parseFloat((responseTransactionValue?.data?.W ?? 0).toFixed(2)), color: '#f56565' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-md p-6 w-full max-w-md">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-700">Transaction Chart</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="w-40 h-40">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
innerRadius={40}
|
||||
outerRadius={60}
|
||||
paddingAngle={3}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
<div className="text-sm space-y-2">
|
||||
<div className="font-semibold text-gray-500">Active Transaction</div>
|
||||
{data.map((entry, index) => (
|
||||
<div key={index} className="flex items-center justify-between w-48">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: entry.color }}></div>
|
||||
<span className="text-gray-700">{entry.name}</span>
|
||||
</div>
|
||||
<span className="text-gray-700">{entry.value}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TransactionPieChart;
|
||||
@ -10,7 +10,7 @@ interface Props {
|
||||
}
|
||||
|
||||
const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
const { GetData } = useCallApi();
|
||||
const { GetData } = useCallApi();
|
||||
const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@ -30,21 +30,22 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
}, [startdate, enddate, GetData]);
|
||||
|
||||
let transactionData: any[] = [];
|
||||
if (responseTransactionValue?.data.length > 0) {
|
||||
for (let i = 0; i < responseTransactionValue?.data.length; i++) {
|
||||
let type = "";
|
||||
if (responseTransactionValue?.data?.length > 0) {
|
||||
for (let i = 0; i < responseTransactionValue.data.length; i++) {
|
||||
let type = "";
|
||||
let unit = "";
|
||||
|
||||
if(responseTransactionValue?.data[i].total_amount>=1000 && responseTransactionValue?.data[i].total_amount<1000000){
|
||||
unit = "K"
|
||||
}else if(responseTransactionValue?.data[i].total_amount>=1000000 && responseTransactionValue?.data[i].total_amount<1000000000){
|
||||
unit = "M"
|
||||
}
|
||||
else if(responseTransactionValue?.data[i].total_amount>=1000000000){
|
||||
unit = "B"
|
||||
const amount = responseTransactionValue.data[i].total_amount;
|
||||
|
||||
if (amount >= 1000 && amount < 1000000) {
|
||||
unit = "K";
|
||||
} else if (amount >= 1000000 && amount < 1000000000) {
|
||||
unit = "M";
|
||||
} else if (amount >= 1000000000) {
|
||||
unit = "B";
|
||||
}
|
||||
|
||||
switch (responseTransactionValue?.data[i].kind) {
|
||||
switch (responseTransactionValue.data[i].kind) {
|
||||
case "P":
|
||||
type = "Purchase";
|
||||
break;
|
||||
@ -61,13 +62,13 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
type = "Return";
|
||||
break;
|
||||
default:
|
||||
type = "Unknown";
|
||||
type = "Unknown";
|
||||
break;
|
||||
}
|
||||
|
||||
transactionData.push({
|
||||
label: type,
|
||||
value: responseTransactionValue?.data[i].total_amount,
|
||||
value: amount,
|
||||
unit: unit
|
||||
});
|
||||
}
|
||||
@ -76,26 +77,32 @@ const TransactionValue = ({ startdate, enddate }: Props) => {
|
||||
const maxValue = transactionData.length > 0 ? Math.max(...transactionData.map(item => item.value)) : 1;
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl shadow p-6 w-full max-w-md mt-5">
|
||||
<div className="bg-white rounded-xl shadow p-6 w-full max-w-md">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-semibold text-gray-800">Transaction Value</h2>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{transactionData.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<span className="w-24 text-sm text-gray-700">{item.label}</span>
|
||||
<div className="flex-1 mx-2">
|
||||
<div className="w-full h-3 bg-gray-200 rounded-full">
|
||||
<div
|
||||
className="h-3 bg-teal-500 rounded-full"
|
||||
style={{ width: `${(item.value / maxValue) * 100}%` }}
|
||||
></div>
|
||||
{transactionData.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{transactionData.map((item, index) => (
|
||||
<div key={index} className="flex items-center justify-between">
|
||||
<span className="w-24 text-sm text-gray-700">{item.label}</span>
|
||||
<div className="flex-1 mx-2">
|
||||
<div className="w-full h-3 bg-gray-200 rounded-full">
|
||||
<div
|
||||
className="h-3 bg-teal-500 rounded-full"
|
||||
style={{ width: `${(item.value / maxValue) * 100}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="w-14 text-right text-sm text-gray-700">{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(item.value)}{item.unit}</span>
|
||||
</div>
|
||||
<span className="w-14 text-right text-sm text-gray-700">{item.value}{item.unit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-sm text-gray-500 mt-4">
|
||||
No Data Available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -248,7 +248,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
limit,
|
||||
page: page + 1,
|
||||
with_deleted: false,
|
||||
order_field: "id",
|
||||
order_field: "execution_date",
|
||||
order_direction: 'DESC',
|
||||
filter: JSON.stringify(formattedFilter)
|
||||
});
|
||||
@ -286,7 +286,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
pagination={{ size: 10 }}
|
||||
toolbar={<ListToolbar />}
|
||||
layout={{ card: true }}
|
||||
sorting={[{ id: 'id', desc: false }]}
|
||||
sorting={[{ id: 'execution_date', desc: false }]}
|
||||
serverSide={true}
|
||||
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
|
||||
getTransactionLists(pageIndex, pageSize, sorting, columnFilters)
|
||||
|
||||
@ -137,16 +137,16 @@ const ManageConversionContextProvider = ({ children }: { children: React.ReactNo
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
{/* <button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row.ID)}
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button>
|
||||
</button> */}
|
||||
</>
|
||||
);
|
||||
},
|
||||
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
|
||||
meta: { headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' }
|
||||
}
|
||||
],
|
||||
[handleEditDialog, handleDeleteDialog]
|
||||
|
||||
@ -124,16 +124,16 @@ const ManageCurrencyContextProvider = ({ children }: { children: React.ReactNode
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
{/* <button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row.ID)}
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button>
|
||||
</button> */}
|
||||
</>
|
||||
);
|
||||
},
|
||||
meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' }
|
||||
meta: { headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' }
|
||||
}
|
||||
],
|
||||
[handleEditDialog, handleDeleteDialog]
|
||||
|
||||
@ -192,17 +192,17 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
|
||||
>
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</button>
|
||||
<button
|
||||
{/* <button
|
||||
className="btn btn-sm btn-icon btn-clear btn-light"
|
||||
onClick={() => handleDeleteDialog(true, row)}
|
||||
>
|
||||
<KeenIcon icon="trash" />
|
||||
</button>
|
||||
</button> */}
|
||||
</>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName: 'w-[100px]',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
cellClassName: 'text-center'
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,6 +209,15 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.msisdn,
|
||||
id: 'msdisdn',
|
||||
header: ({ column }) => <DataGridColumnHeader title="Phone Number" column={column} />,
|
||||
enableSorting: true,
|
||||
meta: {
|
||||
headerClassName: 'w-[350px]'
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.registered_email,
|
||||
id: 'email',
|
||||
|
||||
@ -70,6 +70,20 @@ export const getColumns = (handleUpdate: (data: any) => void): ColumnDef<Members
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'msisdn',
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
>
|
||||
Phone Number
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'group_name',
|
||||
header: ({ column }) => {
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@ -26,7 +27,7 @@ const API_URL = apiConfig.transaction;
|
||||
|
||||
const ApprovalDialog = () => {
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const { reload } = useDataGrid();
|
||||
const { reload } = useDataGrid();
|
||||
|
||||
const {
|
||||
showApprovalDialog,
|
||||
@ -40,6 +41,7 @@ const ApprovalDialog = () => {
|
||||
transaction_code: '',
|
||||
status: '',
|
||||
notes: '',
|
||||
pin: ''
|
||||
});
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -63,8 +65,9 @@ const ApprovalDialog = () => {
|
||||
|
||||
const response = await PostData(`${API_URL}/transaction/set-approval`, {
|
||||
id_transaction: transactionDetails.id,
|
||||
status: formField.status,
|
||||
notes: formField.notes,
|
||||
status: formField.status,
|
||||
pin: formField.pin,
|
||||
});
|
||||
|
||||
if (response?.status === false) {
|
||||
@ -97,8 +100,9 @@ const ApprovalDialog = () => {
|
||||
if (showApprovalDialog) {
|
||||
setFormField({
|
||||
transaction_code: '',
|
||||
status: '',
|
||||
notes: '',
|
||||
status: '',
|
||||
pin:''
|
||||
});
|
||||
setTransactionDetails(null);
|
||||
setAlert({ show: false, message: '' });
|
||||
@ -142,6 +146,7 @@ const ApprovalDialog = () => {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Approval Transaction</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogBody>
|
||||
<form onSubmit={doApproval}>
|
||||
<div className="card-body grid gap-5 p-0">
|
||||
@ -165,6 +170,26 @@ const ApprovalDialog = () => {
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3">
|
||||
|
||||
<label className="form-label max-w-56">PIN</label>
|
||||
<div className="grow">
|
||||
<Input
|
||||
required
|
||||
type="password"
|
||||
placeholder="PIN"
|
||||
name="pin"
|
||||
id="pin"
|
||||
value={formField.pin}
|
||||
onChange={(e) =>
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
pin: e.target.value,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{formField.status === 'N' && (
|
||||
<div className="flex items-center flex-wrap gap-2.5 mt-4">
|
||||
|
||||
@ -58,6 +58,7 @@ const DetailApprovalTransaction = () => {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Transaction Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogBody>
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
|
||||
@ -1,31 +1,86 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { Alert, 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 ,useEffect } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { toast } from 'sonner';
|
||||
import { getAuth } from '@/auth';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
|
||||
const TransactionDisbursement = () => {
|
||||
const [form, setForm] = useState({
|
||||
const initialForm: {
|
||||
msisdn: string;
|
||||
amount: string;
|
||||
pin: string;
|
||||
} = {
|
||||
msisdn: '',
|
||||
amount: '',
|
||||
pin: ''
|
||||
});
|
||||
};
|
||||
|
||||
const [form, setForm] = useState(initialForm);
|
||||
const [wallets, setWallets] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [customerMsisdn, setCustomerMsisdn] = useState<{ value: string; label: string }[]>([]);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
const parsedUser = getAuth()?.user;
|
||||
const API_URL = apiConfig.transaction;
|
||||
const API_URL_WALLET = apiConfig.service_wallet
|
||||
const API_URL_WALLET = apiConfig.service_wallet;
|
||||
const API_URL_CUSTOMER = apiConfig.service_customer;
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
|
||||
const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
|
||||
const filter: any =
|
||||
filterValue.trim().length === 0 ? {} : { msisdn: { like: `%${filterValue}%` } };
|
||||
|
||||
const query: any = {
|
||||
limit: 25,
|
||||
page: 1,
|
||||
with_deleted: false,
|
||||
order_field: sorting[0].id,
|
||||
order_direction: sorting[0].desc ? 'DESC' : 'ASC'
|
||||
};
|
||||
|
||||
if (filter && Object.keys(filter).length > 0) {
|
||||
query.filter = JSON.stringify(filter);
|
||||
// query.page = page + 1;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
|
||||
setCustomerMsisdn(
|
||||
response?.data.list.map((item: any) => ({
|
||||
value: item.msisdn,
|
||||
label: `${item.msisdn} - ${item.fullname}`
|
||||
}))
|
||||
);
|
||||
} catch (error) {
|
||||
toast.error('Failed to fetch customer msisdn');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
@ -37,32 +92,84 @@ const TransactionDisbursement = () => {
|
||||
};
|
||||
|
||||
fetchWallets();
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
|
||||
|
||||
const handleClickOutside = (event: any) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log('Submitted Data:', form);
|
||||
if (form.amount == '' || form.msisdn == '' || form.pin == '') {
|
||||
toast.warning('Please fill in all required fields.')
|
||||
return
|
||||
}
|
||||
const doPostData = async (form: typeof initialForm) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
let requestTopup = await PostData(`${API_URL}/transaction/topup-downline`, {
|
||||
let response = await PostData(`${API_URL}/transaction/topup-downline`, {
|
||||
msisdn_destination: form.msisdn,
|
||||
amount: form.amount,
|
||||
pin: form.pin
|
||||
})
|
||||
if (requestTopup?.status == true) {
|
||||
toast.success('Success Request Topup')
|
||||
});
|
||||
if (response?.status == true) {
|
||||
toast.success('Success Request Topup');
|
||||
} else {
|
||||
toast.warning(`${requestTopup?.message}`)
|
||||
toast.error(`${response?.message?.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed')
|
||||
} catch (error: any) {
|
||||
const errorMessage =
|
||||
error?.response?.data?.message || error?.message || 'Something went wrong';
|
||||
toast.error(errorMessage);
|
||||
setAlert({ show: true, message: errorMessage });
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setShowConfirmation(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (form.amount == '' || form.msisdn == '' || form.pin == '') {
|
||||
setAlert({
|
||||
show: true,
|
||||
message: 'Please fill in all required fields.'
|
||||
});
|
||||
return;
|
||||
}
|
||||
setAlert({ show: false, message: '' });
|
||||
setShowConfirmation(true);
|
||||
// TODO: Kirim ke backend atau proses lainnya
|
||||
};
|
||||
|
||||
const handleCancelSubmit = () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
|
||||
const handleMsisdnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIsLoading(true);
|
||||
setSearchTerm(e.target.value);
|
||||
setDropdownOpen(true);
|
||||
const timer = setTimeout(() => {
|
||||
fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], e.target.value);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
};
|
||||
|
||||
const handleMsisdnSelect = (msisdn: string) => {
|
||||
setForm({ ...form, msisdn });
|
||||
setDropdownOpen(false);
|
||||
setSearchTerm(msisdn);
|
||||
};
|
||||
|
||||
const filteredMsisdn = customerMsisdn
|
||||
.filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
.slice(0, 10);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@ -70,7 +177,9 @@ const TransactionDisbursement = () => {
|
||||
</Helmet>
|
||||
<TransactionDisbursementProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</h1>
|
||||
<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>
|
||||
@ -90,51 +199,121 @@ const TransactionDisbursement = () => {
|
||||
<div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
|
||||
<p className="text-sm text-gray-500">{wallet.wallet}</p>
|
||||
<p className="text-lg font-semibold text-green-600">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
|
||||
wallet.amount
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Container className="flex items-center justify-center">
|
||||
<div className="card max-w-[750px] w-full">
|
||||
<div className="card-body p-10">
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
{/* form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="msisdn">Destination MSISDN</label><span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="msisdn"
|
||||
type="number"
|
||||
value={form.msisdn}
|
||||
onChange={(e) => setForm({ ...form, msisdn: 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>
|
||||
<form onSubmit={handleSubmit} className="space-y-6 mt-5">
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<label htmlFor="msisdn">MSISDN (Phone Number)</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="msisdn"
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={handleMsisdnSearch}
|
||||
placeholder="Search MSISDN"
|
||||
onClick={() => setDropdownOpen(true)}
|
||||
/>
|
||||
{dropdownOpen && (
|
||||
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
|
||||
{filteredMsisdn.length > 0 ? (
|
||||
filteredMsisdn.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => handleMsisdnSelect(item.value)}
|
||||
>
|
||||
{item.label}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-2 text-gray-500">
|
||||
{isLoading ? 'Loading...' : 'No results found'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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="button" onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
{showConfirmation && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
|
||||
<p className="mb-6">
|
||||
Are you sure you want to disbursement saldo of{' '}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
|
||||
Number(form.amount)
|
||||
)}{' '}
|
||||
</span>
|
||||
?
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancelSubmit}
|
||||
className="border-gray-300 text-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => doPostData(form)} disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
|
||||
) : (
|
||||
'Confirm'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</TransactionDisbursementProvider>
|
||||
</>
|
||||
|
||||
@ -45,6 +45,8 @@ const DetailTransaction = () => {
|
||||
id: selectedTransactionId
|
||||
});
|
||||
setTransactionDetails(response?.data);
|
||||
console.log(response?.data);
|
||||
console.log(selectedTransactionId);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
}
|
||||
@ -72,6 +74,7 @@ const DetailTransaction = () => {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Transaction Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogDescription></DialogDescription>
|
||||
<DialogBody>
|
||||
{/* Tabs Navigation */}
|
||||
<div className="flex border-b border-gray-200">
|
||||
@ -207,7 +210,7 @@ const DetailTransaction = () => {
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Description</p>
|
||||
<p className="font-medium">{transactionDetails?.description}</p>
|
||||
<p className="font-medium">{transactionDetails?.description || '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Name</p>
|
||||
|
||||
@ -1,31 +1,46 @@
|
||||
import { Container, DataGridInner } from '@/components';
|
||||
import { Alert, Container, DataGridInner } from '@/components';
|
||||
import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
|
||||
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, useEffect } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { toast } from 'sonner';
|
||||
import { getAuth } from '@/auth';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
|
||||
const TransactionTopup = () => {
|
||||
const [form, setForm] = useState({
|
||||
const initialState: {
|
||||
topupAmount: string;
|
||||
pin: string;
|
||||
} = {
|
||||
topupAmount: '',
|
||||
pin: ''
|
||||
};
|
||||
|
||||
const [form, setForm] = useState(initialState);
|
||||
const [alert, setAlert] = useState({
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
|
||||
const [wallets, setWallets] = useState([]);
|
||||
const { GetData, PostData } = useCallApi();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
const parsedUser = getAuth()?.user;
|
||||
const API_URL = apiConfig.transaction;
|
||||
const API_URL_WALLET = apiConfig.service_wallet
|
||||
const API_URL_WALLET = apiConfig.service_wallet;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchWallets = async () => {
|
||||
try {
|
||||
const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
|
||||
const response = await GetData(
|
||||
`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`,
|
||||
{}
|
||||
);
|
||||
if (response?.status === true) {
|
||||
setWallets(response.data || []);
|
||||
} else {
|
||||
@ -39,30 +54,49 @@ const TransactionTopup = () => {
|
||||
fetchWallets();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
console.log('Submitted Data:', form);
|
||||
const doPostData = async (form: typeof initialState) => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (form.pin == '' || form.topupAmount == '') {
|
||||
toast.warning('Please fill in all required fields.')
|
||||
return
|
||||
}
|
||||
try {
|
||||
let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
|
||||
let response = await PostData(`${API_URL}/transaction/request-topup`, {
|
||||
amount: form.topupAmount,
|
||||
pin: form.pin
|
||||
})
|
||||
if (requestTopup?.status == true) {
|
||||
toast.success('Success Request Topup')
|
||||
});
|
||||
console.log(response);
|
||||
if (response?.status == true) {
|
||||
toast.success('Success Request Topup');
|
||||
} else {
|
||||
toast.warning(`${requestTopup?.message}`)
|
||||
toast.warning(`${response?.message}`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.warning('Failed')
|
||||
} catch (error: any) {
|
||||
const errorMessage =
|
||||
error?.response?.data?.message || error?.message || 'Something went wrong';
|
||||
toast.error(errorMessage);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setShowConfirmation(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// console.log('Submitted Data:', form);
|
||||
|
||||
if (form.pin == '' || form.topupAmount == '') {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
return;
|
||||
}
|
||||
|
||||
setAlert({ show: false, message: '' });
|
||||
setShowConfirmation(true);
|
||||
|
||||
// TODO: Kirim ke backend atau proses lainnya
|
||||
};
|
||||
|
||||
const handleCancelSubmit = () => {
|
||||
setShowConfirmation(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@ -70,7 +104,9 @@ const TransactionTopup = () => {
|
||||
</Helmet>
|
||||
<TransactionTopupProvider>
|
||||
<Container className="mb-7">
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</h1>
|
||||
<h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
|
||||
MANAGE TRANSACTION TOPUP REQUEST
|
||||
</h1>
|
||||
<Breadcrumbs sx={{ mb: 2 }}>
|
||||
<Link underline="none" color="inherit" href="/">
|
||||
<span className="text-sm hover:underline">Dashboard</span>
|
||||
@ -82,6 +118,7 @@ const TransactionTopup = () => {
|
||||
<span className="text-sm">Topup</span>
|
||||
</Link>
|
||||
</Breadcrumbs>
|
||||
|
||||
{/* Wallet Section */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
|
||||
@ -90,7 +127,9 @@ const TransactionTopup = () => {
|
||||
<div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
|
||||
<p className="text-sm text-gray-500">{wallet.wallet}</p>
|
||||
<p className="text-lg font-semibold text-green-600">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
|
||||
wallet.amount
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
@ -99,10 +138,16 @@ const TransactionTopup = () => {
|
||||
<Container className="flex items-center justify-center">
|
||||
<div className="card max-w-[750px] w-full">
|
||||
<div className="card-body p-10">
|
||||
{alert.show && (
|
||||
<Alert variant="danger">
|
||||
<h3>{alert.message}</h3>
|
||||
</Alert>
|
||||
)}
|
||||
{/* form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-6 mt-5">
|
||||
<div>
|
||||
<label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
|
||||
<label htmlFor="topupAmount">Topup Amount</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="topupAmount"
|
||||
type="number"
|
||||
@ -111,7 +156,8 @@ const TransactionTopup = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="pin">PIN</label><span className="text-red-500">*</span>
|
||||
<label htmlFor="pin">PIN</label>
|
||||
<span className="text-red-500">*</span>
|
||||
<Input
|
||||
id="pin"
|
||||
type="password"
|
||||
@ -120,12 +166,46 @@ const TransactionTopup = () => {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button type="submit">Submit</Button>
|
||||
<Button type="button" onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
{showConfirmation && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
|
||||
<h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
|
||||
<p className="mb-6">
|
||||
Are you sure you want to request a topup of{' '}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
|
||||
Number(form.topupAmount)
|
||||
)}{' '}
|
||||
</span>{' '}
|
||||
?
|
||||
</p>
|
||||
<div className="flex justify-end space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancelSubmit}
|
||||
className="border-gray-300 text-gray-700"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => doPostData(form)} disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
|
||||
) : (
|
||||
'Confirm'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</TransactionTopupProvider>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user