updated the transaction page, game transaction and player transaction

src/app/(dashboard)/(admin)/players/[id]/page.tsx

 import PlayerDetailPage from '@/components/pages/dashboard/adminDashboard/players/playerDetail'
 import React from 'react'
 
-export default function PlayerDetail() {
+export default async function PlayerDetail({ params }: { params: Promise<{ id: number }> }) {
+    const { id } = await params;
     return (
-        <PlayerDetailPage />
+        <PlayerDetailPage id={id} />
     )
 }

src/app/(dashboard)/(admin)/transactions/page.tsx

+import AllTransactionsPage from '@/components/pages/dashboard/adminDashboard/transaction'
+import React from 'react'
+
+export default function AllTransactions() {
+    return (
+        <AllTransactionsPage />
+    )
+}

src/components/organism/Sidebar/AdminSidebar/index.tsx

 import { PATH } from '@/routes/PATH';
 import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
-import { Game, Notification, Paperclip2, Setting, Setting2, StatusUp, UserSearch } from '@wandersonalwes/iconsax-react'
+import { ArrowSwapHorizontal, Game, Notification, Paperclip2, Setting, Setting2, StatusUp, UserSearch } from '@wandersonalwes/iconsax-react'
 import { usePathname, useRouter } from 'next/navigation'
 import React from 'react'
 
@@ -17,7 +17,6 @@ export default function AdminMenu({ open }: { open: boolean }) {
                     ].join(" ")}
 
                     onClick={() => { router.push(PATH.DASHBOARD.ROOT) }}
-
                 >
                     <ListItemIcon className={open ? "expanded" : "collapsed"}>
                         <StatusUp />
@@ -32,6 +31,24 @@ export default function AdminMenu({ open }: { open: boolean }) {
                 <ListItemButton
                     className={[
                         open ? "expanded" : "collapsed",
+                        pathname === "/transactions" ? "active" : ""
+                    ].join(" ")}
+
+                    onClick={() => { router.push(PATH.ADMIN.TRANSACTIONS.ROOT) }}
+                >
+                    <ListItemIcon className={open ? "expanded" : "collapsed"}>
+                        <ArrowSwapHorizontal />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary="Transactions"
+                        className={open ? "expanded" : "collapsed"}
+                    />
+                </ListItemButton>
+            </ListItem>
+            <ListItem>
+                <ListItemButton
+                    className={[
+                        open ? "expanded" : "collapsed",
                         [
                             PATH.ADMIN.GAMES.ROOT,
                             PATH.ADMIN.GAMES.ADD_GAME.ROOT,

src/components/organism/Table/index.tsx

@@ -61,7 +61,7 @@ export default function CustomTable<TData>({ table, loading = false,
                         table.getRowModel().rows.map((row) => (
                             <tr key={row.id} className="">
                                 {row.getVisibleCells().map((cell) => (
-                                    <td key={cell.id} className="px-4 py-4 ">
+                                    <td key={cell.id} className="px-4 py-4 text-[12px] text-title">
                                         {flexRender(
                                             cell.column.columnDef.cell,
                                             cell.getContext()

src/components/pages/dashboard/adminDashboard/games/GameDetail/index.tsx

@@ -9,6 +9,7 @@ import { useParams } from 'next/navigation';
 import { useGetGameByIdQuery } from '@/services/gameApi';
 import { PATH } from '@/routes/PATH';
 import { renderHTML } from '@/utils/RenderHTML';
+import TransactionTable from '../../transaction/TransactionTable';
 
 export default function GameDetailPage() {
     const params = useParams();
@@ -105,13 +106,19 @@ export default function GameDetailPage() {
             {relatedGames.length ? <section className="game__screenshots mb-14">
                 <div className="section-title mb-4">
                     <h2 className="text-[20px] leading-[140%] font-[600]">
-                        Games Under Diner Frenzy Spins
+                        Games Under {data?.data?.name}
                     </h2>
                 </div>
                 <CustomLightGallery images={relatedGames} aspectRatio='aspect-[148/164]' column="7" />
             </section> : null}
 
-            <TransactionBlock />
+            {/* <TransactionBlock /> */}
+            <div className="section-title mb-4">
+                <h2 className="text-[20px] leading-[140%] font-[600]">
+                    All Transactions
+                </h2>
+            </div>
+            {data?.data?.id ? <TransactionTable game_id={data?.data?.id} /> : ""}
 
         </>
     )

src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx

+"use client";
+import TableHeader from '@/components/molecules/TableHeader';
+import CustomTable from '@/components/organism/Table';
+import { useGetAllTransactionQuery } from '@/services/transaction';
+import { SingleDepositProps } from '@/types/transaction';
+import { formatDateTime } from '@/utils/formatDateTime';
+import { getInitials } from '@/utils/getInitials';
+import { Box, Pagination } from '@mui/material';
+import {
+    ColumnDef,
+    getCoreRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    useReactTable
+} from '@tanstack/react-table';
+import React, { useMemo, useState } from 'react';
+
+export default function TransactionTable({ user_id, game_id }: { user_id?: string; game_id?: number }) {
+    const [search, setSearch] = useState("");
+    const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+
+    const queryArgs = useMemo(
+        () => ({
+            page,
+            per_page: pageSize,
+            search: search || "",
+            game_id,
+            user_id,
+        }),
+        [page, pageSize, search, game_id, user_id]
+    );
+
+    const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
+
+    console.log("all transaction", data);
+    const tableData = useMemo(() => data?.data?.data || [], [data]);
+
+    const columns = useMemo<ColumnDef<SingleDepositProps>[]>(() => [
+        {
+            accessorKey: "id",
+            header: "ID",
+        },
+        {
+            accessorKey: "name",
+            header: "Player Name",
+            cell: ({ row }) => {
+                const { first_name, last_name } = row.original;
+                const initials = getInitials(first_name, last_name);
+
+                return (
+                    <Box className="flex justify-start items-center gap-2">
+                        <small className="text-[10px] w-[24px] h-[24px] flex items-center justify-center uppercase rounded-[4px] bg-[#1EB41B]/10 font-[500] text-[#1EB41B]">
+                            {initials}
+                        </small>
+                        <div className="name-detail">
+                            <strong className="text-primary block text-[12px] leading-[120%] font-[500] capitalize">
+                                {first_name} {last_name}
+                            </strong>
+                            <small className="text-[10px] text-para-light font-[500]">
+                                {first_name} {last_name}
+                            </small>
+                        </div>
+                    </Box>
+                );
+            },
+        },
+        {
+            accessorKey: "method",
+            header: "Method",
+        },
+        {
+            accessorKey: "game_name",
+            header: "Game Name",
+        },
+        {
+            accessorKey: "type",
+            header: "Type",
+            cell: ({ row }) => {
+                const status = row.original.status.toLowerCase();
+                const display = status.charAt(0).toUpperCase() + status.slice(1);
+
+                return (
+                    <span
+                        className={`px-2 py-1 max-w-[50px] block lg:text-[10px] text-white status rounded-[8px] text-center ${status}`}
+                    >
+                        {display}
+                    </span>
+                );
+            },
+        },
+        {
+            accessorKey: "amount",
+            header: "Amount USD",
+        },
+        {
+            accessorKey: "sweepcoins",
+            header: "Sweepcoins",
+        },
+        {
+            accessorKey: "transaction_date",
+            header: "Transaction Date",
+            cell: ({ row }) => {
+                const { date, time } = formatDateTime(row.original.transaction_date as string);
+                return (
+                    <Box>
+                        <span className="text-[12px] font-[500] block">{date}</span>
+                        <small className="text-[10px] text-para-light font-[500]">[{time}]</small>
+                    </Box>
+                );
+            },
+        },
+    ], []);
+
+    const table = useReactTable({
+        data: tableData,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+    });
+
+    return (
+        <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
+            <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} />
+            <CustomTable
+                key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`}
+                table={table} loading={loadingTransaction} />
+
+            {tableData.length > 10 ? <div className="flex justify-between items-center mt-4 px-8 py-6">
+                <div>
+                    <span>Row per page:</span>
+                    <select
+                        value={pageSize}
+                        onChange={(e) => setPageSize(Number(e.target.value))}
+                        className="ml-2 border border-gray-300 rounded p-1"
+                    >
+                        {[5, 10, 15, 20].map((size) => (
+                            <option key={size} value={size}>
+                                {size}
+                            </option>
+                        ))}
+                    </select>
+                </div>
+                <Pagination
+                    count={data?.data?.pagination?.total_pages || 1}
+                    page={page}
+                    onChange={(_, value) => setPage(value)}
+                    variant="outlined"
+                    shape="rounded"
+                    sx={{ gap: "8px" }}
+                />
+            </div> : ""}
+        </div>
+    );
+}

src/components/pages/dashboard/adminDashboard/transaction/index.tsx

+import PageHeader from '@/components/molecules/PageHeader'
+import React from 'react'
+import TransactionTable from './TransactionTable'
+
+export default function AllTransactionsPage() {
+    return (
+        <>
+            <PageHeader title='Tranactions' />
+            <TransactionTable />
+        </>
+    )
+}

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx

@@ -74,8 +74,8 @@ export default function CoinCalculator({ slug }: { slug: string }) {
                                 </p>
                             </div>
                             <div className="bonus">
-                                <strong className='text-[16px] block'>+{bonusCoins}</strong>
-                                <span className='text-[12px]'>bonus</span>
+                                <strong className='text-[16px] block'>+ 10</strong>
+                                {/* <span className='text-[12px]'>bonus</span> */}
                             </div>
                         </div>
 

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx

@@ -43,7 +43,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
                                     <span className='text-[12px]'>Gold Coins</span>
                                 </div>
                                 <p>
-                                    <strong className='text-[16px] block'>500</strong>
+                                    <strong className='text-[16px] block'>{amount ? amount * 10 : ""}</strong>
                                 </p>
 
                             </div>
@@ -55,7 +55,7 @@ export default function CheckoutPage({ amount, slug, bonus }: {
                             >
                                 <div className="coin flex items-center gap-1">
                                     <GoldCoinIcon />
-                                    <span className='text-[12px]'>Bonus Coins</span>
+                                    <span className='text-[12px]'>Free Sweeps Coins</span>
                                 </div>
                                 <p>
                                     <strong className='text-[16px] block'>{bonus}</strong>

src/routes/PATH.ts

@@ -17,6 +17,9 @@ export const PATH = {
         }
     },
     ADMIN: {
+        TRANSACTIONS: {
+            ROOT: "/transactions",
+        },
         GAMES: {
             ROOT: "/games",
             ADD_GAME: {

src/services/transaction.ts

@@ -52,7 +52,23 @@ export const transactionApi = createApi({
             },
             providesTags: ["withdrawl"]
         }),
+        getAllTransaction: builder.query<DepositListProps, QueryParams & { user_id?: string | number; game_id?: string | number }>({
+            query: ({ search, page, per_page, user_id, game_id }) => {
+                const params = new URLSearchParams();
+                if (search) params.append('search', search);
+                if (page) params.append('page', page.toString());
+                if (per_page) params.append('page_size', per_page.toString());
+                if (user_id) params.append('user', user_id.toString());
+                if (game_id) params.append('game', game_id.toString());
+                const queryString = params.toString();
+                return {
+                    url: `/api/admin/transactions${queryString ? `?${queryString}` : ''}`,
+                    method: "GET"
+                }
+            },
+            providesTags: ["withdrawl", "deposit"]
+        }),
     })
 })
 
-export const { useDepositMutation, useGetAllDepositQuery, useWithdrawlMutation, useGetAllWithdrawlQuery } = transactionApi;
\ No newline at end of file
+export const { useDepositMutation, useGetAllDepositQuery, useWithdrawlMutation, useGetAllWithdrawlQuery, useGetAllTransactionQuery } = transactionApi;
\ No newline at end of file

src/types/player.ts

@@ -43,6 +43,7 @@ export interface PlayerItem extends CommonPlayerProps {
     id: string;
     registered_date: string | Date;
     current_credit?: string,
+    current_balance?: string,
     total_withdrawl?: string,
     total_deposited?: string
     profile_image_file?: string;