117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { apiConfig } from '@/config/api.config';
|
|
import { useCallApi } from '@/hooks';
|
|
|
|
const API_URL = apiConfig.api_dashboard;
|
|
|
|
interface Props {
|
|
startdate: string;
|
|
enddate: string;
|
|
}
|
|
|
|
const TransactionValue = ({ startdate, enddate }: Props) => {
|
|
const { GetData } = useCallApi();
|
|
const [responseTransactionValue, setResponseTransactionValue] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchDataTransactionValue = async () => {
|
|
try {
|
|
const res = await GetData(`${API_URL}/transaction-value`, {
|
|
date_from: startdate,
|
|
date_to: enddate,
|
|
});
|
|
setResponseTransactionValue(res);
|
|
} catch (error) {
|
|
console.error('Error fetching transaction value:', error);
|
|
}
|
|
};
|
|
|
|
fetchDataTransactionValue();
|
|
}, [startdate, enddate, GetData]);
|
|
|
|
let transactionData: any[] = [];
|
|
if (responseTransactionValue?.data?.length > 0) {
|
|
for (let i = 0; i < responseTransactionValue.data.length; i++) {
|
|
let type = "";
|
|
let unit = "";
|
|
|
|
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) {
|
|
case "P":
|
|
type = "Purchase";
|
|
break;
|
|
case "T":
|
|
type = "Transfer";
|
|
break;
|
|
case "U":
|
|
type = "Top Up";
|
|
break;
|
|
case "W":
|
|
type = "Withdraw";
|
|
break;
|
|
case "R":
|
|
type = "Return";
|
|
break;
|
|
case "N":
|
|
type = "Top Up Partner";
|
|
break;
|
|
case "E":
|
|
type = "Reward";
|
|
break;
|
|
default:
|
|
type = "Unknown";
|
|
break;
|
|
}
|
|
|
|
transactionData.push({
|
|
label: type,
|
|
value: amount,
|
|
unit: unit
|
|
});
|
|
}
|
|
}
|
|
|
|
const maxValue = transactionData.length > 0 ? Math.max(...transactionData.map(item => item.value)) : 1;
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow p-6 w-1/3">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-800">Transaction Value</h2>
|
|
</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>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-sm text-gray-500 mt-4">
|
|
No Data Available
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TransactionValue;
|