Skip to content

S
sweepstake
Commit 2b69f936 by Arjun Jhukal
Options

update the profile page

parent ad6399c0
Showing with 273 additions and 206 deletions
src/app/(dashboard)/(user)/(privateUser)/account/@page/deposit-history/default.tsx deleted 100644 → 0
import DepositHistoryPage from '@/components/pages/dashboard/userDashboard/depositHistory'
import React from 'react'
export default function DepositHistory() {
return (
<DepositHistoryPage />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/deposit-history/page.tsx deleted 100644 → 0
import DepositHistoryPage from '@/components/pages/dashboard/userDashboard/depositHistory'
import React from 'react'
export default function DepositHistory() {
return (
<DepositHistoryPage />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/account/default.tsx deleted 100644 → 0
import EditUserProfile from '@/components/pages/dashboard/userDashboard/account/profile/editProfile';
import React from 'react'
export default async function UserAccountUpdate(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params;
return (
<EditUserProfile id={id} />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/account/page.tsx deleted 100644 → 0
import EditUserProfile from '@/components/pages/dashboard/userDashboard/account/profile/editProfile';
import React from 'react'
export default async function UserAccountUpdate(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params;
return (
<EditUserProfile id={id} />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/change-password/page.tsx deleted 100644 → 0
import React from 'react'
export default function UserPasswordChanger() {
return (
<div>UserPasswordChanger</div>
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/wallet/default.tsx deleted 100644 → 0
import EditUserWallet from '@/components/pages/dashboard/userDashboard/account/profile/editUserWallet'
import { Button, InputLabel, OutlinedInput } from '@mui/material'
import { InfoCircle, WalletCheck } from '@wandersonalwes/iconsax-react'
import React from 'react'
export default function UserWallet() {
return (
<EditUserWallet />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/@section/wallet/page.tsx deleted 100644 → 0
import EditUserWallet from '@/components/pages/dashboard/userDashboard/account/profile/editUserWallet'
import { Button, InputLabel, OutlinedInput } from '@mui/material'
import { InfoCircle, WalletCheck } from '@wandersonalwes/iconsax-react'
import React from 'react'
export default function UserWallet() {
return (
<EditUserWallet />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/layout.tsx deleted 100644 → 0
// "use client";
import TabController from "@/components/molecules/TabController";
import UserProfileCard from "@/components/organism/Cards/UserProfileCard";
import { getUserGameBalance } from "@/serverApi/game";
export default async function ProfileTabs({ section }: { section: React.ReactNode }) {
const balance = await getUserGameBalance();
const links = [
{ href: "/account/profile/account", label: "Account Details" },
{ href: "/account/profile/wallet", label: "Wallet Information" },
{ href: "/account/profile/change-password", label: "Change Password" },
];
return (
<div className='profile__root'>
<div className="grid lg:grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-5">
<UserProfileCard balance={balance} />
</div>
<div className="col-span-12 lg:col-span-7">
<TabController links={links} />
{section}
</div>
</div>
</div>
);
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/profile/page.tsx deleted 100644 → 0
import { redirect } from 'next/navigation';
export default function ProfilePage() {
return redirect("/account/profile/account");
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/withdrawl-history/default.tsx deleted 100644 → 0
import WithdrawnHistoryPage from '@/components/pages/dashboard/userDashboard/withdrawlHistory'
import React from 'react'
export default function WithdrawlHistory() {
return (
<WithdrawnHistoryPage />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/@page/withdrawl-history/page.tsx deleted 100644 → 0
import WithdrawnHistoryPage from '@/components/pages/dashboard/userDashboard/withdrawlHistory'
import React from 'react'
export default function WithdrawlHistory() {
return (
<WithdrawnHistoryPage />
)
}
src/app/(dashboard)/(user)/(privateUser)/account/AccountTab.tsx 0 → 100644
import TabController from '@/components/molecules/TabController';
import UserProfileCard from "@/components/organism/Cards/UserProfileCard";
import EditUserProfile from '@/components/pages/dashboard/userDashboard/account/profile/editProfile';
import EditUserWallet from '@/components/pages/dashboard/userDashboard/account/profile/editUserWallet';
import { useAppSelector } from '@/hooks/hook';
import { useGetUserGameBalanceQuery } from '@/services/userApi';
import React from 'react';
type profileTabProps = "account_detail" | "wallet_information" | "change_password"
export default function AccountTab() {
const { data, isLoading } = useGetUserGameBalanceQuery();
const [currentActiveTab, setCurrentActiveTab] = React.useState<profileTabProps>("account_detail");
const handleTabChange = (tab: string) => {
setCurrentActiveTab(tab as profileTabProps);
};
const user = useAppSelector((state) => state.auth.user);
const renderTabContent = () => {
switch (currentActiveTab) {
case "account_detail":
return <EditUserProfile id={user?.id as string | ""} />;
case "wallet_information":
return <EditUserWallet />;
case "change_password":
return <h2>Change Password</h2>;
default:
return null;
}
};
return (
<div className='profile__root'>
<div className="grid lg:grid-cols-12 gap-6">
<div className="col-span-12 lg:col-span-5">
<UserProfileCard balance={data} loading={isLoading} />
</div>
<div className="col-span-12 lg:col-span-7">
<TabController links={[
{ value: "account_detail", label: "Account Details" },
{ value: "wallet_information", label: "Wallet Information" },
{ value: "change_password", label: "Change Password" },
]} currentTab={currentActiveTab} onTabChange={handleTabChange} />
{renderTabContent()}
</div>
</div>
</div>
)
}
src/app/(dashboard)/(user)/(privateUser)/account/layout.tsx
import TabController from '@/components/molecules/TabController';
import EditIcon from '@/icons/EditIcon';
import { Coin, User } from '@wandersonalwes/iconsax-react';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react'
export default function AccountLayout({ children, page }: { children: React.ReactNode; page: React.ReactNode }) {
const links = [
{
href: "/account/profile/account", label: "Account", icon: <User className='mx-auto' />
},
{
href: "/account/deposit-history", label: "Deposit History",
icon: <Coin className='mx-auto' />
},
{ href: "/account/withdrawl-history", label: "Withdrawal History", icon: <Coin className='mx-auto' /> },
];
return (
<section className="account__root">
{/* Sidebar */}
<TabController links={links} />
<>
{page}
</>
{children}
</section>
);
}
src/app/(dashboard)/(user)/(privateUser)/account/page.tsx
import { redirect } from "next/navigation";
"use client";
import React from "react";
import AccountTab from "./AccountTab";
import TabController from "@/components/molecules/TabController";
import { Tab } from "@mui/material";
import WithdrawnHistoryPage from "@/components/pages/dashboard/userDashboard/withdrawlHistory";
import DepositHistoryPage from "@/components/pages/dashboard/userDashboard/depositHistory";
type AccountTabProps = "account" | "deposit" | "withdraw"
export default function ProfilePage() {
return redirect("/account/profile/account");
const [currentActiveTab, setCurrentActiveTab] = React.useState<AccountTabProps>("account");
const handleTabChange = (tab: string) => {
setCurrentActiveTab(tab as AccountTabProps);
};
const renderTabContent = () => {
switch (currentActiveTab) {
case "account":
return <AccountTab />;
case "deposit":
return <DepositHistoryPage />;
case "withdraw":
return <WithdrawnHistoryPage />;
default:
return null;
}
};
return (
<>
<TabController links={[
{ label: "Account", value: "account" },
{ label: "Deposit", value: "deposit" },
{ label: "Withdraw", value: "withdraw" },
]}
currentTab={currentActiveTab}
onTabChange={handleTabChange} />
{renderTabContent()}
</>
);
}
src/components/molecules/TabController.tsx
"use client";
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React from 'react'
export default function TabController({ links }: {
links: {
href: string;
label: string;
icon?: React.ReactNode;
}[]
import React, { useRef, useState } from "react";
import {
Box,
Button,
Popper,
Paper,
ClickAwayListener,
List,
ListItem,
Fade,
Typography,
ListItemButton,
} from "@mui/material";
import { ArrowDown2, Menu } from "@wandersonalwes/iconsax-react";
type TabLink = { label: string; value: string, icon?: React.ReactNode };
export default function TabController({
links,
currentTab,
onTabChange,
}: {
links: TabLink[];
currentTab: string;
onTabChange: (tab: string) => void;
}) {
const pathname = usePathname();
const anchorRef = useRef<HTMLButtonElement | null>(null);
const [open, setOpen] = useState(false);
const handleToggle = () => setOpen((prev) => !prev);
const handleClose = (event: MouseEvent | TouchEvent) => {
if (anchorRef.current?.contains(event.target as Node)) return;
setOpen(false);
};
const handleTabClick = (tab: string) => {
onTabChange(tab);
setOpen(false); // close mobile popper when tab changes
};
const currentTabLabel = links.find((link) => link.value === currentTab)?.label || "";
const currentTabIcon = links.find((link) => link.value === currentTab)?.icon || "";
return (
<nav className="flex gap-4 mb-4">
{links.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.href}
href={link.href}
className={`tab__link p-4 text-[14px] text-center ${isActive ? "active " : ""
}`}
<Box className="mb-4">
{/* Desktop Tabs */}
<Box className="hidden md:flex gap-4">
{links.map((link) => (
<a
href="#"
key={link.value}
color="secondary"
onClick={(e) => { e.preventDefault(); handleTabClick(link.value) }}
className={` tab__link !p-4 !text-[14px] !text-center ${currentTab === link.value ? "active" : ""}`}
>
{link.icon && link.icon}
{link.label}
</Link>
);
})}
</nav>
)
</a>
))}
</Box>
{/* Mobile Tabs as Popper */}
<Box className="flex md:hidden">
<Button ref={anchorRef} onClick={handleToggle} color="primary" className="!justify-between !p-2 !border !border-solid !border-gray-600 !rounded-lg" endIcon={<ArrowDown2 size={20} />} >
<Typography>
{currentTabIcon}
{currentTabLabel}</Typography>
</Button>
<Popper
open={open}
anchorEl={anchorRef.current}
placement="bottom-start"
transition
style={{ zIndex: 1300 }}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper elevation={3}>
<ClickAwayListener onClickAway={handleClose}>
<List>
{links.map((link) => (
<ListItem
key={link.value}
>
<ListItemButton
selected={currentTab === link.value}
onClick={() => handleTabClick(link.value)}>
<Typography>{link.label}</Typography>
</ListItemButton>
</ListItem>
))}
</List>
</ClickAwayListener>
</Paper>
</Fade>
)}
</Popper>
</Box>
</Box >
);
}
src/components/organism/Cards/UserProfileCard.tsx
......@@ -5,11 +5,12 @@ import { formatDateTime } from '@/utils/formatDateTime';
import Image from 'next/image'
import React from 'react'
export default function UserProfileCard({ balance }: { balance: any }) {
export default function UserProfileCard({ balance, loading }: { balance: any; loading?: boolean }) {
const user = useAppSelector(state => state.auth.user);
const { date } = formatDateTime(user?.registered_date as string);
return (
<div className="player__info text-center rounded-xl lg:rounded-3xl p-8 lg:py-10 lg:px-9" style={{
<div className="player__info text-center rounded-xl lg:rounded-3xl p-4 lg:py-10 lg:px-9" style={{
background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)"
}}>
<div className="player__profile bg-primary-grad p-[1px] rounded-full max-w-fit mx-auto relative">
......@@ -19,42 +20,73 @@ export default function UserProfileCard({ balance }: { balance: any }) {
</div>
</div>
<h1 className="text-24 lg:text-[32px] text-white my-1">{user?.name}</h1>
<p className="text-white text-[11px] lg:text-[14px]">Joined: {date}</p>
<p className="text-white text-[11px] lg:text-[14px] mt-4">Joined: {date}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
<div className="col-span-1 md:col-span-2 rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<div className="flex justify-center items-center gap-3">
<Image src={"/assets/images/current-balance.svg"} alt='' width={48} height={48} />
<div className="content mt-3 text-start">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.current_balance}</strong>
<span className="text-white text-[9px]">Current Balance</span>
{loading ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
{/* Current Balance */}
<div className="col-span-1 md:col-span-2 rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<div className="flex justify-center items-center gap-3 animate-pulse">
<div className="h-12 w-12 bg-gray-400 rounded-full" />
<div className="content mt-3 text-start w-32">
<div className="h-4 bg-gray-400 rounded mb-2 w-full"></div>
<div className="h-3 bg-gray-400 rounded w-1/2"></div>
</div>
</div>
</div>
</div>
<div className="col-span-2 flex gap-2">
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/deposit.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3 ">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_deposited}</strong>
<span className="text-white text-[9px]">Total Deposited</span>
</div>
{/* Other Cards */}
<div className="col-span-2 flex flex-col sm:flex-row gap-2">
{[0, 1, 2].map((_, index) => (
<div
key={index}
className="w-full rounded-[14px] p-4 lg:py-6 flex justify-center sm:block text-left sm:text-center gap-3 animate-pulse"
style={{ background: "rgba(191, 26, 198, 0.10)" }}
>
<div className="h-12 w-12 bg-gray-400 rounded-full sm:mx-auto" />
<div className="content mt-3 w-32 sm:w-full">
<div className="h-4 bg-gray-400 rounded mb-2 w-3/4"></div>
<div className="h-3 bg-gray-400 rounded w-1/2"></div>
</div>
</div>
))}
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_withdrawn}</strong>
<span className="text-white text-[9px]">Total Withdrawal</span>
</div>) :
(<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-4">
<div className="col-span-1 md:col-span-2 rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<div className="flex justify-center items-center gap-3">
<Image src={"/assets/images/current-balance.svg"} alt='' width={48} height={48} />
<div className="content mt-3 text-start">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.current_balance}</strong>
<span className="text-white text-[9px]">Current Balance</span>
</div>
</div>
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_winnings || 0}</strong>
<span className="text-white text-[9px]">Total Winnings</span>
<div className="col-span-2 flex flex-col sm:flex-row gap-2">
<div className="w-full rounded-[14px] p-4 lg:py-6 flex justify-center sm:block text-left sm:text-center gap-3" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/deposit.svg"} alt='' width={48} height={48} className='sm:mx-auto' />
<div className="content mt-3 ">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_deposited}</strong>
<span className="text-white text-[9px]">Total Deposited</span>
</div>
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6 flex justify-center sm:block text-left sm:text-center gap-3" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='sm:mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_withdrawn}</strong>
<span className="text-white text-[9px]">Total Withdrawal</span>
</div>
</div>
<div className="w-full rounded-[14px] p-4 lg:py-6 flex justify-center sm:block text-left sm:text-center gap-3" style={{ background: "rgba(191, 26, 198, 0.10)" }}>
<Image src={"/assets/images/withdrawn.svg"} alt='' width={48} height={48} className='sm:mx-auto' />
<div className="content mt-3">
<strong className="text-[12px] leading-[120%] font-[700] text-white block ">${balance?.data?.total_winnings || 0}</strong>
<span className="text-white text-[9px]">Total Winnings</span>
</div>
</div>
</div>
</div>
</div>
</div>)
}
</div>
)
}
src/components/organism/Header/Profile.tsx
......@@ -31,7 +31,7 @@ export default function ProfileBlock() {
const menuItems = [
{
label: "Profile",
href: "/account/profile/account",
href: "/account",
icon: <Profile size="20" className="group-hover:text-primary" />,
},
{
......@@ -41,12 +41,12 @@ export default function ProfileBlock() {
},
{
label: "Deposit History",
href: "/account/deposit-history",
href: "/account?page=deposit-history",
icon: <Coin size="20" className="group-hover:text-primary" />,
},
{
label: "Withdraw History",
href: "/account/withdrawl-history",
href: "/account?page=withdrawl-history",
icon: <MoneySend size="20" className="group-hover:text-primary" />,
},
{
......@@ -149,7 +149,7 @@ export default function ProfileBlock() {
</Link> : <ListItemButton
href={item.href || ""}
onClick={item.onClick}
className={`flex items-center py-3 px-4 !hover:bg-[#FBF4FB] group`}
className={`flex items-center py-3 px-4 !withover:bg-[#FBF4FB] group`}
>
<ListItemIcon className="min-w-[30px] mr-1 group-hover:text-primary">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} className='group-hover:text-primary' />
......
src/components/pages/dashboard/adminDashboard/players/addPlayerForm/AddPlayerForm.tsx
......@@ -10,6 +10,7 @@ import React from 'react'
export default function AddPlayerForm({ formik, id, data, loading }: { formik: FormikProps<PlayerProps>, id?: string, data?: SinlgePlayerResponseProps, loading?: boolean }) {
const router = useRouter();
console.log(loading)
return (
<form onSubmit={formik.handleSubmit}>
<div className="form__fields p-6 lg:p-10 flex flex-col gap-4 lg:gap-6 lg:grid grid-cols-2">
......@@ -186,7 +187,7 @@ export default function AddPlayerForm({ formik, id, data, loading }: { formik: F
router.push(PATH.ADMIN.PLAYERS.ROOT)
}}>Cancel Player Edit</Button> : null} */}
<Button type="submit" variant="contained" color="primary" sx={{ color: "#fff" }} >
{loading ? `Confirm ${id ? "Player Update" : "Player Addition"}` : "Updating"}
{!loading ? `Confirm ${id ? "Player Update" : "Player Addition"}` : "Updating"}
</Button>
</div>
</form>
......
src/components/pages/dashboard/userDashboard/account/profile/editProfile/index.tsx
......@@ -15,8 +15,8 @@ export default function EditUserProfile({ id }: { id: string }) {
const dispatch = useAppDispatch();
const router = useRouter();
const [updateUserProfile, { isLoading }] = useUpdateUserProfileMutation();
const user = useAppSelector((state) => state.auth.user);
const access_token = useAppSelector((state) => state.auth.access_token);
const user = useAppSelector((state) => state?.auth.user);
const access_token = useAppSelector((state) => state?.auth.access_token);
......
src/components/pages/dashboard/userDashboard/gameCredentials/CredentialsCard.tsx
......@@ -51,8 +51,8 @@ export default function CredentialsCard({ cred, balance }: { cred: CredentialsPr
<CardPasswordField password={cred?.credentials.password} />
</li>
</ul>
<div className="action__group mt-4 flex justify-between gap-4">
<Link href={"/buy-coins"} className='ss-btn bg-primary-grad flex justify-center items-center gap-1'><Coin />Buy Coins</Link>
<div className="action__group mt-4 flex flex-col md:flex-row justify-between gap-2 md:gap-4">
<Link href={`/buy-coins/${cred?.id}`} className='ss-btn bg-primary-grad flex justify-center items-center gap-1'><Coin />Buy Coins</Link>
<Link href={cred.game_url} target='_blank' className='ss-btn bg-secondary-grad flex justify-center items-center text-[#426A66] gap-2 '>
<TapIcon />
Play Game
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
......@@ -17,7 +17,7 @@ export default function ExclusiveGameDetail({ game }: { game: SingleGameResponse
<div className="md:grid md:grid-cols-12 flex flex-col gap-8 lg:gap-20">
<div className="col-span-12 md:col-span-4">
<div className="aspect-[420/433] max-w-[420px] relative rounded-xl overflow-hidden">
<div className="aspect-[420/433] relative rounded-xl overflow-hidden">
<Image src={game?.data?.thumbnail || "/assets/images/fallback.png"} fill className="object-cover" alt={game?.data?.name} />
</div>
</div>
......
src/services/userApi.ts
......@@ -2,6 +2,8 @@ import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
import { UserBalance, UserBalanceResponse } from "@/types/user";
import { getUserGameBalance } from "@/serverApi/game";
import { CredentialsResponseProps } from "@/types/game";
export const userApi = createApi({
reducerPath: "userApi",
......@@ -37,9 +39,15 @@ export const userApi = createApi({
method: "GET"
}),
providesTags: ['user']
}),
getUserGameBalance: builder.query<SinlgePlayerResponseProps, void>({
query: () => ({
url: "/api/detail/get-balance",
method: "GET"
})
})
})
})
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery } = userApi;
\ No newline at end of file
export const { useAddUserWalletMutation, useUpdateUserProfileMutation, useGetUserBalanceQuery, useGetUserBalanceBySlugQuery, useGetUserGameBalanceQuery } = userApi;
\ No newline at end of file
src/types/game.ts
......@@ -69,6 +69,7 @@ export const gameInitialValues: GameProps = {
export interface CredentialsProps {
id?: string;
name: string,
credentials: {
password: string,
......
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