Skip to content

S
sweepstake
Commit d650831a by Arjun Jhukal
Options

updated the minor cahnge

parent b1fb9786
Showing with 187 additions and 241 deletions
src/app/(dashboard)/(admin)/AdminDashboard.tsx
...@@ -17,7 +17,7 @@ const AdminDashboardTableWrapper = ({ title, cta, children }: { title?: string; ...@@ -17,7 +17,7 @@ const AdminDashboardTableWrapper = ({ title, cta, children }: { title?: string;
{title ? <h2>{title}</h2> : ""} {title ? <h2>{title}</h2> : ""}
{cta ? <Link href={cta.url} className='text-primary text-[10px] leading-[120%] font-[500]'>{cta.label}</Link> : ""} {cta ? <Link href={cta.url} className='text-primary text-[10px] leading-[120%] font-[500]'>{cta.label}</Link> : ""}
</div> </div>
<div className="table__wrapper"> <div className="table__wrapper max-w-full overflow-x-auto">
{children} {children}
</div> </div>
</div> </div>
...@@ -61,7 +61,7 @@ export default function AdminDashboardRoot() { ...@@ -61,7 +61,7 @@ export default function AdminDashboardRoot() {
</div> </div>
</AdminDashboardTableWrapper> </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"> <div className="lg:col-span-6 xl:col-span-7">
<AdminDashboardTableWrapper title='Latest Registered Players' cta={{ <AdminDashboardTableWrapper title='Latest Registered Players' cta={{
label: "View All", label: "View All",
...@@ -70,7 +70,7 @@ export default function AdminDashboardRoot() { ...@@ -70,7 +70,7 @@ export default function AdminDashboardRoot() {
<LatestRegisteredPlayer /> <LatestRegisteredPlayer />
</AdminDashboardTableWrapper> </AdminDashboardTableWrapper>
</div> </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' > <AdminDashboardTableWrapper title='Admin Transaction' >
<AdminTransactionChart /> <AdminTransactionChart />
</AdminDashboardTableWrapper> </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 React from "react";
// import Chart from "react-apexcharts"; // import Chart from "react-apexcharts";
// import { ApexOptions } from "apexcharts"; // import { ApexOptions } from "apexcharts";
...@@ -6,12 +77,17 @@ ...@@ -6,12 +77,17 @@
// export default function AdminTransactionChart() { // export default function AdminTransactionChart() {
// const { data, isLoading } = useGetAdminTransactionsQuery(); // const { data, isLoading } = useGetAdminTransactionsQuery();
// const defaultLabels = ["User Transaction", "My Settled", "My Unsettled"];
// const defaultColors = ["#8B5CF6", "#FACC15", "#22C55E"];
// const chartOptions: ApexOptions = { // const chartOptions: ApexOptions = {
// chart: { // chart: {
// type: "donut", // type: "donut",
// }, // },
// labels: data?.data.length ? data?.data.map((item) => item.label) : ["User Transaction", "My Settled", "My Unsettled"], // labels: data?.data?.length
// colors: ["#8B5CF6", "#FACC15", "#22C55E"], // ? data.data.map((item: any) => item.label)
// : defaultLabels,
// colors: defaultColors,
// legend: { show: false }, // legend: { show: false },
// dataLabels: { enabled: false }, // dataLabels: { enabled: false },
// stroke: { // stroke: {
...@@ -27,46 +103,49 @@ ...@@ -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 ( // return (
// <div className="px-6 pb-6"> // <div className="px-6 pb-6">
// {/* Donut Chart */} // {/* Donut Chart */}
// <Chart options={chartOptions} series={chartSeries} type="donut" height={280} /> // <Chart
// options={chartOptions}
// series={chartSeries}
// type="donut"
// height={280}
// />
// {/* Custom Legend */} // {/* Custom Legend */}
// <div className="grid grid-cols-3 gap-4 mt-4 text-sm"> // <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) => (
// data?.data.map((item) => ( // <div key={index} className="flex flex-col items-start">
// <div className="flex flex-col items-start"> // <span className="flex items-start gap-1 text-para-light">
// <span className="flex items-center gap-1"> // <span
// <span className="w-3 h-3 rounded-full inline-block bg-purple-500"></span> // className="w-3 h-3 rounded-full inline-block mt-1 "
// style={{ backgroundColor: defaultColors[index] }}
// ></span>
// {item.label} // {item.label}
// </span> // </span>
// <strong className="text-gray-800 ">${item.data}</strong> // <strong className="text-gray-800 block mt-2">
// </div> // ${item.data?.toLocaleString()}
// )) // </strong>
// }
// <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> // </div>
// </div> // </div>
// ); // );
// } // }
"use client"; "use client";
import React from "react"; import React from "react";
...@@ -83,6 +162,7 @@ export default function AdminTransactionChart() { ...@@ -83,6 +162,7 @@ export default function AdminTransactionChart() {
const chartOptions: ApexOptions = { const chartOptions: ApexOptions = {
chart: { chart: {
type: "donut", type: "donut",
toolbar: { show: false },
}, },
labels: data?.data?.length labels: data?.data?.length
? data.data.map((item: any) => item.label) ? data.data.map((item: any) => item.label)
...@@ -90,53 +170,57 @@ export default function AdminTransactionChart() { ...@@ -90,53 +170,57 @@ export default function AdminTransactionChart() {
colors: defaultColors, colors: defaultColors,
legend: { show: false }, legend: { show: false },
dataLabels: { enabled: false }, dataLabels: { enabled: false },
stroke: { stroke: { width: 2, colors: ["#fff"] },
width: 2,
colors: ["#fff"],
},
plotOptions: { plotOptions: {
pie: { pie: {
donut: { donut: { size: "65%" },
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 const chartSeries = data?.data?.length
? data.data.map((item: any) => item.data) ? data.data.map((item: any) => item.data)
: [0, 0, 0]; : [0, 0, 0];
if (isLoading) { if (isLoading)
return <div className="px-6 py-10 text-center">Loading chart...</div>; 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 py-10 text-center">No transaction data found</div>;
}
return ( return (
<div className="px-6 pb-6"> <div className="px-6 pb-6 w-full">
{/* Donut Chart */} {/* Donut Chart */}
<Chart <Chart options={chartOptions} series={chartSeries} type="donut" width="100%" />
options={chartOptions}
series={chartSeries}
type="donut"
height={280}
/>
{/* Custom Legend */} {/* 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) => ( {data.data.map((item: any, index: number) => (
<div key={index} className="flex flex-col items-start"> <div key={index} className="flex flex-col items-start sm:items-center">
<span className="flex items-start gap-1 text-para-light"> <span className="flex items-center gap-2 text-para-light">
<span <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] }} style={{ backgroundColor: defaultColors[index] }}
></span> ></span>
{item.label} {item.label}
</span> </span>
<strong className="text-gray-800 block mt-2"> <strong className="text-gray-800 mt-1 block">
${item.data?.toLocaleString()} ${item.data?.toLocaleString()}
</strong> </strong>
</div> </div>
......
src/components/layouts/DashboardLayout.tsx
...@@ -40,7 +40,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod ...@@ -40,7 +40,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
} /> } />
<div className="root_container w-full overflow-hidden"> <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"> <div className="content_box p-4 lg:pl-11 lg:pr-12 lg:py-8">
{/* {pathname !== '/' && <Breadcrumb />} */} {/* {pathname !== '/' && <Breadcrumb />} */}
{children}</div> {children}</div>
......
src/components/molecules/TableHeader.tsx
...@@ -4,7 +4,7 @@ import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react"; ...@@ -4,7 +4,7 @@ import { DocumentDownload, SearchNormal } from "@wandersonalwes/iconsax-react";
interface TableHeaderProps { interface TableHeaderProps {
search: string; search: string;
setSearch: (value: string) => void; setSearch?: (value: string) => void;
filterMethod?: string; filterMethod?: string;
setFilterMethod?: (value: string) => void; setFilterMethod?: (value: string) => void;
onDownloadCSV: () => void; onDownloadCSV: () => void;
...@@ -25,7 +25,7 @@ export default function TableHeader({ ...@@ -25,7 +25,7 @@ export default function TableHeader({
name="search" name="search"
id="search" id="search"
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch && setSearch(e.target.value)}
startAdornment={ startAdornment={
<InputAdornment position="start"> <InputAdornment position="start">
<IconButton edge="start"> <IconButton edge="start">
......
src/components/organism/Charts/CreditCard.tsx
...@@ -44,6 +44,7 @@ const CreditCard = ({ game }: { game: any }) => { ...@@ -44,6 +44,7 @@ const CreditCard = ({ game }: { game: any }) => {
series={chartSeries} series={chartSeries}
type="bar" type="bar"
height={12} height={12}
width={"80%"}
/> />
<div className="flex justify-between text-xs mt-2" > <div className="flex justify-between text-xs mt-2" >
<span>${game.amount}</span> <span>${game.amount}</span>
......
src/components/organism/Header/AdminHeader/index.tsx
...@@ -20,8 +20,8 @@ export default function AdminHeader() { ...@@ -20,8 +20,8 @@ export default function AdminHeader() {
const [pageSize, setPageSize] = React.useState(10); const [pageSize, setPageSize] = React.useState(10);
const { data } = useGetAllNotificationQuery({ page: page, per_page: pageSize }); const { data } = useGetAllNotificationQuery({ page: page, per_page: pageSize });
return ( return (
<Box className='flex items-center gap-4 justify-between w-full'> <Box className='flex items-center gap-4 justify-end w-full'>
<AdminSearchBar /> {/* <AdminSearchBar /> */}
<div className="right flex items-center gap-4"> <div className="right flex items-center gap-4">
<CreatNewRecord /> <CreatNewRecord />
<NotificationPage notifications={data?.data?.data || []} pagination={data?.data?.pagination} /> <NotificationPage notifications={data?.data?.data || []} pagination={data?.data?.pagination} />
......
src/components/organism/Header/Profile.tsx
...@@ -19,7 +19,7 @@ export default function ProfileBlock() { ...@@ -19,7 +19,7 @@ export default function ProfileBlock() {
}; };
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const router = useRouter(); const router = useRouter();
const user = useAppSelector((state) => state.auth.user); const user = useAppSelector((state) => state?.auth.user);
const handleClose = (event: MouseEvent | TouchEvent) => { const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) { if (anchorRef.current && anchorRef.current.contains(event.target)) {
return; return;
...@@ -94,7 +94,7 @@ export default function ProfileBlock() { ...@@ -94,7 +94,7 @@ export default function ProfileBlock() {
{user?.role || "User"} {user?.role || "User"}
</p> </p>
</div> </div>
<ArrowDown2 size={14} /> <ArrowDown2 size={14} className='hidden lg:block' />
</> : ""} </> : ""}
</div> </div>
</Button> </Button>
......
src/components/organism/Sidebar/index.tsx
...@@ -104,7 +104,7 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle ...@@ -104,7 +104,7 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle
}, [ref, mobileMenuOpen, handleMobileMenuToggle]); }, [ref, mobileMenuOpen, handleMobileMenuToggle]);
if (downLG) { 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"}`} > 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 "> <div className="flex justify-between items-center p-4 ">
<Link href="/"> <Link href="/">
<Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} /> <Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
......
src/components/organism/Table/index.tsx
...@@ -19,6 +19,7 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -19,6 +19,7 @@ export default function CustomTable<TData>({ table, loading = false,
if (user?.role && user?.role.toUpperCase() !== "USER") { if (user?.role && user?.role.toUpperCase() !== "USER") {
return ( return (
<div className=" max-w-full overflow-x-auto">
<table className="min-w-full border-collapse border border-gray-200 text-left admin__table"> <table className="min-w-full border-collapse border border-gray-200 text-left admin__table">
<thead> <thead>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
...@@ -74,6 +75,8 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -74,6 +75,8 @@ export default function CustomTable<TData>({ table, loading = false,
</tbody> </tbody>
</table> </table>
</div>
); );
} }
......
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'; ...@@ -4,7 +4,6 @@ import CustomLightGallery from '@/components/organism/LightGallery';
import Image from 'next/image' import Image from 'next/image'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import TransactionBlock from './Transaction';
import { useParams } from 'next/navigation'; import { useParams } from 'next/navigation';
import { useGetGameByIdQuery } from '@/services/gameApi'; import { useGetGameByIdQuery } from '@/services/gameApi';
import { PATH } from '@/routes/PATH'; import { PATH } from '@/routes/PATH';
...@@ -29,7 +28,7 @@ export default function GameDetailPage() { ...@@ -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"> {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" /> <Image src={data?.data?.thumbnail || ""} alt="Game Name" fill className="object-cover" />
</div> : null} </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="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"> <div className="section__title">
{ {
...@@ -120,8 +119,8 @@ export default function GameDetailPage() { ...@@ -120,8 +119,8 @@ export default function GameDetailPage() {
</h2> </h2>
</div> </div>
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]"> <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> {/* <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> */}
{data?.data?.id ? <TransactionTable game_id={data?.data?.id} search={search} /> : ""} {data?.data?.id ? <TransactionTable game_id={data?.data?.id} search={search} setSearch={setSearch} /> : ""}
</div> </div>
</> </>
......
src/components/pages/dashboard/adminDashboard/pages/index.tsx
...@@ -116,7 +116,7 @@ export default function GeneralPageLiting() { ...@@ -116,7 +116,7 @@ export default function GeneralPageLiting() {
table={table} table={table}
loading={loadingPages} 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> <div>
<span>Row per page:</span> <span>Row per page:</span>
<select <select
......
src/components/pages/dashboard/adminDashboard/players/index.tsx
...@@ -158,7 +158,7 @@ export default function PlayerListing() { ...@@ -158,7 +158,7 @@ export default function PlayerListing() {
table={table} table={table}
loading={loadingPlayer} 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> <div>
<span>Row per page:</span> <span>Row per page:</span>
<select <select
......
src/components/pages/dashboard/adminDashboard/players/playerDetail/index.tsx
...@@ -5,7 +5,6 @@ import { PATH } from '@/routes/PATH' ...@@ -5,7 +5,6 @@ import { PATH } from '@/routes/PATH'
import Image from 'next/image' import Image from 'next/image'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import GameTransactionTable from '../../games/GameDetail/Transaction'
import TransactionTable from '../../transaction/TransactionTable' import TransactionTable from '../../transaction/TransactionTable'
import { useAppSelector } from '@/hooks/hook' import { useAppSelector } from '@/hooks/hook'
import { formatDateTime } from '@/utils/formatDateTime' import { formatDateTime } from '@/utils/formatDateTime'
...@@ -172,8 +171,8 @@ export default function PlayerDetailPage({ id }: { id: number }) { ...@@ -172,8 +171,8 @@ export default function PlayerDetailPage({ id }: { id: number }) {
</h2> </h2>
</div> </div>
<div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]"> <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
<TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> {/* <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> */}
{data?.data?.id ? <TransactionTable search={search} user_id={data?.data?.id} /> : ""} {data?.data?.id ? <TransactionTable setSearch={setSearch} search={search} user_id={data?.data?.id} /> : ""}
{/* <GameTransactionTable /> */} {/* <GameTransactionTable /> */}
</div> </div>
</> </>
......
src/components/pages/dashboard/adminDashboard/transaction/TransactionTable.tsx
...@@ -13,9 +13,10 @@ import { ...@@ -13,9 +13,10 @@ import {
getSortedRowModel, getSortedRowModel,
useReactTable useReactTable
} from '@tanstack/react-table'; } from '@tanstack/react-table';
import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
import React, { useMemo, useState } from '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 [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
...@@ -39,7 +40,25 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id ...@@ -39,7 +40,25 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id
const columns = useMemo<ColumnDef<SingleDepositProps>[]>(() => [ const columns = useMemo<ColumnDef<SingleDepositProps>[]>(() => [
{ {
accessorKey: "id", 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", accessorKey: "name",
...@@ -123,16 +142,15 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id ...@@ -123,16 +142,15 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id
}); });
return ( return (
// <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]"> <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
// <TableHeader search={search} setSearch={setSearch} onDownloadCSV={() => { }} /> <TableHeader search={search} setSearch={setSearch && setSearch} onDownloadCSV={() => { }} />
// </div>
<> <>
<CustomTable <CustomTable
key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`} key={`${page}-${pageSize}-${search}-${game_id}-${user_id}`}
table={table} loading={loadingTransaction} /> table={table} loading={loadingTransaction} />
{tableData.length > 10 ? <div className="flex justify-between items-center mt-4 px-8 py-6"> {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> <div>
<span>Row per page:</span> <span>Row per page:</span>
<select <select
...@@ -157,5 +175,6 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id ...@@ -157,5 +175,6 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id
/> />
</div> : ""} </div> : ""}
</> </>
</div>
); );
} }
src/components/pages/dashboard/adminDashboard/transaction/index.tsx
...@@ -9,7 +9,8 @@ export default function AllTransactionsPage() { ...@@ -9,7 +9,8 @@ export default function AllTransactionsPage() {
return ( return (
<> <>
<PageHeader title='Tranactions' /> <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() { ...@@ -65,7 +65,7 @@ export default function DepositHistoryPage() {
<> <>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" /> <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} <Pagination count={data?.data?.pagination?.total_pages || 1}
page={page} page={page}
......
src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx
...@@ -63,7 +63,7 @@ export default function WithdrawnHistoryPage() { ...@@ -63,7 +63,7 @@ export default function WithdrawnHistoryPage() {
return ( return (
<> <>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" /> <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} <Pagination count={data?.data?.pagination?.total_pages || 1}
page={page} page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} /> 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