made analaytics dynamic

src/app/(dashboard)/(admin)/AdminTransactionChart.tsx

+// import React from "react";
+// import Chart from "react-apexcharts";
+// import { ApexOptions } from "apexcharts";
+// import { useGetAdminTransactionsQuery } from "@/services/dashboardApi";
+
+// export default function AdminTransactionChart() {
+//     const { data, isLoading } = useGetAdminTransactionsQuery();
+
+//     const chartOptions: ApexOptions = {
+//         chart: {
+//             type: "donut",
+//         },
+//         labels: data?.data.length ? data?.data.map((item) => item.label) : ["User Transaction", "My Settled", "My Unsettled"],
+//         colors: ["#8B5CF6", "#FACC15", "#22C55E"],
+//         legend: { show: false },
+//         dataLabels: { enabled: false },
+//         stroke: {
+//             width: 2,
+//             colors: ["#fff"],
+//         },
+//         plotOptions: {
+//             pie: {
+//                 donut: {
+//                     size: "65%",
+//                 },
+//             },
+//         },
+//     };
+
+//     const chartSeries = data?.data.length ? data?.data.map((item) => item.data) : [0, 0, 0];
+
+//     if (!data) return null;
+
+//     return (
+//         <div className="px-6 pb-6">
+//             {/* Donut Chart */}
+//             <Chart options={chartOptions} series={chartSeries} type="donut" height={280} />
+
+//             {/* Custom Legend */}
+//             <div className="grid grid-cols-3 gap-4 mt-4 text-sm">
+//                 {
+//                     data?.data.map((item) => (
+//                         <div className="flex flex-col items-start">
+//                             <span className="flex items-center gap-1">
+//                                 <span className="w-3 h-3 rounded-full inline-block bg-purple-500"></span>
+//                                 {item.label}
+//                             </span>
+//                             <strong className="text-gray-800 ">${item.data}</strong>
+//                         </div>
+//                     ))
+//                 }
+//                 <div className="flex flex-col items-center">
+//                     <span className="flex items-center gap-1">
+//                         <span className="w-3 h-3 rounded-full inline-block bg-yellow-400"></span>
+//                         My Settled
+//                     </span>
+//                     <strong className="text-gray-800">$26,894</strong>
+//                 </div>
+//                 <div className="flex flex-col items-center">
+//                     <span className="flex items-center gap-1">
+//                         <span className="w-3 h-3 rounded-full inline-block bg-green-500"></span>
+//                         My Unsettled
+//                     </span>
+//                     <strong className="text-gray-800">$13,894</strong>
+//                 </div>
+//             </div>
+//         </div>
+//     );
+// }
+"use client";
+
 import React from "react";
 import Chart from "react-apexcharts";
 import { ApexOptions } from "apexcharts";
+import { useGetAdminTransactionsQuery } from "@/services/dashboardApi";
 
 export default function AdminTransactionChart() {
+    const { data, isLoading } = useGetAdminTransactionsQuery();
+
+    const defaultLabels = ["User Transaction", "My Settled", "My Unsettled"];
+    const defaultColors = ["#8B5CF6", "#FACC15", "#22C55E"];
+
     const chartOptions: ApexOptions = {
         chart: {
             type: "donut",
         },
-        labels: ["User Transaction", "My Settled", "My Unsettled"],
-        colors: ["#8B5CF6", "#FACC15", "#22C55E"], // purple, yellow, green
-        legend: { show: false }, // hide default legend
+        labels: data?.data?.length
+            ? data.data.map((item: any) => item.label)
+            : defaultLabels,
+        colors: defaultColors,
+        legend: { show: false },
         dataLabels: { enabled: false },
         stroke: {
             width: 2,
@@ -24,36 +103,44 @@ export default function AdminTransactionChart() {
         },
     };
 
-    const chartSeries = [483569, 26894, 13894]; // sample values for 3 segments
+    const chartSeries = data?.data?.length
+        ? data.data.map((item: any) => item.data)
+        : [0, 0, 0];
+
+    if (isLoading) {
+        return <div className="px-6 py-10 text-center">Loading chart...</div>;
+    }
+
+    if (!data?.data?.length) {
+        return <div className="px-6 py-10 text-center">No transaction data found</div>;
+    }
 
     return (
         <div className="px-6 pb-6">
             {/* Donut Chart */}
-            <Chart options={chartOptions} series={chartSeries} type="donut" height={280} />
+            <Chart
+                options={chartOptions}
+                series={chartSeries}
+                type="donut"
+                height={280}
+            />
 
             {/* Custom Legend */}
             <div className="grid grid-cols-3 gap-4 mt-4 text-sm">
-                <div className="flex flex-col items-center">
-                    <span className="flex items-center gap-1">
-                        <span className="w-3 h-3 rounded-full inline-block bg-purple-500"></span>
-                        User Transaction
-                    </span>
-                    <strong className="text-gray-800">$483,569</strong>
-                </div>
-                <div className="flex flex-col items-center">
-                    <span className="flex items-center gap-1">
-                        <span className="w-3 h-3 rounded-full inline-block bg-yellow-400"></span>
-                        My Settled
-                    </span>
-                    <strong className="text-gray-800">$26,894</strong>
-                </div>
-                <div className="flex flex-col items-center">
-                    <span className="flex items-center gap-1">
-                        <span className="w-3 h-3 rounded-full inline-block bg-green-500"></span>
-                        My Unsettled
-                    </span>
-                    <strong className="text-gray-800">$13,894</strong>
-                </div>
+                {data.data.map((item: any, index: number) => (
+                    <div key={index} className="flex flex-col items-start">
+                        <span className="flex items-start gap-1 text-para-light">
+                            <span
+                                className="w-3 h-3 rounded-full inline-block mt-1 "
+                                style={{ backgroundColor: defaultColors[index] }}
+                            ></span>
+                            {item.label}
+                        </span>
+                        <strong className="text-gray-800 block mt-2">
+                            ${item.data?.toLocaleString()}
+                        </strong>
+                    </div>
+                ))}
             </div>
         </div>
     );

src/services/dashboardApi.ts

 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./baseQuery";
-import { AnalyticsResponse } from "@/types/dashboard";
+import { AdminTrasactionResponse, AnalyticsResponse } from "@/types/dashboard";
 
 export const dashboardApi = createApi({
     reducerPath: "dashboardApi",
@@ -14,7 +14,7 @@ export const dashboardApi = createApi({
             }),
             providesTags: ["Analytics"],
         }),
-        getAdminTransactions: builder.query<any, void>({
+        getAdminTransactions: builder.query<AdminTrasactionResponse, void>({
             query: () => ({
                 url: `/api/admin/dashboard/deposits`,
                 method: "GET",

src/types/dashboard.ts

@@ -16,4 +16,11 @@ export interface AnalyticsResponse {
         total_users: AnalyticsProps,
         total_withdraw: AnalyticsProps,
     }
+}
+
+export interface AdminTrasactionResponse {
+    data: {
+        label: string,
+        data: number
+    }[],
 }
\ No newline at end of file