updated the minor changes

src/components/organism/dialog/AgeGate.tsx

@@ -27,6 +27,7 @@ export default function AgeGate() {
             key: process.env.NEXT_PUBLIC_AGE_CHECKER_KEY,
             mode: "manual",
             autoload: true,
+            show_close: true,
             onready: () => {
                 (window as any).AgeCheckerAPI.show(uuid);
             },
@@ -35,6 +36,10 @@ export default function AgeGate() {
                     handleSuccess(verification.uuid);
                 }
             },
+            onpagehide: () => {
+                (window as any).AgeCheckerAPI.close();
+                // Optional: Handle page hide if needed
+            }
         };
 
         // 3. Now load the script

src/components/pages/auth/register/index.tsx

@@ -65,11 +65,11 @@ const validationSchema = Yup.object().shape({
         .email('Must be a valid email')
         .max(255)
         .required('Email is required'),
-    displayName: Yup.string()
-        .required("Display Name is required")
-        .max(14, "Display Name must be less than 14 characters")
-        .min(6, "Display Name must be at least 6 characters long")
-        .matches(/^\S+$/, "Display Name cannot contain spaces"),
+    // displayName: Yup.string()
+    //     .required("Display Name is required")
+    //     .max(14, "Display Name must be less than 14 characters")
+    //     .min(6, "Display Name must be at least 6 characters long")
+    //     .matches(/^\S+$/, "Display Name cannot contain spaces"),
     phone: Yup.string()
         .required("Phone number is required"),
     password: Yup.string()
@@ -94,7 +94,7 @@ const validationSchema = Yup.object().shape({
     first_name: Yup.string().required('First name is required'),
     middle_name: Yup.string(),
     last_name: Yup.string().required('Last name is required'),
-    photoid_number: Yup.string().required('Photo ID is required'),
+    // photoid_number: Yup.string().required('Photo ID is required'),
     city: Yup.string(),
     pob: Yup.string().required('Place of birth is required'),
     agree: Yup.boolean().required().oneOf([true], 'You must agree to the terms and conditions'),
@@ -160,7 +160,7 @@ export default function RegisterPage() {
         password: "",
         confirmPassword: "",
         phone: "",
-        photoid_number: '',
+        // photoid_number: '',
         dob: null as Dayjs | null,
         city: '',
         pob: '',
@@ -190,7 +190,7 @@ export default function RegisterPage() {
                         middle_name: values.middle_name,
                         last_name: values.last_name,
                         phone: fullPhoneNumber,
-                        photoid_number: values.photoid_number,
+                        // photoid_number: values.photoid_number,
                         dob: formattedDob,
                         city: values.city,
                         pob: values.pob,
@@ -332,9 +332,8 @@ export default function RegisterPage() {
 
 
                         {/* Photo ID */}
-                        <div className="col-span-2 lg:col-span-3">
+                        {/* <div className="col-span-2 lg:col-span-3">
                             <div className="input__field">
-                                {/* <InputLabel htmlFor="photoid_number"></InputLabel> */}
                                 <PasswordField
                                     label='Photo ID Number'
                                     name="photoid_number"
@@ -345,7 +344,7 @@ export default function RegisterPage() {
                                 />
                                 <span className="error">{touched.photoid_number && errors.photoid_number}</span>
                             </div>
-                        </div>
+                        </div> */}
 
                         {/* Address */}
                         <div className="col-span-2 lg:col-span-3">

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

@@ -3,8 +3,51 @@ import InputFile from '@/components/atom/InputFile';
 import PasswordField from '@/components/molecules/PasswordField';
 import { PlayerProps, SinlgePlayerResponseProps } from '@/types/player';
 import { Button, InputLabel, OutlinedInput } from '@mui/material';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+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',
+        },
+    },
+    '& .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)',
+        }
+    },
+    '& .MuiIconButton-root': {
+        padding: '8px',
+    }
+};
+
 export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean, buttonLabel?: string }) {
 
     return (
@@ -139,6 +182,67 @@ export default function AddPlayerForm({ formik, id, data, loading, buttonLabel }
                     </span>
                 </div>
 
+                {/* DOB */}
+                <div className="input__field">
+                    <InputLabel htmlFor="dob">Date of Birth <span className="text-red-500">*</span></InputLabel>
+                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                        <DatePicker
+                            value={formik.values.dob ? dayjs(formik.values.dob) : null}
+                            onChange={(newValue) => {
+                                formik.setFieldValue('dob', newValue);
+                            }}
+                            onClose={() => formik.setFieldTouched('dob', true)}
+                            slotProps={{
+                                textField: {
+                                    fullWidth: true,
+                                    id: 'dob',
+                                    name: 'dob',
+                                    placeholder: 'MM/DD/YYYY',
+                                    error: Boolean(formik.touched.dob && formik.errors.dob),
+                                    onBlur: formik.handleBlur,
+                                    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"
+                        />
+                    </LocalizationProvider>
+                </div>
+
                 <div className="input__field">
                     <PasswordField
                         name="password"

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

@@ -4,6 +4,7 @@ import { useAppDispatch } from '@/hooks/hook'
 import { useCreatePlayerMutation, useGetPlayerByIdQuery, useUpdatePlayerByIdMutation } from '@/services/playerApi'
 import { showToast, ToastVariant } from '@/slice/toastSlice'
 import { initialPlayerValues } from '@/types/player'
+import dayjs, { Dayjs } from 'dayjs'
 import { useFormik } from 'formik'
 import { useRouter } from 'next/navigation'
 import * as Yup from "yup"
@@ -30,6 +31,14 @@ export const PlayerValidationSchema = (isEdit: boolean) => Yup.object().shape({
         then: (schema) => schema.oneOf([Yup.ref("password")], "Passwords must match").required("Password confirmation is required"),
         otherwise: (schema) => schema.nullable(),
     }),
+    dob: Yup.date()
+        .required("Date of birth is required")
+        .max(new Date(), 'Date of birth cannot be in the future')
+        .test('age', 'You must be at least 21 years old', function (value) {
+            if (!value) return true;
+            const cutoff = dayjs().subtract(21, 'years');
+            return dayjs(value).isBefore(cutoff);
+        }),
     // profile_image: Yup.mixed().required("Profile is required"),
 });
 export default function AddPlayerPage({ id }: { id?: string }) {
@@ -57,6 +66,7 @@ export default function AddPlayerPage({ id }: { id?: string }) {
             password: data?.data.password,
             password_confirmation: data?.data.password_confirmation,
             profile_image: null,
+            dob: data?.data.dob || null as Dayjs | null,
         } : initialPlayerValues,
         validationSchema: PlayerValidationSchema(!!id),
         enableReinitialize: true,
@@ -72,6 +82,7 @@ export default function AddPlayerPage({ id }: { id?: string }) {
             if (values.address) formData.append("address", values.address);
             if (values.city) formData.append("city", values.city);
             if (values.phone) formData.append("phone", values.phone);
+            if (values.dob) formData.append("dob", values.dob.toString());
 
             if (values.profile_image) {
                 if (Array.isArray(values.profile_image)) {

src/components/pages/dashboard/userDashboard/account/profile/editProfile/index.tsx

@@ -6,6 +6,7 @@ import { useUpdateUserProfileMutation } from '@/services/userApi';
 import { setTokens } from '@/slice/authSlice';
 import { showToast, ToastVariant } from '@/slice/toastSlice';
 import { initialPlayerValues, PlayerItem } from '@/types/player';
+import dayjs, { Dayjs } from 'dayjs';
 import { useFormik } from 'formik';
 
 export default function EditUserProfile({ id, buttonLabel }: { id: string, buttonLabel?: string; }) {
@@ -16,7 +17,6 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
     const access_token = useAppSelector((state) => state?.auth.access_token);
 
 
-
     const formik = useFormik({
         initialValues: user ? {
             name: user.name,
@@ -30,10 +30,12 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
             password: '',
             password_confirmation: '',
             profile_image: null,
+            dob: user.dob || null as Dayjs | null,
         } : initialPlayerValues,
-        validationSchema: PlayerValidationSchema(!!user?.id),
+        validationSchema: PlayerValidationSchema(user?.id ? true : false),
         enableReinitialize: true,
         onSubmit: async (values) => {
+            const formattedDob = values.dob ? dayjs(values.dob).format('YYYY-MM-DD') : '';
             const formData = new FormData();
             formData.append("name", values.name);
             formData.append("email", values.email);
@@ -41,10 +43,12 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
             formData.append("last_name", values.last_name);
             formData.append("password", values.password);
             formData.append("password_confirmation", values.password_confirmation);
+
             if (values.wallet_address) formData.append("wallet_address", values.wallet_address);
             if (values.address) formData.append("address", values.address);
             if (values.city) formData.append("city", values.city);
             if (values.phone) formData.append("phone", values.phone);
+            if (values.dob) formData.append("dob", formattedDob);
 
             if (values.profile_image) {
                 if (Array.isArray(values.profile_image)) {
@@ -69,7 +73,7 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
                 dispatch(
                     setTokens({
                         access_token: access_token,
-                        user: response?.data?.data,
+                        user: { ...user, ...response?.data?.data },
                     }),
                 );
             }
@@ -103,6 +107,7 @@ export default function EditUserProfile({ id, buttonLabel }: { id: string, butto
                 total_withdrawl: user.total_withdrawl ?? undefined,
                 total_deposited: user.total_deposited ?? undefined,
                 profile_image_file: user.profile_image_file ?? undefined,
+                dob: user.dob ? dayjs(user.dob).format('YYYY-MM-DD') : undefined,
             } as PlayerItem,
         }
         : undefined;

src/types/auth.ts

@@ -36,7 +36,7 @@ export interface RegisterProps extends LoginProps {
     middle_name: string;
     last_name: string;
     phone: string;
-    photoid_number: string;
+    // photoid_number: string;
     dob: string;
     city: string;
     pob: string;

src/types/player.ts

+import { Dayjs } from "dayjs";
 import { Pagination } from "./game";
 
 
@@ -14,6 +15,7 @@ export interface CommonPlayerProps {
     password_confirmation: string;
     role?: string;
     state?: string;
+    dob?: string | Dayjs | null;
 }
 export interface PlayerProps extends CommonPlayerProps {
     id?: string;
@@ -37,6 +39,7 @@ export const initialPlayerValues: PlayerProps = {
     password: "",
     password_confirmation: "",
     profile_image: null,
+    dob: null as Dayjs | null,
 };
 
 type GameInformation = {