Skip to content

S
sweepstake
Commit d650831a by Arjun Jhukal
Options

updated the minor cahnge

parent b1fb9786
Showing with 131 additions and 269 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/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,61 +19,64 @@ export default function CustomTable<TData>({ table, loading = false, ...@@ -19,61 +19,64 @@ export default function CustomTable<TData>({ table, loading = false,
if (user?.role && user?.role.toUpperCase() !== "USER") { if (user?.role && user?.role.toUpperCase() !== "USER") {
return ( return (
<table className="min-w-full border-collapse border border-gray-200 text-left admin__table"> <div className=" max-w-full overflow-x-auto">
<thead> <table className="min-w-full border-collapse border border-gray-200 text-left admin__table">
{table.getHeaderGroups().map((headerGroup) => ( <thead>
<tr key={headerGroup.id}> {table.getHeaderGroups().map((headerGroup) => (
{headerGroup.headers.map((header) => ( <tr key={headerGroup.id}>
<th {headerGroup.headers.map((header) => (
key={header.id} <th
className="text-[12px] font-[600] text-title p-2 py-4 px-4 bg-light-gray" 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 ">
{flexRender( {flexRender(
cell.column.columnDef.cell, header.column.columnDef.header,
cell.getContext() header.getContext()
)} )}
</td> </th>
))} ))}
</tr> </tr>
)) ))}
)} </thead>
</tbody> <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'; ...@@ -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,39 +142,39 @@ export default function TransactionTable({ user_id, game_id, search }: { user_id ...@@ -123,39 +142,39 @@ 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
value={pageSize} value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))} onChange={(e) => setPageSize(Number(e.target.value))}
className="ml-2 border border-gray-300 rounded p-1" className="ml-2 border border-gray-300 rounded p-1"
> >
{[5, 10, 15, 20].map((size) => ( {[5, 10, 15, 20].map((size) => (
<option key={size} value={size}> <option key={size} value={size}>
{size} {size}
</option> </option>
))} ))}
</select> </select>
</div> </div>
<Pagination <Pagination
count={data?.data?.pagination?.total_pages || 1} count={data?.data?.pagination?.total_pages || 1}
page={page} page={page}
onChange={(_, value) => setPage(value)} onChange={(_, value) => setPage(value)}
variant="outlined" variant="outlined"
shape="rounded" shape="rounded"
sx={{ gap: "8px" }} sx={{ gap: "8px" }}
/> />
</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