fixed the admin and superadmin redirection

src/components/atom/ChatbotIcon.tsx

@@ -11,6 +11,10 @@ export default function Chatbot() {
 
   const isVideo = fileUrl?.toLowerCase().endsWith(".mp4");
 
+  if (!fileUrl || !label) {
+    return null;
+  }
+
   return (
     <Button
       className=" max-w-fit px-8!"

src/components/molecules/Pagination.tsx

-// import React from 'react'
+"use client";
 
-// export default function Pagination() {
-//   return (
-//    .pagi
-//   )
-// }
+import { Pagination as MuiPagination } from "@mui/material";
+export type QueryParams = {
+    pageIndex: number;
+    pageSize: number;
+}
+type Props = {
+    qp: QueryParams;
+    setQp: (qp: QueryParams) => void;
+    totalPages: number;
+};
+
+export default function TablePaginationControls({
+    qp,
+    setQp,
+    totalPages,
+}: Props) {
+    return (
+        <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={qp.pageSize}
+                    onChange={(e) => setQp({ ...qp, pageSize: Number(e.target.value) })}
+                    className="ml-2 border border-gray-300 rounded p-1"
+                >
+                    {[10, 15, 20, 50, 100].map((size) => (
+                        <option key={size} value={size}>
+                            {size}
+                        </option>
+                    ))}
+                </select>
+            </div>
+
+            <MuiPagination
+                count={totalPages || 1}
+                page={qp.pageIndex}
+                onChange={(_, value) => setQp({ ...qp, pageIndex: value })}
+                variant="outlined"
+                shape="rounded"
+                sx={{ gap: "8px" }}
+            />
+        </div>
+    );
+}
\ No newline at end of file

src/components/molecules/PasswordField.tsx

@@ -30,7 +30,7 @@ export default function PasswordField({
     const handleClickShowPassword = () => setShowPassword((prev) => !prev);
     const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => event.preventDefault();
     return (
-        <div className="input_field">
+        <div className="input__field">
             <InputLabel htmlFor={name}>{label} {required && <span className="text-red-500">*</span>}</InputLabel>
             <OutlinedInput
                 id={name}
@@ -48,9 +48,9 @@ export default function PasswordField({
                             onMouseDown={handleMouseDownPassword}
                             edge="end"
                             color="secondary"
-                        // sx={{
-                        //     padding: 0,
-                        // }}
+                            sx={{
+                                padding: "0 4px",
+                            }}
                         >
                             {showPassword ? <Eye size={16} /> : <EyeSlash size={16} />}
                         </IconButton>

src/components/organism/Charts/CreditCard.tsx

 "use client";
 import { ApexOptions } from "apexcharts";
 import Image from "next/image";
-import React from "react";
 import Chart from "react-apexcharts";
 
 const CreditCard = ({ game }: { game: any }) => {
@@ -35,7 +34,8 @@ const CreditCard = ({ game }: { game: any }) => {
     return (
         <div className=" rounded-lg p-3 border border-gray">
             <Image src={game?.logo || "/assets/images/auth-image.png"} alt='' width={32} height={32} className='aspect-square rounded-sm' />
-            <strong className="block text-[16px] leading-[120%] font-[600] tet-title mt-2 mb-3">{game?.name}</strong>
+            <strong className="block text-[16px] leading-[120%] font-[600] text-title my-2">{game?.name}</strong>
+            {game?.username ? <span className="text-para-light text-[12px] block mb-3">{game?.username || "username"}</span> : ""}
             <div className="chart__wrapper mt-2 px-2 py-3" style={{
                 background: "rgba(184, 1, 192, 0.10)",
                 borderRadius: "4px"

src/components/pages/dashboard/adminDashboard/activityLog/Activities.tsx

 "use client";
+import TablePaginationControls from '@/components/molecules/Pagination';
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
 import { useGetAllActivityQuery } from '@/services/notificationApi';
 import { StatusOptions } from '@/types/config';
 import { ActivityProps } from '@/types/notification';
-import { Box, Pagination } from '@mui/material';
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Box } from '@mui/material';
+import { ColumnDef, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp } from '@wandersonalwes/iconsax-react';
 import React, { useMemo } from 'react';
 import { TransactionStatusProps } from '../transaction/TransactionTable';
@@ -23,26 +24,29 @@ export default function Activities() {
         { value: 'game_play', label: 'Games' },
         { value: 'profile_update', label: 'Profile Updates' },
         { value: 'bonus', label: 'Bonuses' },
-        { value: 'user', label: 'User' }
+        { value: 'user', label: 'User' },
+        { value: 'payment', label: 'Payment' }
     ];
 
 
+    const [qp, setQp] = React.useState({
+        pageIndex: 1,
+        pageSize: 10,
+    });
     const [search, setSearch] = React.useState("");
-    const [pageIndex, setPageIndex] = React.useState(1);
     const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
-    const [pageSize, setPageSize] = React.useState(10);
     const [activityType, setActivityType] = React.useState("");
     const [sorting, setSorting] = React.useState<any>([]);
     // const [download, { isLoading: downloading }] = useStartDownloadMutation();
     const queryArgs = useMemo(
         () => ({
-            pageIndex: pageIndex,
-            pageSize: pageSize,
+            pageIndex: qp.pageIndex,
+            pageSize: qp.pageSize,
             search: search || "",
             activity_type: activityType,
             status
         }),
-        [pageIndex, pageSize, search, status, activityType]
+        [qp, search, status, activityType]
     );
 
 
@@ -149,15 +153,15 @@ export default function Activities() {
         state: { sorting },
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
+        // getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
+        manualPagination: true,
     });
 
 
     return (
         <div className="border-gray border-solid border-[1px] rounded-[8px] lg:rounded-[16px]">
             <TableHeader
-
                 search={search}
                 setSearch={setSearch}
                 filters={[
@@ -169,30 +173,16 @@ export default function Activities() {
             />
 
             <CustomTable
-                key={`${pageIndex}-${pageSize}-${search}-${activityType}`}
+                key={`${qp.pageIndex}-${qp.pageSize}-${search}-${activityType}`}
                 table={table}
                 loading={isLoading}
             />
 
-            <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={pageIndex}
-                    onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
-            </div>
+            <TablePaginationControls
+                qp={qp}
+                setQp={setQp}
+                totalPages={data?.data?.pagination?.total_pages || 1}
+            />
         </div>
     );
 }
\ No newline at end of file

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

 "use client";
 import ActionGroup from '@/components/molecules/Action';
+import TablePaginationControls from '@/components/molecules/Pagination';
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
 import { useAppDispatch } from '@/hooks/hook';
@@ -8,19 +9,22 @@ import { useDeletePageByIdMutation, useGetAllPageQuery } from '@/services/pageAp
 import { showToast, ToastVariant } from '@/slice/toastSlice';
 import { PageRequestProps } from '@/types/page';
 import { formatDateTime } from '@/utils/formatDateTime';
-import { Checkbox, Pagination } from '@mui/material';
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Checkbox } from '@mui/material';
+import { ColumnDef, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
 
 export default function GeneralPageLiting() {
     const dispatch = useAppDispatch();
     const [search, setSearch] = useState("");
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [pageIndex, setPageIndex] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
+    const [qp, setQp] = useState({
+        pageIndex: 1,
+        pageSize: 10,
+    });
+
     const { data, isLoading: loadingPages } = useGetAllPageQuery({
-        pageIndex: pageIndex,
-        pageSize: pageSize,
+        pageIndex: qp.pageIndex,
+        pageSize: qp.pageSize,
         search: search || ""
     });
     const [deletePage] = useDeletePageByIdMutation();
@@ -106,8 +110,9 @@ export default function GeneralPageLiting() {
         state: { sorting },
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
+        // getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
+        manualPagination: true,
     })
 
     return (
@@ -122,25 +127,11 @@ export default function GeneralPageLiting() {
                     table={table}
                     loading={loadingPages}
                 />
-                <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={pageIndex}
-                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
-                </div>
+                <TablePaginationControls
+                    qp={qp}
+                    setQp={setQp}
+                    totalPages={data?.data?.pagination?.total_pages || 1}
+                />
             </div>
         </section>
     )

src/components/pages/dashboard/adminDashboard/players/LatestRegisteredPlayer.tsx

@@ -8,11 +8,13 @@ import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table
 import { useMemo, useState } from 'react';
 
 export default function LatestRegisteredPlayer() {
-    const [pageIndex, _setPageIndex] = useState(1);
-    const [pageSize, _setPageSize] = useState(6);
+    const [qp, _setQp] = useState({
+        pageIndex: 1,
+        pageSize: 10,
+    });
     const { data, isLoading: loadingPlayer } = useGetAllPlayerQuery({
-        pageIndex,
-        pageSize,
+        pageIndex: qp.pageIndex,
+        pageSize: qp.pageSize,
     });
 
     const columns = useMemo<ColumnDef<PlayerItem>[]>(() => [

src/components/pages/dashboard/adminDashboard/players/addPlayerForm/AddPlayerForm.tsx

@@ -10,43 +10,14 @@ import dayjs from 'dayjs';
 import { FormikProps } from 'formik';
 
 const formFieldSx = {
-    '& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': {
-        borderRadius: '27px',
-        background: 'rgba(118, 107, 120, 0.55)',
-        color: '#fff',
-        '& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline': {
-            border: '0.576px solid rgba(255, 255, 255, 0.04)',
-        },
-        '&:hover .MuiOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline': {
-            borderColor: 'rgba(255,255,255,0.2)',
-        },
-        '&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
-            borderColor: '#B801C0',
-        },
+    "&& .MuiPickersInputBase-input": {
+        borderRadius: "8px !important",
+        padding: "10px 0px !important",
     },
-    '& .MuiOutlinedInput-input, & .MuiPickersInputBase-input': {
-        padding: '12px 16px',
-        color: '#fff',
-        '&::placeholder': {
-            color: 'rgba(255, 255, 255, 0.2)',
-            fontWeight: 300,
-            fontSize: '12px',
-            opacity: 1,
-        },
-    },
-    '& .MuiInputAdornment-root': {
-        marginRight: '8px',
-    },
-    '& .MuiInputAdornment-root button': {
-        color: 'rgba(255, 255, 255, 0.7)',
-        '&:hover': {
-            color: '#fff',
-            background: 'rgba(255, 255, 255, 0.08)',
-        }
+
+    "&& .MuiPickersSectionList-root": {
+        padding: "4px  16px 4px 0 !important",
     },
-    '& .MuiIconButton-root': {
-        padding: '8px',
-    }
 };
 
 export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean, buttonLabel?: string }) {
@@ -194,7 +165,6 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
                         value={formik.values.pob}
                         onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
-                        sx={formFieldSx}
                         renderValue={(selected) =>
                             selected === "" ? "Select a State" : selected
                         }
@@ -249,39 +219,7 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
                                     helperText: formik.touched.dob && formik.errors.dob,
                                     sx: formFieldSx
                                 },
-                                popper: {
-                                    sx: {
-                                        '& .MuiPickersCalendarHeader-label': {
-                                            color: '#fff',
-                                        },
-                                        '& .MuiDayCalendar-weekDayLabel': {
-                                            color: '#fff',
-                                        },
-                                        '& .MuiPickersDay-root': {
-                                            color: '#fff',
-                                        },
-                                        '& .MuiPickersDay-root.Mui-selected': {
-                                            backgroundColor: '#B801C0',
-                                        },
-                                        '& .MuiPickersDay-root:hover': {
-                                            backgroundColor: 'rgba(184, 1, 192, 0.3)',
-                                        },
-                                        '& .MuiPickersArrowSwitcher-button': {
-                                            color: '#fff',
-                                        },
-                                        '& .MuiPickersCalendarHeader-root': {
-                                            color: '#fff',
-                                        },
-                                        '& .MuiPickersDay-root.MuiPickersDay-today': {
-                                            backgroundColor: '#B801C0',
-                                            border: '1px solid #fff',
-                                            '&:not(.Mui-selected)': {
-                                                backgroundColor: '#B801C0',
-                                            }
-                                        },
 
-                                    }
-                                }
                             }}
                             maxDate={dayjs()}
                             format="MM/DD/YYYY"

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

@@ -2,6 +2,7 @@
 
 import CustomSwitch from '@/components/atom/Switch';
 import ActionGroup from '@/components/molecules/Action';
+import TablePaginationControls from '@/components/molecules/Pagination';
 import TabController from '@/components/molecules/TabController';
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
@@ -13,20 +14,22 @@ import { showToast, ToastVariant } from '@/slice/toastSlice';
 import { PlayerItem } from '@/types/player';
 import { formatDateTime } from '@/utils/formatDateTime';
 import { getInitials } from '@/utils/getInitials';
-import { Box, Checkbox, Pagination } from '@mui/material';
-import { ColumnDef, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Box, Checkbox } from '@mui/material';
+import { ColumnDef, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import React, { useMemo, useState } from 'react';
 
 export default function PlayerListing() {
     const dispatch = useAppDispatch();
     const [search, setSearch] = useState("");
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [pageIndex, setPageIndex] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
+    const [qp, setQp] = useState({
+        pageIndex: 1,
+        pageSize: 10,
+    });
     const [currentTab, setCurrentTab] = React.useState("");
     const { data, isLoading: loadingPlayer } = useGetAllPlayerQuery({
-        pageIndex: pageIndex,
-        pageSize: pageSize,
+        pageIndex: qp.pageIndex,
+        pageSize: qp.pageSize,
         search: search || "",
         status: currentTab || ""
     });
@@ -180,30 +183,17 @@ export default function PlayerListing() {
             ),
         },
     ], []);
-    // const table = useReactTable({
-    //     data: data?.data?.data || [],
-    //     columns,
-    //     state: {
-    //         sorting,
 
-    //     },
-    //     onSortingChange: setSorting,
-    //     getCoreRowModel: getCoreRowModel(),
-    //     getPaginationRowModel: getPaginationRowModel(),
-    //     getSortedRowModel: getSortedRowModel(),
-    // })
     const table = useReactTable({
         data: data?.data?.data || [],
         columns,
         state: {
             sorting,
-
         },
         onSortingChange: setSorting,
-
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
     });
 
 
@@ -262,25 +252,11 @@ export default function PlayerListing() {
                     table={table}
                     loading={loadingPlayer}
                 />
-                <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={pageIndex}
-                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
-                </div>
+                <TablePaginationControls
+                    qp={qp}
+                    setQp={setQp}
+                    totalPages={data?.data?.pagination?.total_pages || 1}
+                />
             </div>
         </section>
     )

src/components/pages/dashboard/adminDashboard/players/playerDetail/index.tsx

@@ -198,6 +198,7 @@ export default function PlayerDetailPage({ id }: { id: number }) {
                                     percentage: info.percentage,
                                     logo: info.game_logo,
                                     type: info.type,
+                                    username: info.name
                                 };
 
                                 return (

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

 "use client";
 import SortableHeader from '@/components/atom/SortableHeader';
+import TablePaginationControls from '@/components/molecules/Pagination';
 import TableHeader from '@/components/molecules/TableHeader';
 import CustomTable from '@/components/organism/Table';
 import { useAppDispatch } from '@/hooks/hook';
@@ -11,11 +12,10 @@ import { StatusOptions } from '@/types/config';
 import { SingleDepositProps } from '@/types/transaction';
 import { formatDateTime } from '@/utils/formatDateTime';
 import { getInitials } from '@/utils/getInitials';
-import { Box, Pagination } from '@mui/material';
+import { Box } from '@mui/material';
 import {
     ColumnDef,
     getCoreRowModel,
-    getPaginationRowModel,
     getSortedRowModel,
     useReactTable
 } from '@tanstack/react-table';
@@ -29,8 +29,10 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
     const dispatch = useAppDispatch();
 
     const [sorting, setSorting] = useState<{ id: string; desc: boolean }[]>([]);
-    const [pageIndex, setPageIndex] = useState(1);
-    const [pageSize, setPageSize] = useState(10);
+    const [qp, setQp] = useState({
+        pageIndex: 1,
+        pageSize: 10,
+    });
     // const [rowSelection, setRowSelection] = useState({});
     const [status, setStatus] = React.useState<TransactionStatusProps | undefined>();
     const [selectedGame, setSelectedGame] = React.useState("");
@@ -42,8 +44,8 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
 
     const queryArgs = useMemo(
         () => ({
-            pageIndex,
-            pageSize,
+            pageIndex: qp.pageIndex,
+            pageSize: qp.pageSize,
             search: search || "",
             game_id,
             user_id,
@@ -53,7 +55,7 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
             start_date: customRange.startDate,
             end_date: customRange.endDate
         }),
-        [pageIndex, pageSize, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
+        [qp, search, game_id, user_id, status, selectedGame, selectedTransactionType, customRange]
     );
 
     const { data, isLoading: loadingTransaction } = useGetAllTransactionQuery(queryArgs);
@@ -139,9 +141,10 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
         // enableRowSelection: true,
         onSortingChange: setSorting,
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
+        // getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
         // onRowSelectionChange: setRowSelection,
+        manualPagination: true,
     });
 
     const { data: games } = useGetAllGamesQuery();
@@ -222,28 +225,14 @@ export default function TransactionTable({ user_id, game_id, search, setSearch }
 
             <>
                 <CustomTable
-                    key={`${pageIndex}-${pageSize}-${search}-${game_id}-${user_id}`}
+                    key={`${qp.pageIndex}-${qp.pageSize}-${search}-${game_id}-${user_id}`}
                     table={table} loading={loadingTransaction} />
 
-                <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={pageIndex}
-                        onChange={(_, value) => setPageIndex(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
-                </div>
+                <TablePaginationControls
+                    qp={qp}
+                    setQp={setQp}
+                    totalPages={data?.data?.pagination?.total_pages || 1}
+                />
             </>
         </div>
     );

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

@@ -10,6 +10,7 @@ import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import Script from 'next/script';
 import { useState } from 'react';
+import * as Yup from 'yup';
 import { PaymentModeProps } from '.';
 
 declare global {
@@ -27,16 +28,16 @@ type CardFieldValidity = {
     cvv: boolean;
 };
 
-// const billingSchema = Yup.object({
-//     fname: Yup.string().required('First name is required'),
-//     lname: Yup.string().required('Last name is required'),
-//     address1: Yup.string().required('Address is required'),
-//     city: Yup.string().required('City is required'),
-//     state: Yup.string().required('State is required'),
-//     zip: Yup.string()
-//         .required('Zip code is required')
-//         .matches(/^\d{5}(-\d{4})?$/, 'Enter a valid zip code'),
-// });
+const billingSchema = Yup.object({
+    fname: Yup.string().required('First name is required'),
+    lname: Yup.string().required('Last name is required'),
+    address1: Yup.string().required('Address is required'),
+    city: Yup.string().required('City is required'),
+    state: Yup.string().required('State is required'),
+    zip: Yup.string()
+        .required('Zip code is required')
+        .matches(/^\d{5}(-\d{4})?$/, 'Enter a valid zip code'),
+});
 
 
 
@@ -62,7 +63,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
             state: user?.state || '',
             zip: '',
         },
-        // validationSchema: billingSchema,
+        validationSchema: billingSchema,
         onSubmit: () => {
             setCardTouched(true);
             const allCardValid = cardValidity.ccnumber && cardValidity.ccexp && cardValidity.cvv;
@@ -150,7 +151,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
 
                     {/* ── Billing fields ── */}
                     <div className="form-group">
-                        <InputLabel htmlFor="name">First Name</InputLabel>
+                        <InputLabel htmlFor="name">First Name <span className="text-red-500">*</span></InputLabel>
 
                         <OutlinedInput
                             id="fname"
@@ -169,7 +170,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
                     </div>
 
                     <div className="form-group">
-                        <InputLabel htmlFor="name">Last Name</InputLabel>
+                        <InputLabel htmlFor="name">Last Name <span className="text-red-500">*</span></InputLabel>
 
                         <OutlinedInput
                             id="lname"
@@ -188,7 +189,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
                     </div>
 
                     <div className="form-group">
-                        <InputLabel htmlFor="address1">Address</InputLabel>
+                        <InputLabel htmlFor="address1">Address<span className="text-red-500">*</span></InputLabel>
                         <OutlinedInput
                             id="address1"
                             name="address1"
@@ -206,7 +207,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
                     </div>
 
                     <div className="form-group">
-                        <InputLabel htmlFor="city">City</InputLabel>
+                        <InputLabel htmlFor="city">City<span className="text-red-500">*</span></InputLabel>
                         <OutlinedInput
                             id="city"
                             name="city"
@@ -224,7 +225,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
                     </div>
 
                     <div className="form-group">
-                        <InputLabel htmlFor="state">State</InputLabel>
+                        <InputLabel htmlFor="state">State<span className="text-red-500">*</span></InputLabel>
                         <OutlinedInput
                             id="state"
                             name="state"
@@ -242,7 +243,7 @@ export default function PaymentForm({ id, amount, type }: DepositProps & { type:
                     </div>
 
                     <div className="form-group">
-                        <InputLabel htmlFor="zip">Zip Code</InputLabel>
+                        <InputLabel htmlFor="zip">Zip Code<span className="text-red-500">*</span></InputLabel>
                         <OutlinedInput
                             id="zip"
                             name="zip"

src/components/pages/dashboard/userDashboard/withdrawl/index.tsx

@@ -155,7 +155,7 @@ export default function WithdrawlPage({
     };
 
     const handleWithdrawClick = (balance: number, provider: string) => {
-        if (balance < 40 || balance > 400) {
+        if (balance < 10 || balance > 400) {
             dispatch(
                 showToast({
                     message: "Withdraw Amount must be at least $40 and below $400",

src/services/playerApi.ts

@@ -67,7 +67,6 @@ export const playerApi = createApi({
             providesTags: (result, error, { id }) => [{ type: "Players", id }],
         }),
 
-        // UPDATE PLAYER
         updatePlayerById: builder.mutation<SinlgePlayerResponseProps, { id: string; body: FormData }>({
             query: ({ id, body }) => ({
                 url: `/api/admin/update-user/${id}`,

src/types/player.ts

@@ -54,6 +54,7 @@ type GameInformation = {
     game_name: string,
     percentage: number,
     type: string
+    name: string;
 }
 export interface PlayerItem extends CommonPlayerProps {
     id: string;

src/utils/formatDateTime.ts

@@ -16,3 +16,60 @@ export function formatDateTime(dateString: string | null | undefined) {
         }),
     };
 }
+
+// const NY_TZ = "America/New_York";
+
+// function hasTimezoneInfo(dateString: string): boolean {
+//     // Ends with Z, or has +HH:MM / -HH:MM offset
+//     return /Z$|[+-]\d{2}:\d{2}$/.test(dateString);
+// }
+
+// function parseAsNYTime(dateString: string): Date {
+//     // Get current NY UTC offset (handles DST automatically)
+//     const nowInNY = new Date().toLocaleString("en-US", { timeZone: NY_TZ, timeZoneName: "shortOffset" });
+//     const offsetMatch = nowInNY.match(/GMT([+-]\d+(?::\d+)?)/);
+//     const offset = offsetMatch ? offsetMatch[1].padEnd(6, ":00").replace(/^([+-]\d)$/, "$10:00") : "-05:00";
+//     return new Date(`${dateString}${offset}`);
+// }
+
+// export function formatDateTime(dateString: string | null | undefined): { date: string; time: string } {
+//     if (!dateString) return { date: "", time: "" };
+
+//     let dateObj: Date;
+
+//     if (hasTimezoneInfo(dateString)) {
+//         dateObj = new Date(dateString);
+//     } else {
+
+//         dateObj = parseAsNYTime(dateString);
+//         if (process.env.NODE_ENV === "development") {
+//             console.warn(
+//                 `[formatDateTime] Naive date string detected: "${dateString}". ` +
+//                 `Treating as NY time. If backend sends UTC, strings should end with "Z".`
+//             );
+//         }
+//     }
+
+//     if (isNaN(dateObj.getTime())) {
+//         if (process.env.NODE_ENV === "development") {
+//             console.error(`[formatDateTime] Invalid date string: "${dateString}"`);
+//         }
+//         return { date: "", time: "" };
+//     }
+
+//     const date = dateObj.toLocaleDateString("en-US", {
+//         timeZone: NY_TZ,
+//         day: "2-digit",
+//         month: "short",
+//         year: "numeric",
+//     });
+
+//     const time = dateObj.toLocaleTimeString("en-US", {
+//         timeZone: NY_TZ,
+//         hour: "2-digit",
+//         minute: "2-digit",
+//     });
+
+//     return { date, time };
+// }
+