TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard view done

Browse Source
This commit is contained in:
wayanrivan
2025-04-24 11:12:00 +07:00
parent fd251919b3
commit 552d1de84c
5 changed files with 250 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/dashboards/home/blocks/TransactionValue.tsx
View File

@ -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>
);
};