Skip to content

S
sweepstake
Commit d650831a by Arjun Jhukal
Options

updated the minor cahnge

parent b1fb9786
Showing with 269 additions and 323 deletions
src/app/(dashboard)/(admin)/AdminDashboard.tsx
......@@ -17,7 +17,7 @@ const AdminDashboardTableWrapper = ({ title, cta, children }: { title?: string;
{title ? <h2>{title}</h2> : ""}
{cta ? <Link href={cta.url} className='text-primary text-[10px] leading-[120%] font-[500]'>{cta.label}</Link> : ""}
</div>
<div className="table__wrapper">
<div className="table__wrapper max-w-full overflow-x-auto">
{children}
</div>
</div>
......@@ -61,7 +61,7 @@ export default function AdminDashboardRoot() {
</div>
</AdminDashboardTableWrapper>
<div className="grid gap-5 lg:grid-cols-12 items-stretch">
<div className="xl:grid gap-5 xl:grid-cols-12 items-stretch">
<div className="lg:col-span-6 xl:col-span-7">
<AdminDashboardTableWrapper title='Latest Registered Players' cta={{
label: "View All",
......@@ -70,7 +70,7 @@ export default function AdminDashboardRoot() {
<LatestRegisteredPlayer />
</AdminDashboardTableWrapper>
</div>
<div className="lg:col-span-6 xl:col-span-5 ">
<div className="lg:max-w-3/4 xl:col-span-5 xl:max-w-full">
<AdminDashboardTableWrapper title='Admin Transaction' >
<AdminTransactionChart />
</AdminDashboardTableWrapper>
......
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";
......@@ -6,12 +77,17 @@
// 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: data?.data.length ? data?.data.map((item) => item.label) : ["User Transaction", "My Settled", "My Unsettled"],
// colors: ["#8B5CF6", "#FACC15", "#22C55E"],
// labels: data?.data?.length
// ? data.data.map((item: any) => item.label)
// : defaultLabels,
// colors: defaultColors,
// legend: { show: false },
// dataLabels: { enabled: false },
// stroke: {
......@@ -27,46 +103,49 @@
// },
// };
// const chartSeries = data?.data.length ? data?.data.map((item) => item.data) : [0, 0, 0];
// const chartSeries = data?.data?.length
// ? data.data.map((item: any) => item.data)
// : [0, 0, 0];
// if (!data) return null;
// 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">
// {
// 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 className=" flex flex-col sm:grid xl:flex 2xl:grid grid-cols-3 gap-4 mt-4 text-sm">
// {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>
// );
// }
"use client";
import React from "react";
......@@ -83,6 +162,7 @@ export default function AdminTransactionChart() {
const chartOptions: ApexOptions = {
chart: {
type: "donut",
toolbar: { show: false },
},
labels: data?.data?.length
? data.data.map((item: any) => item.label)
......@@ -90,53 +170,57 @@ export default function AdminTransactionChart() {
colors: defaultColors,
legend: { show: false },
dataLabels: { enabled: false },
stroke: {
width: 2,
colors: ["#fff"],
},
stroke: { width: 2, colors: ["#fff"] },
plotOptions: {
pie: {
donut: {
size: "65%",
},
donut: { size: "65%" },
},
},
responsive: [
{
breakpoint: 1024,
options: {
chart: { height: 240 },
plotOptions: { pie: { donut: { size: "60%" } } },
},
},
{
breakpoint: 640,
options: {
chart: { height: 200 },
plotOptions: { pie: { donut: { size: "55%" } } },
},
},
],
};
const chartSeries = data?.data?.length
? data.data.map((item: any) => item.data)
: [0, 0, 0];
if (isLoading) {
if (isLoading)
return <div className="px-6 py-10 text-center">Loading chart...</div>;
}
if (!data?.data?.length) {
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">
<div className="px-6 pb-6 w-full">
{/* Donut Chart */}
<Chart
options={chartOptions}
series={chartSeries}
type="donut"
height={280}
/>
<Chart options={chartOptions} series={chartSeries} type="donut" width="100%" />
{/* Custom Legend */}
<div className="grid grid-cols-3 gap-4 mt-4 text-sm">
<div className="mt-4 text-sm grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{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">
<div key={index} className="flex flex-col items-start sm:items-center">
<span className="flex items-center gap-2 text-para-light">
<span
className="w-3 h-3 rounded-full inline-block mt-1 "
className="w-3 h-3 rounded-full inline-block"
style={{ backgroundColor: defaultColors[index] }}
></span>
{item.label}
</span>
<strong className="text-gray-800 block mt-2">
<strong className="text-gray-800 mt-1 block">
${item.data?.toLocaleString()}
</strong>
</div>
......
src/components/layouts/DashboardLayout.tsx
......@@ -40,7 +40,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
} />
<div className="root_container w-full overflow-hidden">
<DrawerHeader />
<DrawerHeader sx={{
mb: { xs: '16px', lg: 0 }
}} />
<div className="content_box p-4 lg:pl-11 lg:pr-12 lg:py-8">
{/* {pathname !== '/' && <Breadcrumb />} */}
{children}</div>
......
src/components/molecules/TableHeader.tsx
......@@ -4,7 +4,7 @@ import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
interface TableHeaderProps {
search: string;
setSearch: (value: string) => void;
setSearch?: (value: string) => void;
filterMethod?: string;
setFilterMethod?: (value: string) => void;
onDownloadCSV: () => void;
......@@ -25,7 +25,7 @@ export default function TableHeader({
name="search"
id="search"
value={search}
onChange={(e) => setSearch(e.target.value)}
onChange={(e) => setSearch && setSearch(e.target.value)}
startAdornment={
<InputAdornment position="start">
<IconButton edge="start">
......
src/components/organism/Charts/CreditCard.tsx
......@@ -44,6 +44,7 @@ const CreditCard = ({ game }: { game: any }) => {
series={chartSeries}
type="bar"
height={12}
width={"80%"}
/>
<div className="flex justify-between text-xs mt-2" >
<span>${game.amount}</span>
......
src/components/organism/Header/AdminHeader/index.tsx
......@@ -20,8 +20,8 @@ export default function AdminHeader() {
const [pageSize, setPageSize] = React.useState(10);
const { data } = useGetAllNotificationQuery({ page: page, per_page: pageSize });
return (
<Box className='flex items-center gap-4 justify-between w-full'>
<AdminSearchBar />
<Box className='flex items-center gap-4 justify-end w-full'>
{/* <AdminSearchBar /> */}
<div className="right flex items-center gap-4">
<CreatNewRecord />
<NotificationPage notifications={data?.data?.data || []} pagination={data?.data?.pagination} />
......
src/components/organism/Header/Profile.tsx
......@@ -19,7 +19,7 @@ export default function ProfileBlock() {
};
const dispatch = useAppDispatch();
const router = useRouter();
const user = useAppSelector((state) => state.auth.user);
const user = useAppSelector((state) => state?.auth.user);
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
......@@ -94,7 +94,7 @@ export default function ProfileBlock() {
{user?.role || "User"}
</p>
</div>
<ArrowDown2 size={14} />
<ArrowDown2 size={14} className='hidden lg:block' />
</> : ""}
</div>
</Button>
......
src/components/organism/Sidebar/index.tsx
......@@ -104,7 +104,7 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle
}, [ref, mobileMenuOpen, handleMobileMenuToggle]);
if (downLG) {
return <div className={`mobile__menu__wrapper fixed left-0 top-0 bottom-0 max-h-screen overflow-auto backdrop-blur-2xl bg-[#290139CF] w-full z-[9999] transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"}`} >
<div className={`mobile__primary__menu max-w-[600px] bg-[#11011E] w-full h-screen overflow-auto transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible translate-x-0" : "opacity-0 invisible translate-x-[-100%]"}`} ref={ref}>
<div className={`mobile__primary__menu max-w-[600px] w-full h-screen overflow-auto transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible translate-x-0" : "opacity-0 invisible translate-x-[-100%]"} ${user?.role && user.role.toUpperCase() === 'ADMIN' ? "bg-white" : "bg-[#11011E]"}`} ref={ref}>
<div className="flex justify-between items-center p-4 ">
<Link href="/">
<Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
......
src/components/organism/Table/index.tsx
......@@ -19,61 +19,64 @@ export default function CustomTable<TData>({ table, loading = false,
if (user?.role && user?.role.toUpperCase() !== "USER") {
return (
<table className="min-w-full border-collapse border border-gray-200 text-left admin__table">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray"
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{loading ? (
Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4">
<div className="h-4 w-full rounded bg-gray-200" />
</td>
))}
</tr>
))
) : rowCount === 0 ? (
<tr>
<td
colSpan={columnCount}
className="text-center px-4 py-4 text-gray-500"
>
{emptyMessage}
</td>
</tr>
) : (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-4 text-[12px] text-title ">
<div className=" max-w-full overflow-x-auto">
<table className="min-w-full border-collapse border border-gray-200 text-left admin__table">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray"
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
header.column.columnDef.header,
header.getContext()
)}
</td>
</th>
))}
</tr>
))
)}
</tbody>
))}
</thead>
<tbody>
{loading ? (
Array.from({ length: skeletonRows }).map((_, rowIndex) => (
<tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="p-2 py-4 px-4">
<div className="h-4 w-full rounded bg-gray-200" />
</td>
))}
</tr>
))
) : rowCount === 0 ? (
<tr>
<td
colSpan={columnCount}
className="text-center px-4 py-4 text-gray-500"
>
{emptyMessage}
</td>
</tr>
) : (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="px-4 py-4 text-[12px] text-title ">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))
)}
</tbody>
</table>
</div>
</table>
);
}
......
src/components/pages/dashboard/adminDashboard/games/GameDetail/Transaction.tsx deleted 100644 → 0
"use client";
import React, { useMemo, useState } from "react";
import {
useReactTable,
getCoreRowModel,
getPaginationRowModel,
ColumnDef,
flexRender,
getSortedRowModel,
} from "@tanstack/react-table";
import { Button, Pagination } from "@mui/material";
import TableHeader from "@/components/molecules/TableHeader";
import { ArrowDown, ArrowUp } from "@wandersonalwes/iconsax-react";
interface PlayerTransaction {
id: number;
playerName: string;
method: string;
type: string;
amount: number;
sweepcoins: string;
date: string;
}
const data: PlayerTransaction[] = [
{ id: 244, playerName: "Harry Michael", method: "Paypal", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 243, playerName: "Harry Michael", method: "Crypto", type: "Withdraw", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 242, playerName: "Harry Michael", method: "Paypal", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 241, playerName: "Harry Michael", method: "Paypal", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 240, playerName: "Harry Michael", method: "Crypto", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 239, playerName: "Harry Michael", method: "Paypal", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025 [15:69]" },
{ id: 238, playerName: "Harry Michael", method: "Crypto", type: "Deposit", amount: 56.68, sweepcoins: "56,598", date: "July 23, 2025" },
];
export default function GameTransactionTable() {
const [search, setSearch] = useState("");
const [filterMethod, setFilterMethod] = useState("all");
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const columns = useMemo<ColumnDef<PlayerTransaction>[]>(
() => [
{
accessorKey: "id",
header: ({ column }) => (
<button
onClick={() => column.toggleSorting()}
className="flex items-center gap-1"
>
#ID
{{
asc: <ArrowUp size={14} />,
desc: <ArrowDown size={14} />,
}[column.getIsSorted() as string] || null}
</button>
),
},
{ accessorKey: "playerName", header: "Player Name" },
{ accessorKey: "method", header: "Method" },
{ accessorKey: "type", header: "Type" },
{ accessorKey: "amount", header: "Amount USD" },
{ accessorKey: "sweepcoins", header: "Sweepcoins" },
{ accessorKey: "date", header: "Transaction Date" },
],
[]
);
const filteredData = useMemo(() => {
return data.filter((row) => {
const searchMatch =
row.playerName.toLowerCase().includes(search.toLowerCase()) ||
row.type.toLowerCase().includes(search.toLowerCase()) ||
row.date.toLowerCase().includes(search.toLowerCase());
const methodMatch = filterMethod === "all" || row.method.toLowerCase() === filterMethod;
return searchMatch && methodMatch;
});
}, [search, filterMethod]);
const table = useReactTable({
data: filteredData,
columns,
state: { sorting },
onSortingChange: setSorting,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
});
const downloadCSV = () => {
};
return (
<section className="transaction__root">
<div className="section-title mb-4">
<h2 className="text-[20px] leading-[140%] font-[600]">
Games Under Diner Frenzy Spins
</h2>
</div>
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader
search={search}
setSearch={setSearch}
filterMethod={filterMethod}
setFilterMethod={setFilterMethod}
onDownloadCSV={downloadCSV}
/>
<table className="min-w-full border-collapse border border-gray-200 text-left">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="text-[12px] font-[600] text-title p-2 py-6 px-6 bg-light-gray"
>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className="odd:bg-white even:bg-gray-50">
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className=" p-2 py-6 px-6">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
{/* Pagination */}
<div className="flex justify-between items-center mt-4 px-8 py-6">
<div>
<span>Row per page:</span>
<select
value={table.getState().pagination.pageSize}
onChange={(e) => table.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={10} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
</div>
</div>
</section>
);
}
src/components/pages/dashboard/adminDashboard/games/GameDetail/index.tsx
......@@ -4,7 +4,6 @@ import CustomLightGallery from '@/components/organism/LightGallery';
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import TransactionBlock from './Transaction';
import { useParams } from 'next/navigation';
import { useGetGameByIdQuery } from '@/services/gameApi';
import { PATH } from '@/routes/PATH';
......@@ -29,7 +28,7 @@ export default function GameDetailPage() {
{data?.data?.thumbnail ? <div className="lg:col-span-5 xl:col-span-4 game__featured__image relative aspect-[338/338] rounded-[10px] overflow-hidden">
<Image src={data?.data?.thumbnail || ""} alt="Game Name" fill className="object-cover" />
</div> : null}
<div className="game__content lg:col-span-7 xl:col-span-8">
<div className="game__content lg:col-span-7 xl:col-span-8 mt-6 lg:mt-0">
<div className="flex items-start justify-between pb-6 mb-6 border-b-[1px] border-solid border-[rgba(0,0,0,0.1)]">
<div className="section__title">
{
......@@ -120,8 +119,8 @@ export default function GameDetailPage() {
</h2>
</div>
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} />
{data?.data?.id ? <TransactionTable game_id={data?.data?.id} search={search} /> : ""}
{/* <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> */}
{data?.data?.id ? <TransactionTable game_id={data?.data?.id} search={search} setSearch={setSearch} /> : ""}
</div>
</>
......
src/components/pages/dashboard/adminDashboard/pages/index.tsx
......@@ -116,7 +116,7 @@ export default function GeneralPageLiting() {
table={table}
loading={loadingPages}
/>
<div className="flex justify-between items-center mt-4 px-8 py-6">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<div>
<span>Row per page:</span>
<select
......
src/components/pages/dashboard/adminDashboard/players/index.tsx
......@@ -158,7 +158,7 @@ export default function PlayerListing() {
table={table}
loading={loadingPlayer}
/>
<div className="flex justify-between items-center mt-4 px-8 py-6">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<div>
<span>Row per page:</span>
<select
......
src/components/pages/dashboard/adminDashboard/players/playerDetail/index.tsx
......@@ -5,7 +5,6 @@ import { PATH } from '@/routes/PATH'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import GameTransactionTable from '../../games/GameDetail/Transaction'
import TransactionTable from '../../transaction/TransactionTable'
import { useAppSelector } from '@/hooks/hook'
import { formatDateTime } from '@/utils/formatDateTime'
......@@ -172,8 +171,8 @@ export default function PlayerDetailPage({ id }: { id: number }) {
</h2>
</div>
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} />
{data?.data?.id ? <TransactionTable search={search} user_id={data?.data?.id} /> : ""}
{/* <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> */}
{data?.data?.id ? <TransactionTable setSearch={setSearch} search={search} user_id={data?.data?.id} /> : ""}
{/* <GameTransactionTable /> */}
</div>
</>
......
src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx
......@@ -13,9 +13,10 @@ import {
getSortedRowModel,
useReactTable
} from '@tanstack/react-table';
import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
import React, { useMemo, useState } from 'react';
export default function TransactionTable({ user_id, game_id, search }: { user_id?: string; game_id?: number, search: string }) {
export default function TransactionTable({ user_id, game_id, search, setSearch }: { user_id?: string; game_id?: number, search: string, setSearch?: (newvalue: string) => void }) {
const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1);
......@@ -39,7 +40,25 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id
const columns = useMemo<ColumnDef<SingleDepositProps>[]>(() => [
{
accessorKey: "id",
header: "ID",
header: ({ column }) => {
// Determine arrow: show Asc by default if not sorted
const sortState = column.getIsSorted();
const arrow =
sortState === "asc" || sortState === null ? (
<ArrowUp size={14} />
) : sortState === "desc" ? (
<ArrowDown size={14} />
) : null;
return (
<button
onClick={() => column.toggleSorting()}
className="flex items-center gap-1"
>
#ID {arrow}
</button>
);
},
},
{
accessorKey: "name",
......@@ -123,39 +142,39 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id
});
return (
// <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
// <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} />
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch && setSearch} onDownloadCSV={() => { }} />
// </div>
<>
<CustomTable
key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`}
table={table} loading={loadingTransaction} />
<>
<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> : ""}
</>
{tableData.length > 10 ? <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<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
......@@ -9,7 +9,8 @@ export default function AllTransactionsPage() {
return (
<>
<PageHeader title='Tranactions' />
<TransactionTable search={search} />
<TransactionTable search={search} setSearch={setSearch} />
</>
)
}
src/components/pages/dashboard/userDashboard/depositHistory/index.tsx
......@@ -65,7 +65,7 @@ export default function DepositHistoryPage() {
<>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
<div className="flex justify-between items-center mt-4 px-8 py-6">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
......
src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx
......@@ -63,7 +63,7 @@ export default function WithdrawnHistoryPage() {
return (
<>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
{data && data?.data?.data.length > 5 ? <div className="flex justify-between items-center mt-4 px-8 py-6">
{data && data?.data?.data.length > 5 ? <div className="flex flex-col md:flex-row justify-between items-start md:items-center mt-4 px-8 py-6 gap-4">
<Pagination count={data?.data?.pagination?.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment