update dashboard view

2025-04-23 17:00:02 +07:00
parent 0ea561aebc
commit 7db3e72476
4 changed files with 297 additions and 77 deletions
--- a/src/pages/dashboards/home/blocks/TransactionValue.tsx
+++ b/src/pages/dashboards/home/blocks/TransactionValue.tsx
@ -0,0 +1,103 @@
+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 = "";
+
+            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"
+            }
+
+            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;
+                default:
+                    type = "Unknown"; 
+                    break;
+            }
+
+            transactionData.push({
+                label: type,
+                value: responseTransactionValue?.data[i].total_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-full max-w-md mt-5">
+            <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>
+                            </div>
+                        </div>
+                        <span className="w-14 text-right text-sm text-gray-700">{item.value}{item.unit}</span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default TransactionValue;