[V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Added premium carousel animations and texture overlay */ @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes slideIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scalePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } /* Added fadeIn animation for skeleton loader fade-in effect */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-shimmer { animation: shimmer 2s infinite; } .animate-slide-in { animation: slideIn 0.6s ease-out; } .animate-scale-pulse { animation: scalePulse 2s ease-in-out; } /* Added fadeIn animation class for smooth content appearance */ .animate-fadeIn { animation: fadeIn 0.5s ease-out; } /* Premium texture background */ .texture-overlay::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.02) 0%, transparent 50%); pointer-events: none; } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDown } from 'lucide-react' import { cn } from '@/lib/utils' const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = 'AccordionItem' const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180', className, )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (

{children}

)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' const AlertDialog = AlertDialogPrimitive.Root const AlertDialogTrigger = AlertDialogPrimitive.Trigger const AlertDialogPortal = AlertDialogPrimitive.Portal const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogHeader.displayName = 'AlertDialogHeader' const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) AlertDialogFooter.displayName = 'AlertDialogFooter' const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground', { variants: { variant: { default: 'bg-background text-foreground', destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', }, }, defaultVariants: { variant: 'default', }, }, ) const Alert = React.forwardRef< HTMLDivElement, React.HTMLAttributes & VariantProps >(({ className, variant, ...props }, ref) => (

)) Alert.displayName = 'Alert' const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) AlertTitle.displayName = 'AlertTitle' const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
)) AlertDescription.displayName = 'AlertDescription' export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' const AspectRatio = AspectRatioPrimitive.Root export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', outline: 'text-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (
) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' const Breadcrumb = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode } >(({ ...props }, ref) =>
) Breadcrumb.displayName = 'Breadcrumb' const BreadcrumbList = React.forwardRef< HTMLOListElement, React.ComponentPropsWithoutRef<'ol'> >(({ className, ...props }, ref) => (
)) BreadcrumbList.displayName = 'BreadcrumbList' const BreadcrumbItem = React.forwardRef< HTMLLIElement, React.ComponentPropsWithoutRef<'li'> >(({ className, ...props }, ref) => (
)) BreadcrumbItem.displayName = 'BreadcrumbItem' const BreadcrumbLink = React.forwardRef< HTMLAnchorElement, React.ComponentPropsWithoutRef<'a'> & { asChild?: boolean } >(({ asChild, className, ...props }, ref) => { const Comp = asChild ? Slot : 'a' return ( ) }) BreadcrumbLink.displayName = 'BreadcrumbLink' const BreadcrumbPage = React.forwardRef< HTMLSpanElement, React.ComponentPropsWithoutRef<'span'> >(({ className, ...props }, ref) => ( )) BreadcrumbPage.displayName = 'BreadcrumbPage' const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
) BreadcrumbSeparator.displayName = 'BreadcrumbSeparator' const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => ( ) BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis' export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, } [V0_FILE]typescriptreact:file="components/ui/button-group.tsx" isMerged="true" import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { Separator } from '@/components/ui/separator' const buttonGroupVariants = cva( "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>]:focus-visible:relative [&>]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class='w-'])]:w-fit [&>input]:flex-1", { variants: { orientation: { horizontal: '[&>:not(:first-child)]:rounded-l-none [&>:not(:first-child)]:border-l-0 [&>:not(:last-child)]:rounded-r-none', vertical: 'flex-col [&>:not(:first-child)]:rounded-t-none [&>:not(:first-child)]:border-t-0 [&>:not(:last-child)]:rounded-b-none', }, }, defaultVariants: { orientation: 'horizontal', }, }, ) function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<'div'> & VariantProps) { return (
) } function ButtonGroupText({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'div' return ( ) } function ButtonGroupSeparator({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', sm: 'h-9 rounded-md px-3', lg: 'h-11 rounded-md px-8', icon: 'h-10 w-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : 'button' return ( ) }, ) Button.displayName = 'Button' export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-[--cell-size] aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-[--cell-size] w-full px-[--cell-size]', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-[--cell-size] gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-[--cell-size]', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (
) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (
{children}
) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) }) CarouselPrevious.displayName = 'CarouselPrevious' const CarouselNext = React.forwardRef< HTMLButtonElement, React.ComponentProps >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = 'CarouselNext' export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } const ChartContainer = React.forwardRef< HTMLDivElement, React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] } >(({ id, className, children, config, ...props }, ref) => { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (
{children}
) }) ChartContainer.displayName = 'Chart' const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([_, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return (
) } [V0_FILE]typescriptreact:file="app/browse/game/[slug]/page.tsx" isMerged="true" "use client" import { useParams, useRouter } from "next/navigation" import { browseGamesWithSlugs } from "@/lib/browse-data" import { allGames } from "@/lib/game-data" import Link from "next/link" import { Button } from "@/components/ui/button" import { X } from "lucide-react" import { BrowseGameDetail } from "@/components/browse-game-detail" import { useEffect } from "react" export default function BrowseGameDetailPage() { const params = useParams() const router = useRouter() const slug = params.slug as string useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }) }, [slug]) let game = browseGamesWithSlugs.find((g) => g.slug === slug) if (!game) { const gameId = Number.parseInt(slug.split("-")[0]) if (!isNaN(gameId)) { const foundGame = allGames.find((g) => g.id === gameId) if (foundGame) { game = { ...foundGame, slug: slug, id: foundGame.id, title: foundGame.title, price: foundGame.price, image: foundGame.image, } as any } } if (!game) { // Extract title from slug (remove leading id and dashes) const slugWithoutId = slug.split("-").slice(1).join("-") const foundByTitle = allGames.find((g) => g.title.toLowerCase().replace(/[^a-z0-9]+/g, "-") === slugWithoutId) if (foundByTitle) { game = { ...foundByTitle, slug: slug, id: foundByTitle.id, title: foundByTitle.title, price: foundByTitle.price, image: foundByTitle.image, } as any } } } const handleClose = () => { router.back() } if (!game) { return (

Game Not Found

) } return (
{/* Header /}

{game.title}

{/ Spacer for centering /}

{/ Main Content - Use BrowseGameDetail component /}
) } [V0_FILE]typescript:file="lib/browse-data.ts" isMerged="true" // Helper to create URL-friendly slugs from game titles const createSlug = (title: string): string => { return title .toLowerCase() .replace(/[^\w\s-]/g, "") .replace(/\s+/g, "-") .replace(/-+/g, "-") .trim() } // Normalize category strings for consistent URL and display purposes const normalizeCategory = (category: string): string => { return category .toLowerCase() .trim() .replace(/\s+/g, "-") .replace(/[^\w-]/g, "") } export interface BrowseGame { id: number title: string description: string price: number image: string isTrending?: boolean tags: string[] category: string rating?: number trendingRank?: number trailer_url?: string ageRating?: string developer: string publisher: string releaseDate: string features: string[] systemRequirements: { minimum: { os: string processor: string memory: string graphics: string directX: string storage: string notes: string } recommended: { os: string processor: string memory: string graphics: string directX: string storage: string notes: string } } slug?: string } export const browseGames: BrowseGame[] = [ { id: 1, title: "Cyberpunk 2077", description: "An open-world, action-adventure story set in Night City, a megalopolis obsessed with power, glamour and body modification. You play as V, a mercenary outlaw going after a one-of-a-kind implant that is the key to immortality.", price: 99, image: "https://www.cdprojekt.com/en/wp-content/uploads-en/2022/02/cyberpunk2077-02.png", screenshots: [ "https://i.pcmag.com/imagery/articles/00hYjpCCgBH5VFYPsZrBqmf-1..v1600444074.jpg", "https://uploads.golmedia.net/uploads/articles/article_media/10182521121695651723gol1.jpg", "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1091500/644eb087007768417a847e52c38eeaf34b57fd12/page_bg_raw.jpg?t=1765554351", "https://retroresolve.com/wp-content/uploads/2023/01/Cyberpunk-2077-Steam-Deck-Open-World-1024x576.jpg", ], tags: ["RPG", "Action", "Sci-Fi", "DLC"], category: "discover", rating: 4.6, isTrending: true, type: "dlc", trailer_url: "https://www.youtube.com/watch?v=Nn27cM8jN0Y", // Phantom Liberty Official Trailer ageRating: "M", developer: "CD PROJEKT RED", publisher: "CD PROJEKT RED", releaseDate: "2023-09-26", features: ["Single-player", "Expansion", "Spy-Thriller"], systemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5‑3570K / AMD FX‑8310", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 780 / AMD Radeon RX 470", directX: "DirectX 12", storage: "≈ 70 GB free space (SSD recommended)", }, recommended: { os: "Windows 10 64‑bit", processor: "Intel Core i7‑4790 / AMD Ryzen 3 3200G", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1060 / AMD Radeon R9 Fury", directX: "DirectX 12", storage: "≈ 70 GB free space (SSD required)", }, }, }, { id: 2, title: "Where Winds Meet", description: "A stunning open-world Wuxia action RPG set during the Five Dynasties and Ten Kingdoms era in ancient China. Master martial arts, use parkour abilities, sword combat, and explore a beautiful, living world.", price: 0, image: "https://m.media-amazon.com/images/M/MV5BOTAzOWMzYjgtNTEyNi00ZmY2LTk1MjYtN2IxMjJjZWU2MTQzXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://eu-central-1-gamescom.graphassets.com/AMwDHZTUSMaIlRlMFLL7Qz/output=quality:95,strip:true/resize=w:960,h:540,fit:crop/sharpen=amount:1/auto_image/cmdrj1p4v9k4q07w1tf4o5upn", "https://media.altchar.com/prod/images/gm_featured_image/15a005c69951-where-winds-meet-05-nov-25-01511.jpeg", "https://live.staticflickr.com/65535/54893171028_9b9baed83d_h.jpg", "https://staticg.sportskeeda.com/editor/2025/11/e2554-17635715886439-1920.jpg?w=640", ], isNew: true, releaseDate: "2025-06-30", tags: ["Action", "Wuxia", "Open World"], category: "newReleases", trailer_url: "https://www.youtube.com/watch?v=UjKjY6jkYLg", ageRating: "T", developer: "Everstone Studio", publisher: "Everstone Studio", features: ["Single-player", "Open World", "Martial Arts"], rating: 4.7, systemRequirements: { minimum: { os: "Windows 10 / 11 (64-bit)", processor: "Intel Core i7-7700K / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 480 (8 GB)", directX: "DirectX 12", storage: "100 GB free space (SSD recommended)", notes: "1080p, Low / Medium settings", }, recommended: { os: "Windows 10 / 11 (64-bit)", processor: "Intel Core i7-10700 / AMD Ryzen 7 3700X", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2070 SUPER / AMD Radeon RX 6700 XT / Intel Arc A750 (8+ GB VRAM)", directX: "DirectX 12", storage: "100 GB free space (SSD required)", notes: "1080p, High settings or better", }, }, }, { id: 3, title: "Starfield", description: "Starfield is the first new universe in a major franchise in over 25 years. In this next generation role-playing game set in space, you'll create any character you want and explore with unequaled freedom.", price: 99, image: "https://avatars.mds.yandex.net/get-mpic/4579226/2a0000018a7eeced065b751427c598621cd4/orig", screenshots: [ "https://assetsio.gnwcdn.com/Starfield-gameplay.jpg?width=1600&height=900&fit=crop&quality=100&format=png&enable=upscale&auto=webp", "https://production-static.mobilesyrup.com/uploads/2023/06/starfield-screenshot.jpg", "https://images.ctfassets.net/rporu91m20dc/4wFWrGZbyryIwFZrJYFmHy/f0e30699a48388ba71e5f0e168fefd86/LargeHero_SF_GPT_Banner.jpg", "https://geekireland.com/wp-content/uploads/2023/09/Starfield-6.jpg", ], isTrending: true, tags: ["RPG", "Space", "Adventure"], category: "hero", rating: 4.0, trendingRank: 3, trailer_url: "https://www.youtube.com/watch?v=kfYEiTdsyas", ageRating: "M", developer: "Bethesda Game Studios", publisher: "Bethesda Softworks", releaseDate: "2023-09-06", features: ["Space Exploration", "Character Creation", "RPG Mechanics", "Single Player"], systemRequirements: { minimum: { os: "Windows 10/11 64-bit", processor: "Intel Core i5-7600K / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 970 / AMD Radeon RX 470", directX: "DirectX 12", storage: "125 GB free space (SSD required)", notes: "Broadband internet connection required", }, recommended: { os: "Windows 10/11 64-bit", processor: "Intel Core i7-10700K / AMD Ryzen 5 5600X", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2080 Ti / AMD Radeon RX 6800 XT", directX: "DirectX 12", storage: "125 GB free space (SSD required)", notes: "Broadband internet connection required", }, }, }, { id: 4, title: "NBA 2K25", description: "Stack wins, raise banners, and make history in NBA 2K25. Command every court with authenticity and realism Powered by ProPLAY, giving you ultimate control over how you compete.", price: 129, image: "https://www.keycense.com/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fkeycense.appspot.com%2Fo%2Fproducts%252F6704b096a0a601a8449d265a.jpg%3Falt%3Dmedia%26token%3D99c76c95-e0d4-479a-acb3-f304e664a353&w=3840&q=60", screenshots: [ "https://cdn.prgloo.com/media/aed7ce57f75b4f0a8a09e1eec96e66f6.jpg?width=1200&height=1800", "https://i.ytimg.com/vi/89OVYj0dQTo/maxresdefault.jpg", "https://cdn.prgloo.com/media/a5a5373487b34c339713dad50eab791f.jpg?width=1200&height=1800", "https://nintendoeverything.com/wp-content/uploads/NBA-2K25-gameplay.jpg", ], isTrending: true, tags: ["Sports"], category: "winter sale", rating: 4.5, trendingRank: 8, trailer_url: "https://www.youtube.com/watch?v=zwQ9RjfvJN0", // NBA 2K25 Official Trailer ageRating: "E", developer: "Visual Concepts", publisher: "2K", releaseDate: "2024-09-06", features: ["Sports", "Simulation", "Multiplayer", "Career Mode"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i3-9100 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 960 (4 GB) / AMD Radeon RX 570 (4 GB) / Intel Arc A580", directX: "DirectX 12", storage: "≈ 150 GB free space (SSD required)", notes: "Broadband internet connection required", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-10600 / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (8 GB) / AMD Radeon RX 5700 (8 GB) / Intel Arc A770", directX: "DirectX 12", storage: "≈ 150 GB free space (SSD required)", notes: "Broadband internet connection required", }, }, }, { id: 5, title: "Call of Duty Modern Warfare 3 (2023)", price: 199, image: "https://m.media-amazon.com/images/M/MV5BMzc4NDc2OWItMTJmNy00MWQxLWExMzktNGIwYjA3MGVlZTE3XkEyXkFqcGc@._V1_FMjpg_UX1000_.jpg", screenshots: [ "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3595270/ee37e2686b1a21ede5b74e853d046ba9bd087878/ss_ee37e2686b1a21ede5b74e853d046ba9bd087878.1920x1080.jpg?t=1764711750", "https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/store/games/mw3/overview/Store_GamesPDP_Hero_Secondary04.png", "https://images.immediate.co.uk/production/volatile/sites/3/2023/11/Cod-MW3-tactical-stance-e9484cd.jpg?quality=90&resize=980,654", "https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/blog/hero/mwiii/MWIII-PC-TRAILER-TOUT.jpg", ], tags: ["FPS", "Action"], category: "winter sale", rating: 4.5, trailer_url: "https://www.youtube.com/watch?v=i3IsLrPeZG8", // MW3 2023 Trailer ageRating: "M", developer: "Sledgehammer Games", publisher: "Activision", releaseDate: "2023-11-10", features: ["Single-player", "Multiplayer", "Zombies", "Cross-platform"], description: "The direct sequel to the record-breaking Call of Duty: Modern Warfare II.", systemRequirements: { minimum: { os: "Windows 10 64‑bit (latest update)", processor: "Intel Core i5‑6600 / AMD Ryzen 5 1400", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 960 / GTX 1650 or AMD Radeon RX 470 (2 GB VRAM)", storage: "SSD with 149 GB available space at launch", hiRezCache: "Up to 32 GB (optional)", }, recommended: { os: "Windows 10 64‑bit or Windows 11 64‑bit (latest update)", processor: "Intel Core i7‑6700K / AMD Ryzen 5 1600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1080Ti / RTX 3060 or AMD Radeon RX 6600XT (8 GB VRAM)", storage: "SSD with 149 GB available space at launch", hiRezCache: "Up to 32 GB (optional)", }, }, }, { id: 6, title: "Hogwarts Legacy", price: 99, image: "https://upload.wikimedia.org/wikipedia/en/thumb/0/0b/Hogwarts_legacyboxart.svg/960px-Hogwarts_legacyboxart.svg.png", screenshots: [ "https://www.gematsu.com/wp-content/uploads/2022/12/Hogwarts-Legacy-Play_12-14-22.jpg", "https://images.purexbox.com/5cd850467e1a1/1280x720.jpg", "https://sm.ign.com/ign_nordic/news/h/hogwarts-l/hogwarts-legacy-gameplay-and-plot-details-revealed_181b.jpg", "https://i0.wp.com/gamingph.com/wp-content/uploads/2022/03/vlcsnap-2022-03-18-11h07m16s477.jpg?ssl=1", ], tags: ["RPG", "Fantasy"], category: "winter sale", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=1O6Qstncpnc", // Hogwarts Legacy Official Trailer ageRating: "T", developer: "Avalanche Software", publisher: "Warner Bros. Games", releaseDate: "2023-02-10", features: ["Single-player", "Open World", "Magic", "Character Creation"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑6600 (3.3 GHz) / AMD Ryzen 5 1400 (3.2 GHz)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 960 (4 GB) / AMD Radeon RX 470 (4 GB)", directX: "DirectX 12", storage: "≈ 85 GB free space (SSD preferred, HDD supported)", notes: "720p / 30 FPS, Low Quality Settings", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i7‑8700 (3.2 GHz) / AMD Ryzen 5 3600 (3.6 GHz)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1080 Ti / AMD Radeon RX 5700 XT / Intel Arc A770", directX: "DirectX 12", storage: "≈ 85 GB free space (SSD recommended)", notes: "1080p / 60 FPS, High Quality Settings", }, }, }, { id: 7, title: "Elden Ring", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202107/0902/8ew9QqHI1eLFFq5XdIOhN2Q2.jpg", screenshots: [ "https://cdn.mos.cms.futurecdn.net/nHfhGCUvL9t37evwd9SyhU.jpg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/chorus/uploads/chorus_asset/file/22985382/ELDENRING_05_4K.jpeg?w=1600&h=900&fit=crop", "https://cdn.mos.cms.futurecdn.net/M6VbiCgsh8u7k8hWRjKkYh.jpg", "https://sm.ign.org/ign_ap/gallery/e/elden-ring/elden-ring-gameplay-demo-screenshots_z652.jpg", ], tags: ["RPG", "Souls-like"], category: "Deals of this Week", rating: 4.9, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=E3Huy2cdih0", // Elden Ring Official Trailer ageRating: "M", developer: "FromSoftware", publisher: "Bandai Namco Entertainment", releaseDate: "2022-02-25", features: ["Single-player", "Open World", "Souls-like", "Fantasy"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑8400 / AMD Ryzen 3 3300X", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (3 GB) / AMD Radeon RX 580 (4 GB)", directX: "DirectX 12", storage: "60 GB free space", }, recommended: { os: "Windows 10 or Windows 11 (64‑bit)", processor: "Intel Core i7‑8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 (8 GB) / AMD Radeon RX Vega 56 (8 GB)", directX: "DirectX 12", storage: "60 GB free space", }, }, }, { id: 8, title: "fc 25", price: 149, image: "https://preview.redd.it/fc-25-standard-cover-v0-19e17zsww2dd1.jpeg?width=640&crop=smart&auto=webp&s=d9129e6dbe0b8801366f26fc86c85ff228c0649a", screenshots: [ "https://i.ytimg.com/vi/oNxwJFxgvPQ/maxresdefault.jpg", "https://i.ytimg.com/vi/ddpy9v6gJ6w/maxresdefault.jpg", "https://gam3s.gg/_next/image/?url=https%3A%2F%2Fassets.gam3s.gg%2F1748478227636_gallery_image_8_2a821f8747.jpeg&w=3840&q=75", "https://www.operationsports.com/wp-content/uploads/2024/09/fc-25-standard.jpg?fit=1200%2C675", ], tags: ["sports"], category: "Deals of This Week ", rating: 4.9, trailer_url: "https://www.youtube.com/watch?v=pBM2xyco_Kg", // fc 25 Trailer ageRating: "M", developer: "EA Canada, EA Romania", publisher: "Electronic Arts", releaseDate: "27 Sep,2024", features: ["FC IQ & Player Roles"], description: "EA SPORTS FC™ 25 gives you more ways to win for the club. Team up with friends in your favourite modes with the new 5v5 Rush, and manage your club to victory as FC IQ delivers more tactical control than ever before.", systemRequirements: { minimum: { os: "Windows 10 64‑bit (latest update)", processor: "AMD Ryzen 5 1600 / Intel Core i5‑6600K", memory: "8 GB RAM", graphics: "AMD RX 570 / NVIDIA GeForce GTX 1050 Ti (4 GB VRAM)", directX: "DirectX 12", storage: "100 GB available space", network: "Broadband Internet Connection required", }, recommended: { os: "Windows 10 64‑bit (latest update)", processor: "AMD Ryzen 7 2700X / Intel Core i7‑6700", memory: "12 GB RAM", graphics: "AMD RX 5600 XT or NVIDIA GeForce GTX 1660 (or better)", directX: "DirectX 12", storage: "100 GB available space", network: "Broadband Internet Connection required", }, }, }, { id: 9, title: "Mafia II Definitive Edition", price: 129, image: "https://store-images.s-microsoft.com/image/apps.43017.13864960736509568.2a74f3a7-54a5-49f9-95d1-579d46380a7f.d8317b23-4511-4641-b006-6e2d3685f72e", tags: ["action", "drama", "crime"], category: "Deals of This Week", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=wHoqwphzhzc", // Mafia II DE Trailer ageRating: "M", developer: "Hangar 13, D3T", publisher: "2K", releaseDate: "19 May, 2020", features: ["Remastered", "Narrative Focused", "Gunplay"], description: "Step into the shoes of a war hero entangled in the criminal underworld of Empire Bay. Experience the Mafia II saga in stunning HD with improved visuals and audio.", systemRequirements: { minimum: { os: "Windows XP (SP2) / Vista / Windows 7", processor: "Pentium D 3 GHz / AMD Athlon 64 X2 3600+ (dual‑core)", memory: "1.5 GB RAM", graphics: "NVIDIA GeForce 8600 / ATI HD2600 Pro (or better)", storage: "≈ 8 GB free space", directX: "DirectX 9.0c compatible", }, recommended: { os: "Windows XP (SP2) / Vista / Windows 7", processor: "2.4 GHz Quad‑Core processor", memory: "2 GB RAM", graphics: "NVIDIA GeForce 9800 GTX / ATI Radeon HD 3870 (or better)", storage: "≈ 10 GB free space", directX: "DirectX 9.0c compatible", }, }, }, { id: 10, title: "Mafia III Definitive Edition", price: 149, image: "https://store-images.s-microsoft.com/image/apps.19050.71189044859921004.2f5f4865-c27c-4313-976b-c3322734813b.84db885c-96d6-45a8-9de0-32ac9824a54d", tags: ["action", "crime", "open-world"], category: "discover", rating: 4.3, trailer_url: "https://www.youtube.com/watch?v=kmKOLvnullE", // Mafia III DE Trailer ageRating: "M", developer: "Hangar 13", publisher: "2K", releaseDate: "19 May, 2020", features: ["New Bordeaux", "Crime Empire", "Multiple Endings"], description: "After years of combat in Vietnam, Lincoln Clays surrogate family is betrayed and slaughtered by the Italian Mafia. Rebuild a new family and blaze a path of revenge through the underworld of 1968 New Bordeaux.", systemRequirements: { minimum: { os: "Windows 7 64‑bit (64‑bit processor & OS required)", processor: "Intel i5‑2500K / AMD FX‑8120", memory: "6 GB RAM", graphics: "NVIDIA GeForce GTX 660 or AMD Radeon HD 7870 (2 GB VRAM)", storage: "≈ 50 GB free space", directX: "DirectX compliant sound & video", }, recommended: { os: "Windows 7 64‑bit", processor: "Intel i7‑3770 / AMD FX 8350 (4.0 GHz)", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 780 or GTX 1060 / AMD Radeon R9 290X (4 GB VRAM)", storage: "≈ 50 GB free space", directX: "DirectX compliant sound & video", }, }, }, { id: 11, title: "F1 23", price: 99, image: "https://m.media-amazon.com/images/M/MV5BMDdiYjJiMmUtODQ3OC00ZmFmLWE0Y2ItMjJkYzg4ZWZkMDc4XkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://i.ytimg.com/vi/HxZpm6ajtxU/maxresdefault.jpg", "https://i.ytimg.com/vi/LpGUswyA_a0/maxresdefault.jpg", "https://car-images.bauersecure.com/wp-images/166663/f1_234.png", "https://gaming-cdn.com/images/news/articles/1351/cover/1000x563/f1-23-presents-its-gameplay-mechanics-in-a-new-video-cover645e00e45c6ee.jpg", ], tags: ["racing", "sports"], category: "Wizard Picks", rating: 4.4, trailer_url: "https://www.youtube.com/watch?v=wHNgoRCWqTg", // Launch Trailer ageRating: "E", developer: "Codemasters", publisher: "Electronic Arts", releaseDate: "16 Jun, 2023", features: ["Braking Point 2", "F1 Life", "VR Support", "Multiplayer"], description: "The official game of the 2023 FIA Formula One World Championship™. Features an expanded story mode, realistic physics, and updated circuits including Las Vegas and Qatar.", systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑9600K", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti (or GTX 1060) / equivalent", storage: "≈ 80 GB free space", directX: "DirectX 12", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑9600K or better", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1660 Ti or better", storage: "≈ 80 GB free space", directX: "DirectX 12", }, }, }, { id: 12, title: "F1 24", price: 129, image: "https://store-images.s-microsoft.com/image/apps.50353.14309904834888333.ae73f2e0-1ce2-4244-89ea-266904a2c24f.5618af1f-dffb-4612-9162-3835fca1105b", screenshots: [ "https://i.ytimg.com/vi/YKbpm3LQppU/maxresdefault.jpg", "https://i.guim.co.uk/img/media/1c3f172726fa0a3bf7b0665c3b496661b218b659/0_0_1800_1080/master/1800.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=a12af2bd6229ddc013e8c7ce9fac5688", "https://www.thedrive.com/wp-content/uploads/2024/05/31/2488620_20240528230757_1-copy.jpg?strip=all&quality=85", "https://www.thedrive.com/wp-content/uploads/2024/05/31/F1_24_Monaco_05-copy.jpg?quality=85", ], tags: ["racing", "sports", "simulation"], category: "Wizard Picks", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=NnyCWsA6KSI", // Official Reveal Trailer ageRating: "E", developer: "Codemasters", publisher: "Electronic Arts", releaseDate: "31 May, 2024", features: ["Career Mode", "F1 World", "Driver Handling", "Multiplayer"], description: "Be one of the 20 with EA SPORTS™ F1® 24, the official video game of the 2024 FIA Formula One World Championship™, featuring an all-new Driver Career and handle every turn like never before.", systemRequirements: { minimum: { os: "Windows 10 64‑bit (version 21H1 or newer)", processor: "Intel Core i3‑2130 / AMD FX 4300", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 480 (8 GB) or equivalent", storage: "100 GB free space", directX: "DirectX 12", }, recommended: { os: "Windows 10 64‑bit (version 21H1 or newer)", processor: "Intel Core i5‑9600K or AMD Ryzen 5 2600X", memory: "16 GB RAM", graphics: "NVIDIA RTX 2070 / AMD RX 6600 XT (or better)", storage: "100 GB free space", directX: "DirectX 12", }, }, }, { id: 13, title: "F1 25", price: 249, image: "https://image.api.playstation.com/vulcan/ap/rnd/202505/1521/73fc6fb9bad1b2e74180c166f0c7af9d3940e0d6a6e01525.png", screenshots: [ "https://i.ytimg.com/vi/smwFJlL9wCU/maxresdefault.jpg", "https://traxion.gg/wp-content/uploads/2025/04/F1-25-gameplay-video-screenshot-1024x576.jpg", "https://d1nzm2nlurbj16.cloudfront.net/images/F12025.width-1000.format-webp.webp", "https://d1nzm2nlurbj16.cloudfront.net/images/F125.width-1000.format-webp.webp", ], tags: ["racing", "sports", "simulation"], category: "discover", rating: 0, trailer_url: "https://www.youtube.com/watch?v=u5rWBgBjDsc", // TEMP ageRating: "E", developer: "Codemasters", publisher: "Electronic Arts", releaseDate: "30 May, 2025", features: ["Rush Mode", "Career Mode Enhancements"], description: "Leave your mark on the world of racing in F1® 25, the official video game of the 2025 FIA Formula One World Championship™, featuring a revamped My Team mode, the thrilling third chapter of Braking Point, and more!", systemRequirements: { minimum: { os: "Windows 10 64‑bit (version 21H1 or newer)", processor: "Intel Core i5‑6400 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 570 (8 GB) or equivalent", storage: "100 GB free space", directX: "DirectX 12", }, recommended: { os: "Windows 10 64‑bit (version 21H1 or newer)", processor: "Intel Core i5‑9600K / AMD Ryzen 5 2600X", memory: "16 GB RAM", graphics: "NVIDIA RTX 2070 / AMD RX 6600 XT (or better)", storage: "100 GB free space", directX: "DirectX 12", }, }, }, { id: 14, title: "FC 24", price: 99, image: "https://speelhetslim.be/wp-content/uploads/2023/12/EA-Sports-FC-24.png", screenshots: [ "https://i.ytimg.com/vi/q1GQ0_x8Eqo/maxresdefault.jpg", "https://theguide.gg/fifa/img/eafc/FC24_Haaland_Gameplay_Hypermotion.webp", "https://i0.wp.com/waytoomany.games/wp-content/uploads/2023/10/EA-SPORTS-FC-24_20231001180758.jpg?resize=860%2C484&ssl=1", "https://cdn-wp.thesportsrush.com/2023/07/63189453-ea-sports-fc-24-hypermotion-v.jpg?format=auto&w=3840&q=75", ], tags: ["sports", "football", "multiplayer"], category: "Winter Sale", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=XhP3Xh4LMA8", // FC 24 Official Reveal ageRating: "E", developer: "EA Vancouver, EA Romania", publisher: "Electronic Arts", releaseDate: "29 Sep, 2023", features: ["Ultimate Team", "HyperMotionV", "Women's Football"], description: "EA SPORTS FC™ 24 is the next chapter in The World's Game. Experience unrivaled authenticity with HyperMotionV, revamped Ultimate Team, and cross-play features across multiple modes.", systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-6600K / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti (4 GB) / AMD Radeon RX 570 (4 GB)", storage: "100 GB free space", directX: "DirectX 12", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i7-6700 / AMD Ryzen 7 2700X", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1660 (6 GB) / AMD Radeon RX 5600 XT (6 GB)", storage: "100 GB free space", directX: "DirectX 12", }, }, }, { id: 15, title: "FC 26", price: 249, image: "https://image.api.playstation.com/vulcan/ap/rnd/202507/1617/f0fe830f8f01600d13cce060680e0287374c58613a63c716.png", screenshots: [ "https://i.ytimg.com/vi/0DhlHlUX3eA/maxresdefault.jpg", "https://bsmedia.business-standard.com/_media/bs/img/article/2025-07/18/full/1752825340-1161.png?im=FeatureCrop,size=(826,465)", "https://cdn.mos.cms.futurecdn.net/APSZ37DTJCW6sb3fxnNdDJ.jpg", "https://i0.wp.com/waytoomany.games/wp-content/uploads/2025/09/EA-SPORTS-FC-26_20250924124930.jpg?ssl=1", ], tags: ["sports", "football"], category: "Winter Sale", rating: 0, trailer_url: "https://www.youtube.com/watch?v=TSi0iJYSQ24&t=4s", // TEMP ageRating: "E", developer: "EA Canada, EA Romania", publisher: "Electronic Arts", releaseDate: "26 Sep,2025", features: ["To Be Announced"], description: "The Club is Yours in EA SPORTS FC™ 26. Play your way with an overhauled gameplay experience powered by community feedback, Manager Live Challenges that bring fresh storylines to the new season, and Archetypes inspired by greats of the game.", systemRequirements: { minimum: { os: "Windows 10/11 (64‑bit, latest update)", processor: "Intel Core i5‑6600K / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti (4 GB) / AMD Radeon RX 570 (4 GB)", storage: "100 GB free space", directX: "DirectX 12", network: "Broadband Internet connection", }, recommended: { os: "Windows 10/11 (64‑bit, latest update)", processor: "Intel Core i7‑6700 / AMD Ryzen 7 2700X", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1660 (6 GB) / AMD Radeon RX 5600 XT (6 GB)", storage: "100 GB free space", directX: "DirectX 12", network: "Broadband Internet connection", }, }, }, { id: 16, title: "WWE 2K24", price: 149, image: "https://image.api.playstation.com/vulcan/ap/rnd/202401/0902/78cd23038921f6fc9a2935aaf4989b64fbf6f1bfce94bfae.png", tags: ["wrestling", "sports", "fighting"], category: "Deals of this week", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=t9k9I91Ul4Y", // Official Reveal Trailer ageRating: "T", developer: "Visual Concepts", publisher: "2K", releaseDate: "8 Mar, 2024", features: ["2K Showcase of the Immortals", "MyRISE", "MyGM", "Online Multiplayer"], description: "WWE 2K24 celebrates 40 years of WrestleMania with stunning visuals, improved gameplay, and an expansive roster. Play through iconic matches in Showcase mode and dominate in MyRISE and MyGM.", systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3550 / AMD FX 8150", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1060 / AMD Radeon RX 480 (≥ 3 GB VRAM)", directX: "DirectX 12", storage: "≈ 90 GB free space (SSD recommended)", sound: "DirectX 9.0c compatible", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i7‑4790 / AMD FX 8350", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5600 XT (≥ 6 GB VRAM)", directX: "DirectX 12", storage: "≈ 90 GB free space (SSD recommended)", sound: "DirectX 9.0c compatible", }, }, }, { id: 17, title: "WWE 2K25", price: 199, image: "https://m.media-amazon.com/images/M/MV5BMDY3YTg5MGMtZmQ5Mi00NmE0LTkyYTMtNzQxNjE0YWY1MTA2XkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://assets.2k.com/1a6ngf98576c/1YbTKJq1pw9L6Mx7XwHAqE/6513124ec1e078c1934327549ce88e6f/Roman-Fatu_9.png", "https://assets.2k.com/1a6ngf98576c/2OQXq2TWdk8dd5PDvWlMKf/6513124ec1e078c1934327549ce88e6f/Roman-Fatu_9.png", "https://sm.ign.t/ign_in/video/w/wwe-2k25-o/wwe-2k25-official-gameplay-trailer_aes1.1200.jpg", "https://i0.wp.com/thekoalition.com/images/2025/03/7a39375d-838c-4eb8-8017-9bd9182a7977.png?resize=640%2C360&ssl=1", ], tags: ["wrestling", "sports", "fighting"], category: "deals of this week", rating: 0, trailer_url: "https://www.youtube.com/watch?v=i7ZGSUP7wws", // TEMP ageRating: "T", developer: "Visual Concepts", publisher: "2K", releaseDate: "14 Mar,2025", features: ["To Be Announced"], description: "WWE 2K25 is expected to push the franchise further with enhanced presentation, new match types, and expanded career modes. Details will be revealed soon.", systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5‑4460 / AMD Ryzen 5 1400", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1060 / AMD Radeon RX 480 (≥ 3 GB VRAM)", directX: "DirectX 12", storage: "≈ 103 GB free space (SSD recommended)", sound: "DirectX 9.0c compatible", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i7‑4790 / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5600 XT (≥ 6 GB VRAM)", directX: "DirectX 12", storage: "≈ 103 GB free space (SSD recommended)", sound: "DirectX 9.0c compatible", }, }, }, { id: 18, title: "Demon Slayer -Kimetsu no Yaiba- The Hinokami Chronicles", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202106/1704/2ZfAUG5CTXdM34S1OhmMW1zF.jpg", screenshots: [ "https://onemoregame.ph/wp-content/uploads/2021/10/Demon-Slayer-Kimetsu-no-Yaiba-The-Hinokami-Chronicles_20211015174854_1.jpg", "https://asia.sega.com/kimetsu_hinokami/en/assets/img/top/intro/slideimg_6.jpg", "https://xboxwire.thesourcemediaassets.com/sites/2/2021/10/DS-ULTIMATE-ART.jpg", "https://i0.wp.com/waytoomany.games/wp-content/uploads/2025/09/6507059805879940549.jpg?ssl=1", ], tags: ["anime", "action", "fighting"], category: "Winter sale", rating: 9, trailer_url: "https://www.youtube.com/watch?v=AnXHQ6OMq2E", ageRating: "T", developer: "CyberConnect2", publisher: "SEGA", releaseDate: "15 Oct, 2021", features: ["Single-player", "Online PvP", "Local PvP", "Full Controller Support"], description: "Become the blade that destroys demons! Relive the story of Tanjiro Kamado and fight alongside iconic characters from the Demon Slayer anime in stunning arena battles filled with cinematic action and intense drama.", systemRequirements: { minimum: { os: "Windows 8.1 (64‑bit) or newer", processor: "Intel Core i5‑2400 / AMD Phenom II X6 1100T", memory: "6 GB RAM", graphics: "NVIDIA GeForce GTX 660 (2 GB) / AMD Radeon HD 7950 (3 GB)", storage: "≈ 25 GB free space", notes: "Low, 720p • 30 FPS", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3470 / AMD FX‑8350", memory: "6 GB RAM", graphics: "NVIDIA GeForce GTX 760 (2 GB) / AMD Radeon R9 280 (4 GB)", storage: "≈ 25 GB free space", notes: "1080p • 30–60 FPS", }, }, }, { id: 19, title: "Demon Slayer: The Hinokami Chronicles 2", price: 149, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1707/0e5cfd44d28684cc12f2abc131f309a93a2165fd9f76e403.jpg", screenshots: [ "https://i0.wp.com/xboxera.com/wp-content/uploads/2025/05/Demon-Slayer-Kimetsu-no-Yaiba-The-Hinokami-Chronicles-2-Swordsmith-Village-5.png?ssl=1", "https://i.ytimg.com/vi/eEUTalpUjGg/sddefault.jpg", "https://waytoomany.games/wp-content/uploads/2025/09/6507059805879940549.jpeg", "https://gamingtrend.com/content/images/thumbnail/Screenshot-2---gameplay.jpg", ], tags: ["anime", "action", "fighting"], category: "New Releases", rating: 5, trailer_url: "https://www.youtube.com/watch?v=s3BKe_lvZXE", // TEMP fanmade trailer or teaser ageRating: "T", developer: "CyberConnect2", publisher: "SEGA", releaseDate: "5 Aug,2025", features: ["Single-player", "Multiplayer", "Anime-style combat"], description: "Demon Slayer: The Hinokami Chronicles 2 continues Tanjiro's journey into new arcs with more characters, intense combat, and breathtaking anime visuals. Get ready to relive the Swordsmith Village and beyond.", systemRequirements: { minimum: { os: "Windows 10 or higher (64‑bit)", processor: "Intel Core i5-3470 / AMD Ryzen 3 1200", memory: "6 GB RAM", graphics: "NVIDIA GeForce GT 640 (2 GB) / AMD Radeon HD 7950 (3 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space (installation)", notes: "720p, Low settings (≈ 30 FPS)", }, recommended: { os: "Windows 10 or higher (64‑bit)", processor: "Intel Core i5-4570 / AMD Ryzen 5 1400", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 / AMD Radeon RX 470 (4 GB VRAM)", directX: "DirectX 11", storage: "≈ 30 GB free space", notes: "1080p, High settings (≈ 60 FPS)", }, }, }, { id: 20, title: "The Witcher 3 Wild Hunt", description: "Embark on an adventure that spans a vast world where the choices you make and the paths you choose shape your destiny.", price: 99, originalPrice: 1799, discount: 94.5, image: "https://image.api.playstation.com/vulcan/ap/rnd/202211/0711/qezXTVn1ExqBjVjR5Ipm97IK.png", screenshots: [ "https://i.ytimg.com/vi/TZ_G6XiHoUA/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLAJTVdUB0woThOdnsKuqVBOiIk0IQ", "https://images.g2a.com/470x276/1x1x0/the-witcher-3-wild-hunt-goty-edition-pc-steam-account-account-global-i10000026141053/5910897d5bafe3ba0d693b86", "https://cdn.wccftech.com/wp-content/uploads/2015/05/Witcher-3-1-1030x579.jpg", "https://i.ytimg.com/vi/xx8kQ4s5hCY/maxresdefault.jpg", ], tags: ["RPG", "Open World", "Fantasy"], category: "wizard picks", rating: 4.9, type: "edition", isTrending: true, trailer_url: "https://www.youtube.com/watch?v=c0i88t0Kacs", ageRating: "M", developer: "CD PROJEKT RED", publisher: "CD PROJEKT RED", releaseDate: "2015-05-19", features: ["Single-player", "Open World", "Story Rich", "Character Customization"], systemRequirements: { minimum: { os: "Windows 7 64‑bit / Windows 8 (8.1) 64‑bit", processor: "Intel Core i5‑2500K (3.3 GHz) / AMD A10‑5800K (or equivalent)", memory: "6 GB RAM", graphics: "NVIDIA GeForce GTX 660 / AMD Radeon HD 7870 (or better, DX11 GPU)", directX: "DirectX 11", storage: "≈ 50 GB free space", }, recommended: { os: "Windows 10 / Windows 11 64‑bit", processor: "Intel Core i5‑7400 / AMD Ryzen 5 1600 (or equivalent)", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 480 (or better)", directX: "DirectX 12", storage: "≈ 50 GB free space", }, }, }, { id: 21, title: "Forza Horizon 4", description: "Dynamic seasons change everything at the worlds greatest automotive festival. Go it alone or team up with others to explore beautiful and historic Britain in a shared open world.", price: 99, originalPrice: 3499, discount: 97.2, image: "https://store-images.s-microsoft.com/image/apps.36093.14343301090572358.2000000000007864116.1feb0fed-abe9-4849-b638-8d7eca69cff4", screenshots: [ "https://s2.dmcdn.net/v/OVvNJ1X-1Y-qgsL4p/x1080", "https://preview.redd.it/zka5cesyzq511.jpg?width=640&crop=smart&auto=webp&s=adf77cbdd2e70b2f6de9feb925bc731f8af276e7", "https://i.imgur.com/3EtENkU.jpg", "https://i.ytimg.com/vi/tGBpSrWvRnc/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLAPVlrJMWYteVHYNy8qqX40x42mQg", ], tags: ["Racing", "Open World", "Multiplayer"], category: "wizard picks", rating: 4.7, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=5xy4n73WOMM", ageRating: "E", developer: "Playground Games", publisher: "Xbox Game Studios", releaseDate: "2018-10-02", features: ["Single-player", "Online Co-op", "Multiplayer", "Open World"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel i3-4170 / Intel i5-750 / AMD equivalent", memory: "8 GB RAM", graphics: "NVIDIA GTX 650 Ti / AMD R7 250X (2 GB VRAM)", directX: "DirectX 12", storage: "80 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel i7-3820 / AMD equivalent", memory: "12 GB RAM", graphics: "NVIDIA GTX 970 / GTX 1060 (3 GB) / AMD R9 290X / RX 470", directX: "DirectX 12", storage: "100 GB free space", }, }, }, { id: 22, title: "Forza Horizon 5", description: "Explore the vibrant and ever-evolving open world landscapes of Mexico with limitless, fun driving action in hundreds of the worlds greatest cars.", price: 120, originalPrice: 3499, discount: 96.6, image: "https://image.api.playstation.com/vulcan/ap/rnd/202502/1221/1cdbb2177cc3c6302027f05796073b27ca7f7ccf091c3127.png", screenshots: [ "https://i.ytimg.com/vi/qC9KSW8IhLQ/maxresdefault.jpg", "https://i.ytimg.com/vi/XCV6rNvm2nk/maxresdefault.jpg", "https://www.carscoops.com/wp-content/uploads/2021/08/Forza-Horizon-5.jpg", "https://cdn.mos.cms.futurecdn.net/wyucpR8J8NGD5DDPSvy2L8.jpg", ], tags: ["Racing", "Open World", "Multiplayer"], category: "discover", rating: 4.9, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=Rv7xLt5yNsM", ageRating: "E", developer: "Playground Games", publisher: "Xbox Game Studios", releaseDate: "9 Nov,2021", features: ["Single-player", "Online Co-op", "Multiplayer", "Open World"], systemRequirements: { minimum: { os: "Windows 10 (64-bit, build 18362 or newer)", processor: "Intel Core i5-4460 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GTX 970 / AMD RX 470 (4 GB VRAM)", directX: "DirectX 12", storage: "110 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-8400 / AMD Ryzen 5 1500X", memory: "16 GB RAM", graphics: "NVIDIA GTX 1070 / AMD RX 590 (8 GB VRAM)", directX: "DirectX 12", storage: "110 GB free space", }, }, }, { id: 23, title: "Battlefield 6", description: "Experience all-out warfare in Battlefield 6, featuring massive-scale destruction, dynamic weather, and modern combat across stunning global battlegrounds. Squad up and dominate the battlefield with cutting-edge weapons and vehicles.", price: 149, originalPrice: 3999, discount: 96, image: "https://preview.redd.it/where-do-you-rank-this-battlefield-6-cover-art-all-time-v0-h2wnko5w1aof1.jpg?width=640&crop=smart&auto=webp&s=c8df530b0d1e65ca5ae6148157670cb085a74ef1", screenshots: [ "https://cdn.mos.cms.futurecdn.net/zpxy75VmxgJuVUXaKDUtnU.jpg", "https://cdn.80.lv/api/upload/content/3b/622f31c1b6176.jpeg", "https://mp1st.com/wp-content/uploads/2022/07/Battlefield%E2%84%A2-2042-09_05_2022-09_53_49.webp", "https://static0.srcdn.com/wordpress/wp-content/uploads/2021/11/battlefield-2042-pc-plane-drones-.jpg?w=1200&h=675&fit=crop", ], tags: ["Shooter", "Multiplayer", "Action", "FPS"], category: "discover", rating: 4.6, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=ASzOzrB-a9E", ageRating: "M", developer: "DICE", publisher: "Electronic Arts", releaseDate: "2021-11-19", features: ["Online PvP", "Team-Based", "Multiplayer", "Next-Gen Graphics"], systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i5-6600K / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti / AMD Radeon RX 560", directX: "DirectX 12", storage: "100 GB free space", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i7-4790 / AMD Ryzen 7 2700X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 3060 / AMD Radeon RX 6600 XT", directX: "DirectX 12", storage: "100 GB free space (SSD recommended)", }, }, }, { id: 24, title: "Dying Light The Beast", description: "A new brutal chapter in the Dying Light universe. Run, climb, fight and survive in a massive open world where the infected are faster, stronger and more intelligent than ever before.", price: 99, originalPrice: 4999, discount: 98, image: "https://space4games.com/wp-content/uploads/dying-light-the-beast-1vm2l.jpg", screenshots: [ "https://dyinglightgame.com/img/mods/the-beast/day_3840.jpg", "https://static0.gamerantimages.com/wordpress/wp-content/uploads/2025/07/dying-light-the-beast-soldier.jpg", "https://gamingtrend.com/content/images/thumbnail/Screenshot-2---gameplay.jpg", "https://www.denofgeek.com/wp-content/uploads/2025/07/Dying-Light-The-Beast-Screenshot-20.jpg?fit=1920%2C1080", ], tags: ["Action", "Horror", "Survival", "Parkour"], category: "discover", rating: 4.8, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=qsqBCs7o5go", ageRating: "18+", developer: "Techland", publisher: "Techland Publishing", releaseDate: "2025-10-31", features: ["Single-player", "Open World", "Parkour", "Story Rich"], ystemRequirements: { minimum: { os: "Windows 10 (64-bit) or newer", processor: "Intel Core i5-13400F / AMD Ryzen 7 5800F", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 / AMD Radeon RX 5500 XT / Intel Arc A750 (6 GB VRAM)", storage: "70 GB free space (SSD required)", notes: "1080p, Low settings, ~30 FPS", }, recommended: { os: "Windows 10 (64-bit) or newer", processor: "Intel Core i5-13400F / AMD Ryzen 7 7700", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 3070 Ti / AMD Radeon RX 6750 XT / Intel Arc B580 (8 GB VRAM)", storage: "70 GB free space (SSD required)", notes: "1440p, Medium settings, ~60 FPS", }, }, }, { id: 25, title: "Bus Simulator 21 Next Stop", description: "Become a professional bus driver in a massive open city. Drive officially licensed buses, manage routes, transport passengers, and build your own public transport empire.", price: 99, originalPrice: 2499, discount: 96, image: "https://store-images.s-microsoft.com/image/apps.27197.14271100834107589.de1491a7-0f56-49d7-8db6-87467e38584f.321685e7-f9ee-4cc3-90ae-7d6a94254a76", tags: ["Simulation", "Bus", "Driving"], category: "discover", rating: 4.7, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=1LwVXmhEhnI", ageRating: "E", developer: "Stillalive Studios", publisher: "astragon Entertainment", releaseDate: "2023-05-23", features: ["Single-player", "Open World", "Simulation"], systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i3-2120 / AMD Phenom II X4 830 (or equivalent)", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 (2 GB VRAM) / AMD Radeon R9 280 (2 GB VRAM) or higher", directX: "DirectX 12", storage: "18 GB free space", network: "Broadband Internet connection required", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i5-4440 / AMD FC-8140 (or equivalent)", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1070 (8 GB VRAM) / AMD Radeon RX Vega 56 (8 GB VRAM) or better", directX: "DirectX 12", storage: "18 GB free space", network: "Broadband Internet connection required", }, }, }, { id: 26, title: "The Crew Motorfest", description: "Enter an open-world festival of cars on the beautiful island of O‘ahu. Race exotic supercars, customize your rides, compete in events, and explore a massive tropical paradise.", price: 99, originalPrice: 4999, discount: 98, image: "https://store-images.s-microsoft.com/image/apps.54289.14417469726522832.9e08deb3-3374-441f-823d-984b36f6485c.334387be-42cf-4878-abd8-e8024faa0dc5", screenshots: [ "https://i.ytimg.com/vi/78nF7epR0xk/maxresdefault.jpg", "https://traxion.gg/wp-content/uploads/2025/11/The-Crew-Motorfest-now-on-Xbox-Game-Pass-Ultimate.jpg", "https://i.ytimg.com/vi/pjFv9QlsyuU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBeu3JllwTCUKI7Sm129jdcg4Th6w", "https://www.glitched.online/wp-content/uploads/2023/06/Screenshot-2023-06-12-at-19.10.47-Large.jpeg", ], tags: ["Racing", "Car", "Open World", "Multiplayer"], category: "discover", rating: 4.6, isTrending: false, trailer_url: "https://www.youtube.com/watch?v=2S-A3z866YI", ageRating: "T", developer: "Ivory Tower", publisher: "Ubisoft", releaseDate: "2023-09-14", features: ["Single-player", "Multiplayer", "Open World", "Car Tuning"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4460 / AMD Ryzen 5 1400", memory: "8 GB RAM (dual-channel)", graphics: "NVIDIA GeForce GTX 1060 6 GB / AMD Radeon RX 480 8 GB", storage: "40 GB free space (SSD recommended)", notes: "1080p, Low settings, ~30 FPS", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-8400 / AMD Ryzen 7 2700X", memory: "8 GB RAM (dual-channel)", graphics: "NVIDIA GeForce RTX 2060 6 GB / AMD Radeon RX 5700 XT 8 GB", storage: "40 GB free space (SSD recommended)", notes: "1080p, High settings, ~60 FPS", }, }, }, { id: 27, title: "Silent Hill f", description: "A brand new Silent Hill entry set in 1960s Japan, blending psychological horror, disturbing beauty, and tragic storytelling. Explore a mysterious town infected by an eerily beautiful fungus that twists reality and memories.", price: 149, originalPrice: 5999, discount: 98, image: "https://image.api.playstation.com/vulcan/ap/rnd/202505/0704/ac8ee550a288cb7d095374a35c14ff0fdbf185b56ce7478a.png", screenshots: [ "https://www.digitaltrends.com/tachyon/2025/03/Silent-Hill-f-2.jpg?resize=1200%2C630", "https://static0.gamerantimages.com/wordpress/wp-content/uploads/2025/09/silent-hill-f-scarecrows.jpg?q=70&fit=crop&w=1300&dpr=1", "https://cdn.mos.cms.futurecdn.net/bS4gTjZ62hPZcuSDtXhvpT.jpg", "https://i.pcmag.com/imagery/reviews/04QGU8laDgbwVkpvQhUdjvE-11.fit_lim.size_1050x.jpg", ], tags: ["Horror", "Psychological", "Story Rich", "Survival"], category: "discover", rating: 4.7, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=0NMoPvqaz10", ageRating: "18+", developer: "NeoBards Entertainment", publisher: "Konami", releaseDate: "2024-12-12", features: ["Single-player", "Horror", "Story Rich"], systemRequirements: { minimum: { os: "Windows 11 x64", processor: "Intel Core i5-8400 / AMD Ryzen 5 2600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 Ti / AMD Radeon RX 5700", directX: "DirectX 12", storage: "50 GB free space (SSD recommended)", notes: "720p, Performance mode ~30 FPS", }, recommended: { os: "Windows 11 x64", processor: "Intel Core i7-9700 / AMD Ryzen 5 5500", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / AMD Radeon RX 6800 XT", directX: "DirectX 12", storage: "50 GB free space (SSD required)", notes: "1080p, High quality / Performance settings, ~60 FPS", }, }, }, { id: 28, title: "Silent Hill 2 Remake", description: "Return to the fog-covered town where nightmares become reality. Silent Hill 2 Remake brings the legendary psychological horror classic back with modern visuals, reimagined gameplay, and an intense emotional story.", price: 99, originalPrice: 5999, discount: 98, image: "https://image.api.playstation.com/vulcan/ap/rnd/202210/2000/WJd8SY87zp3xUnCctOrulr5F.png", tags: ["Horror", "Survival", "Story Rich", "Psychological"], category: "discover", rating: 4.8, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=7f5qac5f3mE", ageRating: "18+", developer: "Bloober Team", publisher: "Konami", releaseDate: "2024-10-08", features: ["Single-player", "Horror", "Story Rich", "Next-Gen Graphics"], systemRequirements: { minimum: { os: "Windows 10 x64", processor: "Intel Core i5-8400 / AMD Ryzen 3 3300X", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1080 / AMD Radeon RX 5700", directX: "DirectX 12", storage: "50 GB free space", notes: "1080p, Low/Medium settings, ~30 FPS", }, recommended: { os: "Windows 11 x64", processor: "Intel Core i7-8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / AMD Radeon RX 6800 XT", directX: "DirectX 12", storage: "50 GB free space (SSD recommended)", notes: "1080p, Medium settings ~60 FPS or High settings ~30 FPS (DLSS/FSR for 4K)", }, }, }, { id: 29, title: "Far Cry 3", description: "Survive a pirate-controlled tropical island, rescue your friends, battle wildlife, craft weapons, and face the legendary villain Vaas Montenegro.", price: 99, originalPrice: 1499, discount: 93, image: "https://static.posters.cz/image/750/13147.jpg", tags: ["Open World", "FPS", "Action", "Adventure"], category: "discover", rating: 4.8, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=wEZfi1QfdIE", ageRating: "M", developer: "Ubisoft Montreal", publisher: "Ubisoft", releaseDate: "2012-11-29", features: ["Single-player", "Open World", "Crafting", "Story Rich"], systemRequirements: { minimum: { os: "Windows XP / Vista (or newer)", processor: "Intel Core 2 Duo E6700 @ 2.6 GHz / AMD Athlon64 X2 6000+ @ 3.0GHz", memory: "4 GB RAM", graphics: "512 MB VRAM, DirectX 9.0c compatible, Shader Model 3", storage: "≈ 15 GB free space", }, recommended: { os: "Windows 7 / 8 / 10", processor: "Quad-core CPU or better", memory: "4 GB RAM", graphics: "DirectX 11 compatible GPU with ≥ 1 GB VRAM", storage: "≈ 15 GB free space", }, }, }, { id: 30, title: "Far Cry 4", description: "Journey to Kyrat in the Himalayas to confront the charismatic tyrant Pagan Min. Explore mountains, jungles, and villages in this massive open-world shooter.", price: 120, originalPrice: 2999, discount: 95.99, image: "https://i.redd.it/0btwkzeaxi771.jpg", screenshots: [ "https://i.ytimg.com/vi/-qxXpeP83Ck/maxresdefault.jpg", "https://i.ytimg.com/vi/VYrUVlUgnxw/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLCNG_xjCuQBbGbnzLc24XZH9Ct8Yw", "https://gamingpastime.com/wp-content/uploads/2022/09/farcry4_7.jpg", "https://www.techlegends.in/wp-content/uploads/2014/10/2561264-fc4_screen_honey_badher_e3_140609_8pmpst_1402224695.jpg", ], tags: ["Action", "FPS", "Open World", "Adventure"], category: "discover", rating: 4.7, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=6d60v1OErEY", ageRating: "M", developer: "Ubisoft Montreal", publisher: "Ubisoft", releaseDate: "2014-11-18", features: ["Single-player", "Co-op", "Open World"], systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i5-2400 @3.1 GHz / AMD FX-6350 @3.9 GHz", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 670 (2 GB) / AMD Radeon R9 270X (2 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, recommended: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i7-4790 @3.6 GHz / AMD equivalent", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 970 / AMD Radeon R9 290X (4 GB VRAM or better)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, }, }, { id: 31, title: "Far Cry Primal", description: "Travel back to the Stone Age. Hunt mammoths, tame wildlife, craft primitive weapons, and lead your tribe to survive an unforgiving prehistoric world.", price: 149, originalPrice: 2999, discount: 95.04, image: "https://assets.mycast.io/posters/far-cry-primal-fan-casting-poster-16049-large.jpg?1569615959", screenshots: [ "https://i.ytimg.com/vi/b8JTXySSvsE/maxresdefault.jpg", "https://i.pcmag.com/imagery/reviews/05tNVZVY5jZvWAX3uuA7Pbc-3.fit_lim.size_1050x591.v1569472168.jpg", "https://staticctf.ubisoft.com/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/71IfyQ3qCeHuLsLhtPya7n/5c8f7d4fef2904d1ebac8622ad9928c4/media7.jpg", "https://i.pcmag.com/imagery/reviews/05tNVZVY5jZvWAX3uuA7Pbc-4..v1569472168.jpg", ], tags: ["Survival", "Open World", "Action"], category: "discover", rating: 4.3, isTrending: false, trailer_url: "https://www.youtube.com/watch?v=LJ2iH57Fs3M", ageRating: "M", developer: "Ubisoft Montreal", publisher: "Ubisoft", releaseDate: "2016-02-23", features: ["Single-player", "Open World"], systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3-550 / AMD Phenom II X4 955", memory: "4 GB RAM", graphics: "NVIDIA GeForce GTX 460 (1 GB) / AMD Radeon HD 5770 (1 GB)", directX: "DirectX 11", storage: "≈ 20 GB free space", }, recommended: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i7-2600K / AMD FX-8350", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 780 / AMD Radeon R9 280X", directX: "DirectX 11", storage: "≈ 20 GB free space", }, }, }, { id: 32, title: "Far Cry 5", description: "Fight against a violent doomsday cult in rural Montana. Free the region, rescue civilians, and take on the charismatic leader Joseph Seed.", price: 149, originalPrice: 2999, discount: 95.04, image: "https://cdn2.steamgriddb.com/grid/f11316fb829305eeef6ffa2fb1a15510.png", screenshots: [ "https://imageio.forbes.com/blogs-images/games/files/2018/03/far-cry-5-1.jpg?format=jpg&height=900&width=1600&fit=bounds", "https://cdn.mos.cms.futurecdn.net/LDz2mPvSeR3AkXUXDwfDcZ.jpg", "https://www.vice.com/wp-content/uploads/sites/2/2018/03/1522061779215-ps4wallpaperscom_far_cry_5_sinner_3840x2160.jpeg", "https://hitechcentury.com/wp-content/uploads/2018/04/Far-Cry-52018-4-18-21-46-32-1024x576.jpg", ], tags: ["FPS", "Open World", "Action", "Co-op"], category: "discover", rating: 4.8, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=Kdaoe4hbMso", ageRating: "M", developer: "Ubisoft Montreal", publisher: "Ubisoft", releaseDate: "2018-03-27", features: ["Single-player", "Co-op", "Open World"], systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i5-2400 @3.1 GHz / AMD FX-6300 @3.5 GHz", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 670 (2 GB) / AMD Radeon R9 270 (2 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, recommended: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i7-4770 @3.4 GHz / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 970 (4 GB) / AMD Radeon R9 290X (4 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, }, }, { id: 33, title: "Far Cry New Dawn", description: "Set 17 years after Far Cry 5, Hope County rises from nuclear devastation. Battle raiders, craft upgraded weapons, recruit allies, and upgrade your home base.", price: 169, originalPrice: 1999, discount: 92, image: "https://static0.gamerantimages.com/wordpress/wp-content/uploads/2022/11/FAR-CRY-NEW-DAWN.jpg", screenshots: [ "https://www.hollywoodreporter.com/wp-content/uploads/2019/02/far_cry_new_dawn_bison.jpg?w=1296&h=730&crop=1", "https://i0.wp.com/gideonsgaming.com/wp-content/uploads/2019/02/farcry-theme-park.jpg?resize=1200%2C675&ssl=1", "https://futurefive.co.nz/uploads/story/2019/02/25/far_cry_new_dawn_2.webp", "https://www.pcworld.com/wp-content/uploads/2025/04/stealthtakedown_3840x2160_gold_1547668194-100785896-orig.jpg?quality=50&strip=all", ], tags: ["FPS", "Open World", "Action"], category: "discover", rating: 4.2, isTrending: false, trailer_url: "https://www.youtube.com/watch?v=6eLHk2Eug78", ageRating: "M", developer: "Ubisoft Montreal", publisher: "Ubisoft", releaseDate: "2019-02-15", features: ["Single-player", "Co-op", "Open World"], systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i5-2400 @3.1 GHz / AMD FX-6300 @3.9 GHz", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 670 (2 GB) / AMD Radeon R9 270X (2 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, recommended: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i7-4790 @3.6 GHz / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 970 (4 GB) / AMD Radeon R9 290X (4 GB)", directX: "DirectX 11", storage: "≈ 30 GB free space", }, }, }, { id: 34, title: "Far Cry 6", description: "Revolution ignites in the tropical nation of Yara. Join the guerrilla resistance against the dictator Antón Castillo, played by Giancarlo Esposito.", price: 199, originalPrice: 3999, discount: 95.02, image: "https://image.api.playstation.com/vulcan/img/rnd/202106/0722/4MxzDZKZwtEWyMWZghvwd7bQ.jpg", screenshots: [ "https://cdn.mos.cms.futurecdn.net/7knzKxpy9vDXFhqKcx4Yyc.jpg", "https://i.redd.it/4k97ho9cae7b1.jpg", "https://cdn.arstechnica.net/wp-content/uploads/2021/10/Far-Cry%C2%AE-6_20210929234646-scaled.jpg", "https://mp1st.com/wp-content/uploads/2021/09/Far-Cry-6-Game-Overview-Trailer.png.webp", ], tags: ["FPS", "Open World", "Action"], category: "discover", rating: 4.6, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=-IJuKT1mHO8", ageRating: "M", developer: "Ubisoft Toronto", publisher: "Ubisoft", releaseDate: "2021-10-07", features: ["Single-player", "Co-op", "Open World"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4460 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 960 (4 GB) / AMD Radeon RX 460 (4 GB)", directX: "DirectX 12", storage: "≈ 60 GB free space (SSD recommended)", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i7-7700 / AMD Ryzen 5 3600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1080 (8 GB) / AMD Radeon RX 5700 XT (8 GB)", directX: "DirectX 12", storage: "≈ 60 GB free space (SSD required)", }, }, }, { id: 35, title: "Avatar Frontiers of Pandora", description: "Explore the Western Frontier of Pandora in a stunning open-world action-adventure. Join the Na'vi, fight against the RDA, tame wildlife, craft gear, and soar across vibrant alien landscapes.", price: 499, originalPrice: 2099, discount: 76, image: "https://image.api.playstation.com/vulcan/ap/rnd/202306/0113/7141ae9ab351ca51110680ccc8284cb0568d713c76b8d322.jpg", screenshots: [ "https://lumiere-a.akamaihd.net/v1/images/6-must-dos-in-the-new-avatar-frontiers-of-pandora-game-_d5f0629e.jpeg?region=0,0,3840,2160", "https://staticctf.ubisoft.com/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/42DBzabMGS2LFySvNkR2qG/0d18e9e80223eb8084c92221d9866588/AFOP_July2025_Thumbnail_960x540.jpg", "https://cdn.mos.cms.futurecdn.net/ekWPT2WBsFikaoXdav9qNC.jpg", "https://gameinformer.com/sites/default/files/styles/content_header_l/public/2023/10/30/02cd6ff8/avatar_flight_screen.jpg.webp", ], tags: ["Open World", "Action", "Adventure", "First-Person"], category: "discover", rating: 4.5, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=RDzw1EKnaIA", ageRating: "T", developer: "Massive Entertainment", publisher: "Ubisoft", releaseDate: "17 jun, 2024", features: ["Single-player", "Co-op", "Open World", "Story Rich", "Exploration"], systemRequirements: { minimum: { os: "Windows 10 / 11 (64-bit)", processor: "AMD Ryzen 5 3600 / Intel Core i7-8700K (or better)", memory: "16 GB RAM", graphics: "AMD RX 5700 (8 GB) / NVIDIA GeForce GTX 1070 (8 GB) / Intel Arc A750 (8 GB)", directX: "DirectX 12", storage: "≈ 90 GB free space (SSD required)", notes: "1080p, Low preset (FSR2 Quality), ~30 FPS", }, recommended: { os: "Windows 10 / 11 (64-bit)", processor: "AMD Ryzen 5 5600X / Intel Core i5-11600K (or better)", memory: "16 GB RAM", graphics: "AMD Radeon RX 6700 XT (12 GB) / NVIDIA GeForce RTX 3060 Ti (8 GB)", directX: "DirectX 12", storage: "≈ 90 GB free space (SSD required)", notes: "1080p, High preset (FSR2), ~60 FPS", }, }, }, { id: 36, title: "Cricket 26", description: "Experience the next generation of cricket with improved batting, bowling physics, real stadium atmospheres, and fully licensed teams. Build your career, dominate tournaments, and enjoy the most realistic cricket gameplay yet.", price: 149, originalPrice: 3999, discount: 96, image: "https://store-images.s-microsoft.com/image/apps.62783.14013085416782408.0c71a501-7c8e-46be-8973-1b2bba50d4d8.a117c9e0-ccac-4d22-9fc8-789b79efcfc9", screenshots: [ "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/34695/5e8e340955cab6dc47f249ed77302fc6b64015f5/ss_5e8e340955cab6dc47f249ed77302fc6b64015f5.1920x1080.jpg?t=1763640010", "https://www.thexboxhub.com/wp-content/uploads/2025/11/Cricket-26-scaled.jpg", "https://s3-ap-southeast-1.amazonaws.com/cdn.gamestheshop.com/screenshot/5d16536a-2886-49d0-9a18-0b32d51f4db0.jpg", "https://s3-ap-southeast-1.amazonaws.com/cdn.gamestheshop.com/screenshot/3193e732-d729-4bef-ad8c-c1982506abd5.jpg", ], tags: ["Sports", "Cricket", "Multiplayer", "Simulation"], category: "discover", rating: 4.7, isTrending: true, trailer_url: "https://www.youtube.com/watch?v=a9bhohGxKHM", ageRating: "E", developer: "Big Ant Studios", publisher: "Nacon", releaseDate: "19 Nov,2025", features: ["Single-player", "Multiplayer", "Co-op", "Online PvP", "Controller Support"], systemRequirements: { minimum: { os: "Windows 10 / 11 (64-bit)", processor: "Intel Core i5-6500 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti (4 GB) / AMD Radeon RX 560 (4 GB)", directX: "DirectX 12", storage: "≈ 35 GB free space", }, recommended: { os: "Windows 10 / 11 (64-bit)", processor: "Intel Core i7-8700 / AMD Ryzen 5 3600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1660 Super / AMD Radeon RX 580 (8 GB)", directX: "DirectX 12", storage: "≈ 35 GB free space (SSD recommended)", }, }, }, { id: 37, title: "Red Dead Redemption 2", description: "America, 1899. The end of the Wild West era has begun as lawmen hunt down the last remaining outlaw gangs.", price: 99, originalPrice: 200, image: "https://store-images.s-microsoft.com/image/apps.34695.68182501197884443.ac728a87-7bc1-4a0d-8bc6-0712072da93c.25816f86-f27c-4ade-ae29-222661145f1f", screenshots: [ "https://64.media.tumblr.com/fdb93fb3dc23195acd6b90aebf575a01/d4a1eaa3f9029f76-92/s1280x1920/1301978f193914d671ff7e28893cdc451708bccd.jpg", "https://i.redd.it/99aseoiboc631.jpg", "https://i.insider.com/5b6c632c7708e91bb85373a4?width=700", "https://www.thesun.co.uk/wp-content/uploads/2018/08/reddead3.png?strip=all&w=960", ], discount: 50.5, tags: ["Action", "Western"], category: "summerSale", trailer_url: "https://www.youtube.com/watch?v=gmA6MrX81z4", // RDR2 Official Trailer rating: 4.8, systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i5-2500K / AMD FX-6300", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 770 (2 GB) / AMD Radeon RX 280 (3 GB)", directX: "DirectX 11", storage: "≈ 150 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i7-4770K / AMD Ryzen 5 1500X", memory: "12 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 480 (4 GB)", directX: "DirectX 11", storage: "≈ 150 GB free space (SSD strongly recommended)", }, }, }, { id: 38, title: "Transport Fever 3", description: "From Urban Games comes the next-gen transport simulation with an expanded map, day-night cycle, bigger vehicles and more strategy. Arriving in 2026 for PC, PS5, and Xbox Series X/S.", price: 499, image: "https://i.gadgets360cdn.com/products/large/transport-fever-3-1lzeu-1000x1333-1752485325.png", isNew: true, releaseDate: "2026-TBA", tags: ["Simulation", "Strategy"], category: "newReleases", trailer_url: "https://www.youtube.com/watch?v=HcI60a6PbdI", ageRating: "E", developer: "Urban Games", publisher: "Urban Games", features: ["Single-player", "Simulation", "Strategy"], rating: 4.3, systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-6600 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 960 / AMD Radeon RX 460 (4 GB VRAM)", directX: "DirectX 12", storage: "≈ 20 GB free space (SSD recommended)", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-8400 / AMD Ryzen 5 1500X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 580 (6–8 GB VRAM)", directX: "DirectX 12", storage: "≈ 20 GB free space (SSD recommended)", }, }, }, { id: 39, title: "Alan Wake 2", description: "A psychological horror thriller where Alan Wake, a writer trapped in a nightmare reality, must rewrite reality itself to escape a shapeshifting darkness that threatens to consume both him and the world.", price: 149, image: "https://image.api.playstation.com/vulcan/ap/rnd/202305/2420/fbd0dcc88b31805fc7d49f59b8e0e5d0276403cde7fb8cc8.jpg", screenshots: [ "https://i.ytimg.com/vi/TeJfn1ncyNk/maxresdefault.jpg", "https://i.ytimg.com/vi/aAc8xQckYQw/maxresdefault.jpg", "https://cdn2.unrealengine.com/the-first-gameplay-preview-of-alan-wake-2-1920x1080-6cd1f0e9b2df.jpg", "https://press-start.com.au/wp-content/uploads/2023/09/alan-wake-22-770x433.jpg", ], isNew: true, releaseDate: "2023-10-27", tags: ["Horror", "Survival", "Thriller"], category: "newReleases", trailer_url: "https://www.youtube.com/watch?v=dlQ3FeNu5Yw", // Alan Wake 2 Official Trailer ageRating: "M", developer: "Remedy Entertainment", publisher: "Epic Games Publishing", features: ["Single-player", "Story Rich", "Horror", "Survival"], rating: 4.8, systemRequirements: { minimum: { os: "Windows 10 / 11 (64-bit)", processor: "Intel i5-7600K / AMD equivalent", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 6600 (6 GB VRAM)", directX: "DirectX 12", storage: "≈ 90 GB SSD", notes: "1080p, Low settings, ~30 FPS", }, recommended: { os: "Windows 10 / 11 (64-bit)", processor: "AMD Ryzen 7 3700X / Intel equivalent", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 3060 / AMD Radeon RX 6600 XT (8 GB VRAM)", directX: "DirectX 12", storage: "≈ 90 GB SSD", notes: "1080p/1440p, Medium settings, ~60 FPS", }, }, }, { id: 40, title: "Granblue Fantasy: Relink", description: "Assemble a party of skyfarers and embark on an epic action RPG journey filled with fast-paced combat, stunning visuals, and a rich fantasy world.", price: 99, image: "https://images.launchbox-app.com/0df5e096-afa2-4cf6-8424-99036a4a538d.jpg", screenshots: [ "https://i.ytimg.com/vi/vCUMvVlpf70/maxresdefault.jpg", "https://images.microcms-assets.io/assets/eb99e2a508104ba88aaa382d1573ac14/282198a575984be49e80becb4184d4e2/heads-up_display0010PS502.jpg", "https://i0.wp.com/gideonsgaming.com/wp-content/uploads/2024/01/Eugen-aiming.jpg?resize=1024%2C576&ssl=1", "https://images.rpgsite.net/image/da49c9a1/128357/original/Granblue-Fantasy-Relink_20230822_23.jpg", ], isTrending: true, tags: ["Action RPG", "Fantasy", "Multiplayer"], category: "trending", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=yIajXL-h2Yo", // Official Granblue Fantasy: Relink Trailer ageRating: "T", developer: "Cygames", publisher: "Cygames, Inc.", releaseDate: "2024-02-01", features: ["Co-op", "Fast-paced Combat", "Fantasy World", "Multiplayer"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i3-9100 / AMD Ryzen 3 3200G", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 580 (8 GB)", directX: "DirectX 11", storage: "90 GB free space", notes: "1080p, Standard settings ~30 FPS", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i7-8700 / AMD Ryzen 5 3600", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 (8 GB) / AMD Radeon RX 6700 XT (8 GB)", directX: "DirectX 11", storage: "90 GB free space (SSD recommended)", notes: "1080p, Ultra settings ~60 FPS", }, }, }, { id: 41, title: "WUCHANG Fallen Feathers", description: "An action RPG set in the chaotic final years of the Ming Dynasty, blending brutal combat, dark Chinese folklore, and hauntingly atmospheric exploration.", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202503/2515/c8b1e1fa6a4acecfda00d666dcd6737fa439ebdabb43be7a.png", screenshots: [ "https://i.ytimg.com/vi/3NP7OiotHRI/maxresdefault.jpg", "https://i0.wp.com/xboxera.com/wp-content/uploads/2024/06/Wuchang_Screenshot_2.png?ssl=1", "https://external-preview.redd.it/wuchang-fallen-feathers-first-update-1-000-007-applies-much-v0-RzY6tRciDJsrylUUXznbDJnmOMO2PnNq-miP_bHKCzw.jpeg?auto=webp&s=a4e179124a9f8458fe1d2f103d226c172259d0fd", "https://cdn.hstatic.net/products/1000190106/wu_chang_1_0072f4d4bc1d4b84a5c4e72e4127ca48.jpg", ], isTrending: true, tags: ["Soulslike", "Action RPG", "Dark Fantasy"], category: "trending", rating: 4.5, trailer_url: "https://www.youtube.com/watch?v=KMMMNGV9LqI", // Wuchang Official Gameplay Trailer ageRating: "M", developer: "Leenzee Games", publisher: "Leenzee Games", releaseDate: "2025-??-??", // Not released yet features: ["Soulslike Combat", "Exploration", "Dark Atmosphere"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-8400 / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 580 (8 GB)", directX: "DirectX 12", storage: "60 GB free space (HDD supported, SSD recommended)", notes: "DLSS/FSR/XeSS supported", }, recommended: { os: "Windows 10/11 (64-bit)", processor: "Intel Core i7-9700 / AMD Ryzen 5 5500", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2070 / AMD Radeon RX 5700 XT", directX: "DirectX 12", storage: "60 GB free space (SSD recommended)", notes: "DLSS/FSR enabled at test", }, }, }, { id: 42, title: "Skull and Bones", description: "Set sail in Ubisofts open-world pirate adventure. Command your ship, engage in naval battles, and build your reputation as a fearsome pirate lord.", price: 99, image: "https://upload.wikimedia.org/wikipedia/en/8/81/Skull_%26_Bones_video_game.jpg", screenshots: [ "https://www.videogameschronicle.com/files/2023/01/skull-and-bones-watch.jpg", "https://cdn.mos.cms.futurecdn.net/SVh4Ap8pcsZG2ffyZG6YER.jpg", "https://staticctf.ubisoft.com/J3yJr34U2pZ2Ieem48Dwy9uqj5PNUQTn/6tGkf7LXLpSgCnR2F2hzLW/1b86d27169cfc62f8a81f195f9003d3f/SaB_HP_Promo3.jpg", "https://gaming-cdn.com/images/products/4813/screenshot/skull-and-bones-playstation-5-game-playstation-store-wallpaper-2.jpg?v=1730133582", ], isTrending: true, tags: ["Open World", "Pirates", "Multiplayer"], category: "trending", rating: 4.0, trailer_url: "https://www.youtube.com/watch?v=6pmjmPJ-YH0", // Skull and Bones Launch Trailer ageRating: "M", developer: "Ubisoft Singapore", publisher: "Ubisoft", releaseDate: "2024-02-16", features: ["Naval Combat", "Open World", "Multiplayer", "Pirate Adventure"], systemRequirements: { minimum: { os: "Windows 10 (64-bit)", processor: "Intel Core i7-4790 / AMD Ryzen 5 1600", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 5500 XT (8 GB)", directX: "DirectX 11", storage: "65 GB free space", notes: "1080p, low/medium settings, internet connection required", }, recommended: { os: "Windows 10 or 11 (64-bit)", processor: "Intel Core i7-8700K / AMD Ryzen 5 3600", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (8 GB) / AMD Radeon RX 5700 XT (8 GB)", directX: "DirectX 11", storage: "65 GB free space (SSD recommended)", notes: "1080p, high settings, internet connection required", }, }, }, { id: 43, title: "Palworld", description: "Fight, farm, build and work alongside mysterious creatures called 'Pals' in this completely new multiplayer, open world survival and crafting game!", price: 99, image: "https://m.media-amazon.com/images/M/MV5BMzY3OWRjOGMtMmM2OS00MGIxLThiYzItYzk4NWYyZDA4YjUzXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_When_Is_it_coming_to_PS4_and_PS5-1024x576.jpg", "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_PS5_release_possible-1024x576.jpg", "https://cdn.mos.cms.futurecdn.net/UnZv9iMjRaA9eya3P8qGL9.jpg", "https://console.kr-asia.com/wp-content/uploads/2024/10/Pocketpair-Palworld-Gameplay-1024x576.jpg", ], isTrending: true, tags: ["Survival", "Multiplayer"], category: "trending", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=D9w97KSEAOo", // Palworld Official Trailer systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3570K 3.4 GHz (4 cores)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1050 (2 GB VRAM)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD recommended)", notes: "Internet connection required", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i9‑9900K 3.6 GHz (8 cores)", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (or equivalent)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD required)", notes: "For smooth performance and better graphics", }, }, }, { id: 44, title: "Helldivers 2", description: "The Galaxy's Last Line of Offence. Enlist in the Helldivers and join the fight for freedom across a hostile galaxy in a fast, frantic, and ferocious third-person shooter.", price: 149, image: "https://m.media-amazon.com/images/M/MV5BN2IyY2VjMDctNGMzYS00ZWEwLTkyNTgtNTdkNDQ3MzA0MDhmXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://i.ytimg.com/vi/1Ihs5xS0NKM/maxresdefault.jpg", "https://sm.pcmag.com/pcmag_uk/photo/default/05d2fmvzbcxnmbhbii8zgsr-5_dfjc.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/578cceff-f72f-42fc-b216-442cffd493d9/Bugs.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/85b5c178-baf6-4542-971a-b5aabfbbfb69/Strike.jpg", ], isTrending: true, tags: ["Action", "Co-op"], category: "trending", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=UC5EpJR0GBQ&t=1s", // Helldivers 2 Official Trailer systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i7-4790K / AMD Ryzen 5 1500X", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti / AMD Radeon RX 470", directX: "DirectX 12", storage: "≈ 135 GB free space", notes: "1080p, Low settings ~30 FPS", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i7-9700K / AMD Ryzen 7 3700X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 6600 XT", directX: "DirectX 12", storage: "≈ 135 GB free space (SSD recommended)", notes: "1080p, Medium settings ~60 FPS", }, }, }, { id: 46, title: "Minecraft Dungeons", description: "Experience the ultimate gaming adventure with Minecraft Dungeons.", price: 149, image: "https://images.gog.com/004c1f1a63be5863f18ce597bba07473cb8e6fe4d2e9538fbd763420c58258be_glx_vertical_cover.webp?namespace=gamesdb", rating: 4.8, tags: ["Sandbox", "Creative"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=KCbE47v1qVk", // Minecraft Dungeons Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3-3210 / AMD FX-4350", memory: "4 GB RAM", graphics: "Intel HD Graphics 4000 / AMD Radeon R7 240", directX: "DirectX 11", storage: "≈ 3 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4690 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 660 / AMD Radeon HD 7870", directX: "DirectX 11", storage: "≈ 3 GB free space (SSD recommended)", }, }, }, { id: 47, title: "Among Us", description: "Experience the ultimate gaming adventure with Among Us.", price: 99, image: "https://w0.peakpx.com/wallpaper/383/807/HD-wallpaper-among-us-amoung-us-space-killing-game-twitch.jpg", screenshots: [ "https://static01.nyt.com/images/2020/10/18/fashion/14AMONG-US1/oakImage-1602686170971-superJumbo.jpg", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/among-us/e/e6/Screenshot_%28331%29.png?width=1280", "https://www.gamegrin.com/assets/Uploads/2020/11/27/_resampled/resizedimage640360-au-SKELD.png", "https://i.ytimg.com/vi/Q_NXy5XcfgM/hq720.jpg?sqp=-oaymwE7CK4FEIIDSFryq4qpAy0IARUAAAAAGAElAADIQj0AgKJD8AEB-AH-CYAC0AWKAgwIABABGGEgYShhMA8=&rs=AOn4CLArAahoDTZnxypuDvO8gz1mhjc4Fw", ], rating: 4.2, tags: ["Social", "Multiplayer"], category: "Winter Sale", trailer_url: "https://www.youtube.com/watch?v=9pyYq9lpjls", // Among Us Trailer systemRequirements: { minimum: { os: "Windows 7 SP1+ / 8 / 10 (64-bit)", processor: "Intel Pentium 4 2.4 GHz", memory: "1 GB RAM", graphics: "Intel HD Graphics 3000 / AMD Radeon HD 2000", directX: "DirectX 10", storage: "≈ 250 MB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i3 3.0 GHz / AMD equivalent", memory: "2 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 11", storage: "≈ 250 MB free space", }, }, }, { id: 48, title: "REPO", description: "Experience the ultimate gaming adventure with REPO.", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1509/7be5ed15189dd9642fda32c373ff63a659353ddef1cb6dc9.jpg", screenshots: [ "https://gam3s.gg/_next/image/?url=https%3A%2F%2Fassets.gam3s.gg%2F1748478390374_gallery_image_1_92be76cf10.jpeg&w=3840&q=75", "https://vpesports.com/wp-content/uploads/2025/03/repo-game.jpg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2025/04/ss_e6babaab52581f81df91e50768cee6a9334ef6ec.jpg?w=1600&h=900&fit=crop", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/repo/8/88/20250311213105_1.jpg?width=1280", ], isFree: false, rating: 4.1, tags: ["Action"], category: "popular", ystemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5‑4460 / AMD FX‑8350", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 / AMD Radeon R7 260x", directX: "DirectX 11", storage: "≈ 15 GB free space", notes: "Internet connection required (co‑op horror)", }, recommended: { os: "Windows 10 / 11 64‑bit", processor: "Intel Core i7‑8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5700", directX: "DirectX 12", storage: "≈ 15 GB free space (SSD recommended)", notes: "Better performance & smoother co‑op experience", }, }, }, { id: 49, title: "No Man's Sky", description: "Experience the ultimate gaming adventure with No Man's Sky.", price: 199, originalPrice: 299, image: "https://store-images.s-microsoft.com/image/apps.23712.68818099466568894.5fae376b-4fd4-4e61-a81c-a5575757b3b1.66a28ad7-7756-4f00-9b06-21603375f0a4", discount: 33, tags: ["Exploration", "Survival", "Space"], category: "recentlyUpdated", rating: 4.2, updateInfo: "Worlds Part I Update - New Biomes", trailer_url: "https://www.youtube.com/watch?v=nLtmEjqzg7M", // No Man's Sky Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3 / AMD Ryzen 3", memory: "8 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 9.0c", storage: "≈ 10 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5 / AMD Ryzen 5", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 980 / AMD Radeon R9 Fury", directX: "DirectX 11", storage: "≈ 15 GB free space (SSD recommended)", }, }, }, { id: 50, title: "Black Myth Wukong", description: "Experience the ultimate gaming adventure with Black Myth Wukong.", price: 99, isFree: false, image: "https://m.media-amazon.com/images/M/MV5BNGVmZTVjZDMtMzkyZi00MTczLWE4OTUtY2Y1ODBlMGFlYTAxXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://images.squarespace-cdn.com/content/v1/64b9a29ce2f8b717c65126a7/720e01a3-a9a4-4138-bef3-53f43346057b/black+myth+wukong+gameplay.jpg", "https://aiptcomics.com/wp-content/uploads/2022/08/Black-Myth-Wukong.jpg", "https://i.ytimg.com/vi/aXHTWWYMbxU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBa_NIQoWbcSKYwqwHx2IytyAN2pg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2024/08/black-myth-wukong-review-.jpg?w=1600&h=1200&fit=crop", ], tags: ["Action"], category: "hotTranding", rating: 4.0, updateInfo: "Chapter 5", trailer_url: "https://www.youtube.com/watch?v=O2nNljv0MOw", // Black Myth Wukong Official Trailer systemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5-8400 / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 580 (8 GB)", directX: "DirectX 11", storage: "≈ 130 GB free space", notes: "DLSS/FSR/XeSS supported — SSD recommended", }, recommended: { os: "Windows 10 64‑bit", processor: "Intel Core i7-9700 / AMD Ryzen 5 5500", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 5700 XT", directX: "DirectX 12", storage: "≈ 130 GB free space (SSD recommended)", }, }, }, { id: 51, title: "Pacific Drive", description: "Face the supernatural dangers of the Olympic Exclusion Zone with a car as your only companion in this driving survival adventure. Scavenge resources, load up your station wagon, and drive like your life depends on it.", price: 149, image: "https://store-images.s-microsoft.com/image/apps.9028.14342694787118182.96ac9113-88e6-4c27-822e-b852c773b5cc.479a98da-1b02-4315-86a1-a5df93ed489a", isTrending: true, tags: ["Survival", "Horror", "Driving"], category: "hotTrending", rating: 4.3, trendingRank: 5, trailer_url: "https://www.youtube.com/watch?v=nvPPggQ-pHs", // Pacific Drive Official Trailer ageRating: "T", developer: "Ironwood Studios", publisher: "Kepler Interactive", releaseDate: "2024-02-22", features: ["Single-player", "Survival", "Driving", "Crafting"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑8600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB)", directX: "DirectX 12", storage: "≈ 18 GB free space", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑10600K", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / RTX 3070", directX: "DirectX 12", storage: "≈ 18 GB free space (SSD recommended)", }, }, }, { id: 44, title: "Helldivers 2", description: "The Galaxy's Last Line of Offence. Enlist in the Helldivers and join the fight for freedom across a hostile galaxy in a fast, frantic, and ferocious third-person shooter.", price: 149, image: "https://m.media-amazon.com/images/M/MV5BN2IyY2VjMDctNGMzYS00ZWEwLTkyNTgtNTdkNDQ3MzA0MDhmXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://i.ytimg.com/vi/1Ihs5xS0NKM/maxresdefault.jpg", "https://sm.pcmag.com/pcmag_uk/photo/default/05d2fmvzbcxnmbhbii8zgsr-5_dfjc.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/578cceff-f72f-42fc-b216-442cffd493d9/Bugs.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/85b5c178-baf6-4542-971a-b5aabfbbfb69/Strike.jpg", ], isTrending: true, tags: ["Action", "Co-op"], category: "trending", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=UC5EpJR0GBQ&t=1s", // Helldivers 2 Official Trailer systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i7-4790K / AMD Ryzen 5 1500X", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti / AMD Radeon RX 470", directX: "DirectX 12", storage: "≈ 135 GB free space", notes: "1080p, Low settings ~30 FPS", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i7-9700K / AMD Ryzen 7 3700X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 6600 XT", directX: "DirectX 12", storage: "≈ 135 GB free space (SSD recommended)", notes: "1080p, Medium settings ~60 FPS", }, }, }, { id: 43, title: "Palworld", description: "Fight, farm, build and work alongside mysterious creatures called 'Pals' in this completely new multiplayer, open world survival and crafting game!", price: 99, image: "https://m.media-amazon.com/images/M/MV5BMzY3OWRjOGMtMmM2OS00MGIxLThiYzItYzk4NWYyZDA4YjUzXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_When_Is_it_coming_to_PS4_and_PS5-1024x576.jpg", "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_PS5_release_possible-1024x576.jpg", "https://cdn.mos.cms.futurecdn.net/UnZv9iMjRaA9eya3P8qGL9.jpg", "https://console.kr-asia.com/wp-content/uploads/2024/10/Pocketpair-Palworld-Gameplay-1024x576.jpg", ], isTrending: true, tags: ["Survival", "Multiplayer"], category: "trending", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=D9w97KSEAOo", // Palworld Official Trailer systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3570K 3.4 GHz (4 cores)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1050 (2 GB VRAM)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD recommended)", notes: "Internet connection required", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i9‑9900K 3.6 GHz (8 cores)", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (or equivalent)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD required)", notes: "For smooth performance and better graphics", }, }, }, { id: 46, title: "Minecraft Dungeons", description: "Experience the ultimate gaming adventure with Minecraft Dungeons.", price: 149, image: "https://images.gog.com/004c1f1a63be5863f18ce597bba07473cb8e6fe4d2e9538fbd763420c58258be_glx_vertical_cover.webp?namespace=gamesdb", rating: 4.8, tags: ["Sandbox", "Creative"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=KCbE47v1qVk", // Minecraft Dungeons Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3-3210 / AMD FX-4350", memory: "4 GB RAM", graphics: "Intel HD Graphics 4000 / AMD Radeon R7 240", directX: "DirectX 11", storage: "≈ 3 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4690 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 660 / AMD Radeon HD 7870", directX: "DirectX 11", storage: "≈ 3 GB free space (SSD recommended)", }, }, }, { id: 47, title: "Among Us", description: "Experience the ultimate gaming adventure with Among Us.", price: 99, image: "https://w0.peakpx.com/wallpaper/383/807/HD-wallpaper-among-us-amoung-us-space-killing-game-twitch.jpg", screenshots: [ "https://static01.nyt.com/images/2020/10/18/fashion/14AMONG-US1/oakImage-1602686170971-superJumbo.jpg", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/among-us/e/e6/Screenshot_%28331%29.png?width=1280", "https://www.gamegrin.com/assets/Uploads/2020/11/27/_resampled/resizedimage640360-au-SKELD.png", "https://i.ytimg.com/vi/Q_NXy5XcfgM/hq720.jpg?sqp=-oaymwE7CK4FEIIDSFryq4qpAy0IARUAAAAAGAElAADIQj0AgKJD8AEB-AH-CYAC0AWKAgwIABABGGEgYShhMA8=&rs=AOn4CLArAahoDTZnxypuDvO8gz1mhjc4Fw", ], rating: 4.2, tags: ["Social", "Multiplayer"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=9pyYq9lpjls", // Among Us Trailer systemRequirements: { minimum: { os: "Windows 7 SP1+ / 8 / 10 (64-bit)", processor: "Intel Pentium 4 2.4 GHz", memory: "1 GB RAM", graphics: "Intel HD Graphics 3000 / AMD Radeon HD 2000", directX: "DirectX 10", storage: "≈ 250 MB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i3 3.0 GHz / AMD equivalent", memory: "2 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 11", storage: "≈ 250 MB free space", }, }, }, { id: 48, title: "REPO", description: "Experience the ultimate gaming adventure with REPO.", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1509/7be5ed15189dd9642fda32c373ff63a659353ddef1cb6dc9.jpg", screenshots: [ "https://gam3s.gg/_next/image/?url=https%3A%2F%2Fassets.gam3s.gg%2F1748478390374_gallery_image_1_92be76cf10.jpeg&w=3840&q=75", "https://vpesports.com/wp-content/uploads/2025/03/repo-game.jpg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2025/04/ss_e6babaab52581f81df91e50768cee6a9334ef6ec.jpg?w=1600&h=900&fit=crop", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/repo/8/88/20250311213105_1.jpg?width=1280", ], isFree: false, rating: 4.1, tags: ["Action"], category: "popular", ystemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5‑4460 / AMD FX‑8350", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 / AMD Radeon R7 260x", directX: "DirectX 11", storage: "≈ 15 GB free space", notes: "Internet connection required (co‑op horror)", }, recommended: { os: "Windows 10 / 11 64‑bit", processor: "Intel Core i7‑8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5700", directX: "DirectX 12", storage: "≈ 15 GB free space (SSD recommended)", notes: "Better performance & smoother co‑op experience", }, }, }, { id: 49, title: "No Man's Sky", description: "Experience the ultimate gaming adventure with No Man's Sky.", price: 199, originalPrice: 299, image: "https://store-images.s-microsoft.com/image/apps.23712.68818099466568894.5fae376b-4fd4-4e61-a81c-a5575757b3b1.66a28ad7-7756-4f00-9b06-21603375f0a4", discount: 33, tags: ["Exploration", "Survival", "Space"], category: "recentlyUpdated", rating: 4.2, updateInfo: "Worlds Part I Update - New Biomes", trailer_url: "https://www.youtube.com/watch?v=nLtmEjqzg7M", // No Man's Sky Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3 / AMD Ryzen 3", memory: "8 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 9.0c", storage: "≈ 10 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5 / AMD Ryzen 5", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 980 / AMD Radeon R9 Fury", directX: "DirectX 11", storage: "≈ 15 GB free space (SSD recommended)", }, }, }, { id: 51, title: "Pacific Drive", description: "Face the supernatural dangers of the Olympic Exclusion Zone with a car as your only companion in this driving survival adventure. Scavenge resources, load up your station wagon, and drive like your life depends on it.", price: 149, image: "https://store-images.s-microsoft.com/image/apps.9028.14342694787118182.96ac9113-88e6-4c27-822e-b852c773b5cc.479a98da-1b02-4315-86a1-a5df93ed489a", isTrending: true, tags: ["Survival", "Horror", "Driving"], category: "hotTrending", rating: 4.3, trendingRank: 5, trailer_url: "https://www.youtube.com/watch?v=nvPPggQ-pHs", // Pacific Drive Official Trailer ageRating: "T", developer: "Ironwood Studios", publisher: "Kepler Interactive", releaseDate: "2024-02-22", features: ["Single-player", "Survival", "Driving", "Crafting"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑8600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB)", directX: "DirectX 12", storage: "≈ 18 GB free space", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑10600K", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / RTX 3070", directX: "DirectX 12", storage: "≈ 18 GB free space (SSD recommended)", }, }, }, { id: 44, title: "Helldivers 2", description: "The Galaxy's Last Line of Offence. Enlist in the Helldivers and join the fight for freedom across a hostile galaxy in a fast, frantic, and ferocious third-person shooter.", price: 149, image: "https://m.media-amazon.com/images/M/MV5BN2IyY2VjMDctNGMzYS00ZWEwLTkyNTgtNTdkNDQ3MzA0MDhmXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://i.ytimg.com/vi/1Ihs5xS0NKM/maxresdefault.jpg", "https://sm.pcmag.com/pcmag_uk/photo/default/05d2fmvzbcxnmbhbii8zgsr-5_dfjc.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/578cceff-f72f-42fc-b216-442cffd493d9/Bugs.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/85b5c178-baf6-4542-971a-b5aabfbbfb69/Strike.jpg", ], isTrending: true, tags: ["Action", "Co-op"], category: "trending", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=UC5EpJR0GBQ&t=1s", // Helldivers 2 Official Trailer systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i7-4790K / AMD Ryzen 5 1500X", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti / AMD Radeon RX 470", directX: "DirectX 12", storage: "≈ 135 GB free space", notes: "1080p, Low settings ~30 FPS", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i7-9700K / AMD Ryzen 7 3700X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 6600 XT", directX: "DirectX 12", storage: "≈ 135 GB free space (SSD recommended)", notes: "1080p, Medium settings ~60 FPS", }, }, }, { id: 43, title: "Palworld", description: "Fight, farm, build and work alongside mysterious creatures called 'Pals' in this completely new multiplayer, open world survival and crafting game!", price: 99, image: "https://m.media-amazon.com/images/M/MV5BMzY3OWRjOGMtMmM2OS00MGIxLThiYzItYzk4NWYyZDA4YjUzXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_When_Is_it_coming_to_PS4_and_PS5-1024x576.jpg", "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_PS5_release_possible-1024x576.jpg", "https://cdn.mos.cms.futurecdn.net/UnZv9iMjRaA9eya3P8qGL9.jpg", "https://console.kr-asia.com/wp-content/uploads/2024/10/Pocketpair-Palworld-Gameplay-1024x576.jpg", ], isTrending: true, tags: ["Survival", "Multiplayer"], category: "trending", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=D9w97KSEAOo", // Palworld Official Trailer systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3570K 3.4 GHz (4 cores)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1050 (2 GB VRAM)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD recommended)", notes: "Internet connection required", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i9‑9900K 3.6 GHz (8 cores)", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (or equivalent)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD required)", notes: "For smooth performance and better graphics", }, }, }, { id: 46, title: "Minecraft Dungeons", description: "Experience the ultimate gaming adventure with Minecraft Dungeons.", price: 149, image: "https://images.gog.com/004c1f1a63be5863f18ce597bba07473cb8e6fe4d2e9538fbd763420c58258be_glx_vertical_cover.webp?namespace=gamesdb", rating: 4.8, tags: ["Sandbox", "Creative"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=KCbE47v1qVk", // Minecraft Dungeons Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3-3210 / AMD FX-4350", memory: "4 GB RAM", graphics: "Intel HD Graphics 4000 / AMD Radeon R7 240", directX: "DirectX 11", storage: "≈ 3 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4690 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 660 / AMD Radeon HD 7870", directX: "DirectX 11", storage: "≈ 3 GB free space (SSD recommended)", }, }, }, { id: 47, title: "Among Us", description: "Experience the ultimate gaming adventure with Among Us.", price: 99, image: "https://w0.peakpx.com/wallpaper/383/807/HD-wallpaper-among-us-amoung-us-space-killing-game-twitch.jpg", screenshots: [ "https://static01.nyt.com/images/2020/10/18/fashion/14AMONG-US1/oakImage-1602686170971-superJumbo.jpg", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/among-us/e/e6/Screenshot_%28331%29.png?width=1280", "https://www.gamegrin.com/assets/Uploads/2020/11/27/_resampled/resizedimage640360-au-SKELD.png", "https://i.ytimg.com/vi/Q_NXy5XcfgM/hq720.jpg?sqp=-oaymwE7CK4FEIIDSFryq4qpAy0IARUAAAAAGAElAADIQj0AgKJD8AEB-AH-CYAC0AWKAgwIABABGGEgYShhMA8=&rs=AOn4CLArAahoDTZnxypuDvO8gz1mhjc4Fw", ], rating: 4.2, tags: ["Social", "Multiplayer"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=9pyYq9lpjls", // Among Us Trailer systemRequirements: { minimum: { os: "Windows 7 SP1+ / 8 / 10 (64-bit)", processor: "Intel Pentium 4 2.4 GHz", memory: "1 GB RAM", graphics: "Intel HD Graphics 3000 / AMD Radeon HD 2000", directX: "DirectX 10", storage: "≈ 250 MB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i3 3.0 GHz / AMD equivalent", memory: "2 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 11", storage: "≈ 250 MB free space", }, }, }, { id: 48, title: "REPO", description: "Experience the ultimate gaming adventure with REPO.", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1509/7be5ed15189dd9642fda32c373ff63a659353ddef1cb6dc9.jpg", screenshots: [ "https://gam3s.gg/_next/image/?url=https%3A%2F%2Fassets.gam3s.gg%2F1748478390374_gallery_image_1_92be76cf10.jpeg&w=3840&q=75", "https://vpesports.com/wp-content/uploads/2025/03/repo-game.jpg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2025/04/ss_e6babaab52581f81df91e50768cee6a9334ef6ec.jpg?w=1600&h=900&fit=crop", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/repo/8/88/20250311213105_1.jpg?width=1280", ], isFree: false, rating: 4.1, tags: ["Action"], category: "popular", ystemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5‑4460 / AMD FX‑8350", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 / AMD Radeon R7 260x", directX: "DirectX 11", storage: "≈ 15 GB free space", notes: "Internet connection required (co‑op horror)", }, recommended: { os: "Windows 10 / 11 64‑bit", processor: "Intel Core i7‑8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5700", directX: "DirectX 12", storage: "≈ 15 GB free space (SSD recommended)", notes: "Better performance & smoother co‑op experience", }, }, }, { id: 49, title: "No Man's Sky", description: "Experience the ultimate gaming adventure with No Man's Sky.", price: 199, originalPrice: 299, image: "https://store-images.s-microsoft.com/image/apps.23712.68818099466568894.5fae376b-4fd4-4e61-a81c-a5575757b3b1.66a28ad7-7756-4f00-9b06-21603375f0a4", discount: 33, tags: ["Exploration", "Survival", "Space"], category: "recentlyUpdated", rating: 4.2, updateInfo: "Worlds Part I Update - New Biomes", trailer_url: "https://www.youtube.com/watch?v=nLtmEjqzg7M", // No Man's Sky Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3 / AMD Ryzen 3", memory: "8 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 9.0c", storage: "≈ 10 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5 / AMD Ryzen 5", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 980 / AMD Radeon R9 Fury", directX: "DirectX 11", storage: "≈ 15 GB free space (SSD recommended)", }, }, }, { id: 50, title: "Black Myth Wukong", description: "Experience the ultimate gaming adventure with Black Myth Wukong.", price: 99, isFree: false, image: "https://m.media-amazon.com/images/M/MV5BNGVmZTVjZDMtMzkyZi00MTczLWE4OTUtY2Y1ODBlMGFlYTAxXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://images.squarespace-cdn.com/content/v1/64b9a29ce2f8b717c65126a7/720e01a3-a9a4-4138-bef3-53f43346057b/black+myth+wukong+gameplay.jpg", "https://aiptcomics.com/wp-content/uploads/2022/08/Black-Myth-Wukong.jpg", "https://i.ytimg.com/vi/aXHTWWYMbxU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBa_NIQoWbcSKYwqwHx2IytyAN2pg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2024/08/black-myth-wukong-review-.jpg?w=1600&h=1200&fit=crop", ], tags: ["Action"], category: "hotTranding", rating: 4.0, updateInfo: "Chapter 5", trailer_url: "https://www.youtube.com/watch?v=O2nNljv0MOw", // Black Myth Wukong Official Trailer systemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5-8400 / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 580 (8 GB)", directX: "DirectX 11", storage: "≈ 130 GB free space", notes: "DLSS/FSR/XeSS supported — SSD recommended", }, recommended: { os: "Windows 10 64‑bit", processor: "Intel Core i7-9700 / AMD Ryzen 5 5500", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 5700 XT", directX: "DirectX 12", storage: "≈ 130 GB free space (SSD recommended)", }, }, }, { id: 51, title: "Pacific Drive", description: "Face the supernatural dangers of the Olympic Exclusion Zone with a car as your only companion in this driving survival adventure. Scavenge resources, load up your station wagon, and drive like your life depends on it.", price: 149, image: "https://store-images.s-microsoft.com/image/apps.9028.14342694787118182.96ac9113-88e6-4c27-822e-b852c773b5cc.479a98da-1b02-4315-86a1-a5df93ed489a", isTrending: true, tags: ["Survival", "Horror", "Driving"], category: "hotTrending", rating: 4.3, trendingRank: 5, trailer_url: "https://www.youtube.com/watch?v=nvPPggQ-pHs", // Pacific Drive Official Trailer ageRating: "T", developer: "Ironwood Studios", publisher: "Kepler Interactive", releaseDate: "2024-02-22", features: ["Single-player", "Survival", "Driving", "Crafting"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑8600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB)", directX: "DirectX 12", storage: "≈ 18 GB free space", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑10600K", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / RTX 3070", directX: "DirectX 12", storage: "≈ 18 GB free space (SSD recommended)", }, }, }, { id: 44, title: "Helldivers 2", description: "The Galaxy's Last Line of Offence. Enlist in the Helldivers and join the fight for freedom across a hostile galaxy in a fast, frantic, and ferocious third-person shooter.", price: 149, image: "https://m.media-amazon.com/images/M/MV5BN2IyY2VjMDctNGMzYS00ZWEwLTkyNTgtNTdkNDQ3MzA0MDhmXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://i.ytimg.com/vi/1Ihs5xS0NKM/maxresdefault.jpg", "https://sm.pcmag.com/pcmag_uk/photo/default/05d2fmvzbcxnmbhbii8zgsr-5_dfjc.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/578cceff-f72f-42fc-b216-442cffd493d9/Bugs.jpg", "https://images.squarespace-cdn.com/content/v1/55ef0e29e4b099e22cdc9eea/85b5c178-baf6-4542-971a-b5aabfbbfb69/Strike.jpg", ], isTrending: true, tags: ["Action", "Co-op"], category: "trending", rating: 4.6, trailer_url: "https://www.youtube.com/watch?v=UC5EpJR0GBQ&t=1s", // Helldivers 2 Official Trailer systemRequirements: { minimum: { os: "Windows 10 64-bit", processor: "Intel Core i7-4790K / AMD Ryzen 5 1500X", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 1050 Ti / AMD Radeon RX 470", directX: "DirectX 12", storage: "≈ 135 GB free space", notes: "1080p, Low settings ~30 FPS", }, recommended: { os: "Windows 10 64-bit", processor: "Intel Core i7-9700K / AMD Ryzen 7 3700X", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 6600 XT", directX: "DirectX 12", storage: "≈ 135 GB free space (SSD recommended)", notes: "1080p, Medium settings ~60 FPS", }, }, }, { id: 43, title: "Palworld", description: "Fight, farm, build and work alongside mysterious creatures called 'Pals' in this completely new multiplayer, open world survival and crafting game!", price: 99, image: "https://m.media-amazon.com/images/M/MV5BMzY3OWRjOGMtMmM2OS00MGIxLThiYzItYzk4NWYyZDA4YjUzXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_When_Is_it_coming_to_PS4_and_PS5-1024x576.jpg", "https://cdn.oneesports.gg/cdn-data/2024/01/Palworld_PS5_release_possible-1024x576.jpg", "https://cdn.mos.cms.futurecdn.net/UnZv9iMjRaA9eya3P8qGL9.jpg", "https://console.kr-asia.com/wp-content/uploads/2024/10/Pocketpair-Palworld-Gameplay-1024x576.jpg", ], isTrending: true, tags: ["Survival", "Multiplayer"], category: "trending", rating: 4.7, trailer_url: "https://www.youtube.com/watch?v=D9w97KSEAOo", // Palworld Official Trailer systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑3570K 3.4 GHz (4 cores)", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1050 (2 GB VRAM)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD recommended)", notes: "Internet connection required", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i9‑9900K 3.6 GHz (8 cores)", memory: "32 GB RAM", graphics: "NVIDIA GeForce RTX 2070 (or equivalent)", directX: "DirectX 11", storage: "≈ 40 GB free space (SSD required)", notes: "For smooth performance and better graphics", }, }, }, { id: 46, title: "Minecraft Dungeons", description: "Experience the ultimate gaming adventure with Minecraft Dungeons.", price: 149, image: "https://images.gog.com/004c1f1a63be5863f18ce597bba07473cb8e6fe4d2e9538fbd763420c58258be_glx_vertical_cover.webp?namespace=gamesdb", rating: 4.8, tags: ["Sandbox", "Creative"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=KCbE47v1qVk", // Minecraft Dungeons Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3-3210 / AMD FX-4350", memory: "4 GB RAM", graphics: "Intel HD Graphics 4000 / AMD Radeon R7 240", directX: "DirectX 11", storage: "≈ 3 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5-4690 / AMD Ryzen 3 1200", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 660 / AMD Radeon HD 7870", directX: "DirectX 11", storage: "≈ 3 GB free space (SSD recommended)", }, }, }, { id: 47, title: "Among Us", description: "Experience the ultimate gaming adventure with Among Us.", price: 99, image: "https://w0.peakpx.com/wallpaper/383/807/HD-wallpaper-among-us-amoung-us-space-killing-game-twitch.jpg", screenshots: [ "https://static01.nyt.com/images/2020/10/18/fashion/14AMONG-US1/oakImage-1602686170971-superJumbo.jpg", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/among-us/e/e6/Screenshot_%28331%29.png?width=1280", "https://www.gamegrin.com/assets/Uploads/2020/11/27/_resampled/resizedimage640360-au-SKELD.png", "https://i.ytimg.com/vi/Q_NXy5XcfgM/hq720.jpg?sqp=-oaymwE7CK4FEIIDSFryq4qpAy0IARUAAAAAGAElAADIQj0AgKJD8AEB-AH-CYAC0AWKAgwIABABGGEgYShhMA8=&rs=AOn4CLArAahoDTZnxypuDvO8gz1mhjc4Fw", ], rating: 4.2, tags: ["Social", "Multiplayer"], category: "popular", trailer_url: "https://www.youtube.com/watch?v=9pyYq9lpjls", // Among Us Trailer systemRequirements: { minimum: { os: "Windows 7 SP1+ / 8 / 10 (64-bit)", processor: "Intel Pentium 4 2.4 GHz", memory: "1 GB RAM", graphics: "Intel HD Graphics 3000 / AMD Radeon HD 2000", directX: "DirectX 10", storage: "≈ 250 MB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i3 3.0 GHz / AMD equivalent", memory: "2 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 11", storage: "≈ 250 MB free space", }, }, }, { id: 48, title: "REPO", description: "Experience the ultimate gaming adventure with REPO.", price: 99, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1509/7be5ed15189dd9642fda32c373ff63a659353ddef1cb6dc9.jpg", screenshots: [ "https://gam3s.gg/_next/image/?url=https%3A%2F%2Fassets.gam3s.gg%2F1748478390374_gallery_image_1_92be76cf10.jpeg&w=3840&q=75", "https://vpesports.com/wp-content/uploads/2025/03/repo-game.jpg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2025/04/ss_e6babaab52581f81df91e50768cee6a9334ef6ec.jpg?w=1600&h=900&fit=crop", "https://oyster.ignimgs.com/mediawiki/apis.ign.com/repo/8/88/20250311213105_1.jpg?width=1280", ], isFree: false, rating: 4.1, tags: ["Action"], category: "popular", ystemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5‑4460 / AMD FX‑8350", memory: "8 GB RAM", graphics: "NVIDIA GeForce GTX 760 / AMD Radeon R7 260x", directX: "DirectX 11", storage: "≈ 15 GB free space", notes: "Internet connection required (co‑op horror)", }, recommended: { os: "Windows 10 / 11 64‑bit", processor: "Intel Core i7‑8700K / AMD Ryzen 5 3600X", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1070 / AMD Radeon RX 5700", directX: "DirectX 12", storage: "≈ 15 GB free space (SSD recommended)", notes: "Better performance & smoother co‑op experience", }, }, }, { id: 49, title: "No Man's Sky", description: "Experience the ultimate gaming adventure with No Man's Sky.", price: 199, originalPrice: 299, image: "https://store-images.s-microsoft.com/image/apps.23712.68818099466568894.5fae376b-4fd4-4e61-a81c-a5575757b3b1.66a28ad7-7756-4f00-9b06-21603375f0a4", discount: 33, tags: ["Exploration", "Survival", "Space"], category: "recentlyUpdated", rating: 4.2, updateInfo: "Worlds Part I Update - New Biomes", trailer_url: "https://www.youtube.com/watch?v=nLtmEjqzg7M", // No Man's Sky Trailer systemRequirements: { minimum: { os: "Windows 7 / 8 / 10 (64-bit)", processor: "Intel Core i3 / AMD Ryzen 3", memory: "8 GB RAM", graphics: "NVIDIA GeForce GT 640 / AMD Radeon HD 7750", directX: "DirectX 9.0c", storage: "≈ 10 GB free space", }, recommended: { os: "Windows 10 (64-bit)", processor: "Intel Core i5 / AMD Ryzen 5", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 980 / AMD Radeon R9 Fury", directX: "DirectX 11", storage: "≈ 15 GB free space (SSD recommended)", }, }, }, { id: 50, title: "Black Myth Wukong", description: "Experience the ultimate gaming adventure with Black Myth Wukong.", price: 99, isFree: false, image: "https://m.media-amazon.com/images/M/MV5BNGVmZTVjZDMtMzkyZi00MTczLWE4OTUtY2Y1ODBlMGFlYTAxXkEyXkFqcGc@._V1_.jpg", screenshots: [ "https://images.squarespace-cdn.com/content/v1/64b9a29ce2f8b717c65126a7/720e01a3-a9a4-4138-bef3-53f43346057b/black+myth+wukong+gameplay.jpg", "https://aiptcomics.com/wp-content/uploads/2022/08/Black-Myth-Wukong.jpg", "https://i.ytimg.com/vi/aXHTWWYMbxU/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBa_NIQoWbcSKYwqwHx2IytyAN2pg", "https://static0.polygonimages.com/wordpress/wp-content/uploads/2024/08/black-myth-wukong-review-.jpg?w=1600&h=1200&fit=crop", ], tags: ["Action"], category: "hotTranding", rating: 4.0, updateInfo: "Chapter 5", trailer_url: "https://www.youtube.com/watch?v=O2nNljv0MOw", // Black Myth Wukong Official Trailer systemRequirements: { minimum: { os: "Windows 10 64‑bit", processor: "Intel Core i5-8400 / AMD Ryzen 5 1600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB) / AMD Radeon RX 580 (8 GB)", directX: "DirectX 11", storage: "≈ 130 GB free space", notes: "DLSS/FSR/XeSS supported — SSD recommended", }, recommended: { os: "Windows 10 64‑bit", processor: "Intel Core i7-9700 / AMD Ryzen 5 5500", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2060 / AMD Radeon RX 5700 XT", directX: "DirectX 12", storage: "≈ 130 GB free space (SSD recommended)", }, }, }, { id: 51, title: "Pacific Drive", description: "Face the supernatural dangers of the Olympic Exclusion Zone with a car as your only companion in this driving survival adventure. Scavenge resources, load up your station wagon, and drive like your life depends on it.", price: 149, image: "https://store-images.s-microsoft.com/image/apps.9028.14342694787118182.96ac9113-88e6-4c27-822e-b852c773b5cc.479a98da-1b02-4315-86a1-a5df93ed489a", isTrending: true, tags: ["Survival", "Horror", "Driving"], category: "hotTrending", rating: 4.3, trendingRank: 5, trailer_url: "https://www.youtube.com/watch?v=nvPPggQ-pHs", // Pacific Drive Official Trailer ageRating: "T", developer: "Ironwood Studios", publisher: "Kepler Interactive", releaseDate: "2024-02-22", features: ["Single-player", "Survival", "Driving", "Crafting"], systemRequirements: { minimum: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑8600", memory: "16 GB RAM", graphics: "NVIDIA GeForce GTX 1060 (6 GB)", directX: "DirectX 12", storage: "≈ 18 GB free space", }, recommended: { os: "Windows 10 (64‑bit)", processor: "Intel Core i5‑10600K", memory: "16 GB RAM", graphics: "NVIDIA GeForce RTX 2080 / RTX 3070", directX: "DirectX 12", storage: "≈ 18 GB free space (SSD recommended)", }, }, }, ] // Add slugs to games and normalize categories export const browseGamesWithSlugs = browseGames.map((game) => ({ ...game, category: normalizeCategory(game.category), slug: createSlug(game.title), })) // Get unique categories from the games data const getUniqueCategoriesFromGames = (): string[] => { const categories = new Set() browseGamesWithSlugs.forEach((game) => { if (game.category && game.category !== "all") { if (game.category !== "hottrending" && game.category !== "new-releases") { categories.add(game.category) } } }) return Array.from(categories).sort() } const uniqueCategories = getUniqueCategoriesFromGames() // Create a map of normalized categories for filtering and display export const browseCategoriesMap: Record = { all: "All Categories", ...Object.fromEntries( uniqueCategories.map((category) => [ category, category .split("-") .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(" "), ]), ), } [V0_FILE]typescriptreact:file="app/auth/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="app/auth/callback/route.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const { searchParams } = new URL(request.url) const code = searchParams.get("code") const redirectTo = searchParams.get("redirect") || "/library" if (code) { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The `setAll` method was called from a Server Component. } }, }, }, ) const { data, error } = await supabase.auth.exchangeCodeForSession(code) if (error) { console.error("OAuth exchange error:", error) return NextResponse.redirect(new URL("/auth?error=oauth_failed", request.url)) } if (data.user) { try { const decodedRedirect = decodeURIComponent(redirectTo) return NextResponse.redirect(new URL(decodedRedirect, request.url)) } catch { return NextResponse.redirect(new URL("/library", request.url)) } } } return NextResponse.redirect(new URL("/auth", request.url)) } [V0_FILE]typescriptreact:file="components/library-codes-panel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Mail, Clock, CheckCircle, X, KeyRound } from "lucide-react" import { libraryCodeRequestService, type LibraryCodeRequest } from "@/lib/supabase" import { toast } from "sonner" import { ScrollArea } from "@/components/ui/scroll-area" export function LibraryCodesPanel() { const [requests, setRequests] = useState([]) const [isLoading, setIsLoading] = useState(true) const [selectedRequest, setSelectedRequest] = useState(null) const [gameCode, setGameCode] = useState("") const [isAssigning, setIsAssigning] = useState(false) useEffect(() => { fetchRequests() // Set up real-time subscription const unsubscribe = libraryCodeRequestService.subscribeToCodeRequests("", (newRequest: LibraryCodeRequest) => { setRequests((prev) => { const idx = prev.findIndex((r) => r.id === newRequest.id) if (idx >= 0) { const updated = [...prev] updated[idx] = newRequest return updated } return [newRequest, ...prev] }) }) return () => { if (unsubscribe) unsubscribe() } }, []) const fetchRequests = async () => { try { setIsLoading(true) const data = await libraryCodeRequestService.getAllCodeRequests() setRequests(data) } catch (error) { console.error("Error fetching code requests:", error) toast.error("Failed to load code requests") } finally { setIsLoading(false) } } const handleAssignCode = async (requestId: string) => { if (!gameCode.trim()) { toast.error("Please enter a game code") return } try { setIsAssigning(true) await libraryCodeRequestService.assignGameCode(requestId, gameCode) toast.success("Game code assigned successfully!") setGameCode("") setSelectedRequest(null) await fetchRequests() } catch (error: any) { console.error("Error assigning code:", error) if (error.message === "CODE_ALREADY_USED") { toast.error("This code is already assigned to another request") } else { toast.error("Failed to assign code") } } finally { setIsAssigning(false) } } const handleCancelRequest = async (requestId: string) => { try { await libraryCodeRequestService.cancelCodeRequest(requestId) toast.success("Request cancelled") await fetchRequests() } catch (error) { console.error("Error cancelling request:", error) toast.error("Failed to cancel request") } } const getStatusColor = (status: string) => { switch (status) { case "pending": return "bg-yellow-600" case "delivered": return "bg-green-600" case "cancelled": return "bg-red-600" default: return "bg-gray-600" } } const getStatusIcon = (status: string) => { switch (status) { case "pending": return case "delivered": return case "cancelled": return default: return } } const pendingRequests = requests.filter((r) => r.status === "pending") const deliveredRequests = requests.filter((r) => r.status === "delivered") return (
{/ Stats /}

Pending Requests

{pendingRequests.length}

Delivered

{deliveredRequests.length}

Total Requests

{requests.length}

{/ Requests List /} {isLoading ? (

Loading requests...
) : requests.length === 0 ? (
No Code Requests

Library code requests will appear here
) : (

{requests.map((request) => ( setSelectedRequest(request)} className={`bg-gray-800 border cursor-pointer transition-all ${ selectedRequest?.id === request.id ? "border-blue-500 ring-1 ring-blue-500/20" : "border-gray-700" }`} >

{request.game_title}

{request.customer_email}

{getStatusIcon(request.status)} {request.status.toUpperCase()}
{request.game_code && (

{request.game_code}

)}
{new Date(request.created_at).toLocaleString()}
))}

{/ Assignment Form /}
{selectedRequest ? "Assign Code" : "Select Request"} {selectedRequest ? (

Game

{selectedRequest.game_title}

Player

{selectedRequest.customer_email}

{selectedRequest.status === "pending" && ( <>
Game Code setGameCode(e.target.value)} placeholder="Enter or paste game code" className="bg-gray-900 border-gray-600 text-white placeholder:text-gray-500 text-sm" />
)} {selectedRequest.status === "delivered" && (

Code Delivered

{selectedRequest.game_code}

)}
) : (
Select a request to assign a code
)}

)}
) } [V0_FILE]sql:file="scripts/create-library-code-requests-table-v2.sql" isMerged="true" -- Create library_code_requests table for tracking game code requests from library CREATE TABLE IF NOT EXISTS library_code_requests ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, library_id UUID NOT NULL REFERENCES library(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, game_id TEXT NOT NULL, game_title TEXT NOT NULL, customer_email TEXT NOT NULL, tracking_id TEXT, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'delivered', 'cancelled')), game_code TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(library_id, game_id) -- One request per library game ); -- Enable Row Level Security ALTER TABLE library_code_requests ENABLE ROW LEVEL SECURITY; -- Create policies for RLS DROP POLICY IF EXISTS "Users can view their own code requests" ON library_code_requests; CREATE POLICY "Users can view their own code requests" ON library_code_requests FOR SELECT USING (auth.uid() = user_id); DROP POLICY IF EXISTS "Users can insert their own code requests" ON library_code_requests; CREATE POLICY "Users can insert their own code requests" ON library_code_requests FOR INSERT WITH CHECK (auth.uid() = user_id); DROP POLICY IF EXISTS "Admins can view all code requests" ON library_code_requests; CREATE POLICY "Admins can view all code requests" ON library_code_requests FOR SELECT USING (true); DROP POLICY IF EXISTS "Admins can update code requests" ON library_code_requests; CREATE POLICY "Admins can update code requests" ON library_code_requests FOR UPDATE USING (true); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_library_code_requests_library_id ON library_code_requests(library_id); CREATE INDEX IF NOT EXISTS idx_library_code_requests_user_id ON library_code_requests(user_id); CREATE INDEX IF NOT EXISTS idx_library_code_requests_status ON library_code_requests(status); CREATE INDEX IF NOT EXISTS idx_library_code_requests_created_at ON library_code_requests(created_at DESC); -- Create updated_at trigger DROP FUNCTION IF EXISTS update_library_code_requests_updated_at() CASCADE; CREATE OR REPLACE FUNCTION update_library_code_requests_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ language 'plpgsql'; DROP TRIGGER IF EXISTS update_library_code_requests_updated_at ON library_code_requests; CREATE TRIGGER update_library_code_requests_updated_at BEFORE UPDATE ON library_code_requests FOR EACH ROW EXECUTE FUNCTION update_library_code_requests_updated_at(); -- Enable real-time for the library_code_requests table ALTER PUBLICATION supabase_realtime ADD TABLE library_code_requests; [V0_FILE]sql:file="scripts/01-create-library-code-requests-table.sql" isMerged="true" -- Create library_code_requests table CREATE TABLE IF NOT EXISTS public.library_code_requests ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), library_id UUID NOT NULL REFERENCES public.library(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, game_id TEXT NOT NULL, game_title TEXT NOT NULL, customer_email TEXT NOT NULL, status TEXT NOT NULL DEFAULT 'pending' CHECK (status IN ('pending', 'delivered', 'cancelled')), game_code TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT now(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(), UNIQUE(library_id, user_id) ); -- Enable RLS ALTER TABLE public.library_code_requests ENABLE ROW LEVEL SECURITY; -- Create policies CREATE POLICY "Users can view their own code requests" ON public.library_code_requests FOR SELECT USING (user_id = auth.uid()); CREATE POLICY "Users can insert their own code requests" ON public.library_code_requests FOR INSERT WITH CHECK (user_id = auth.uid()); CREATE POLICY "Users can update their own code requests" ON public.library_code_requests FOR UPDATE USING (user_id = auth.uid()) WITH CHECK (user_id = auth.uid()); CREATE POLICY "Admins can view all code requests" ON public.library_code_requests FOR SELECT USING ( EXISTS ( SELECT 1 FROM public.account_submissions WHERE account_submissions.user_id = auth.uid() AND account_submissions.status = 'approved' ) ); CREATE POLICY "Admins can update all code requests" ON public.library_code_requests FOR UPDATE USING ( EXISTS ( SELECT 1 FROM public.account_submissions WHERE account_submissions.user_id = auth.uid() AND account_submissions.status = 'approved' ) ); -- Create indexes for performance CREATE INDEX idx_library_code_requests_user_id ON public.library_code_requests(user_id); CREATE INDEX idx_library_code_requests_library_id ON public.library_code_requests(library_id); CREATE INDEX idx_library_code_requests_status ON public.library_code_requests(status); -- Enable realtime ALTER PUBLICATION supabase_realtime ADD TABLE public.library_code_requests; [V0_FILE]sql:file="scripts/create-library-code-requests.sql" isMerged="true" -- Create library_code_requests table CREATE TABLE IF NOT EXISTS public.library_code_requests ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, library_id UUID NOT NULL REFERENCES public.library(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, game_id TEXT NOT NULL, game_title TEXT NOT NULL, customer_email TEXT NOT NULL, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'delivered', 'cancelled')), game_code TEXT UNIQUE, created_at TIMESTAMP WITH TIME ZONE DEFAULT now(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT now(), UNIQUE(library_id) -- Only one request per library game ); -- Create indexes for faster queries CREATE INDEX IF NOT EXISTS idx_library_code_requests_user_id ON public.library_code_requests(user_id); CREATE INDEX IF NOT EXISTS idx_library_code_requests_status ON public.library_code_requests(status); CREATE INDEX IF NOT EXISTS idx_library_code_requests_library_id ON public.library_code_requests(library_id); -- Enable RLS ALTER TABLE public.library_code_requests ENABLE ROW LEVEL SECURITY; -- RLS Policies DROP POLICY IF EXISTS "Users can view their own code requests" ON public.library_code_requests; CREATE POLICY "Users can view their own code requests" ON public.library_code_requests FOR SELECT USING (auth.uid() = user_id OR auth.role() = 'authenticated'); DROP POLICY IF EXISTS "Admins can view all code requests" ON public.library_code_requests; CREATE POLICY "Admins can view all code requests" ON public.library_code_requests FOR SELECT USING (auth.role() = 'authenticated'); DROP POLICY IF EXISTS "Users can insert their own code requests" ON public.library_code_requests; CREATE POLICY "Users can insert their own code requests" ON public.library_code_requests FOR INSERT WITH CHECK (auth.uid() = user_id); DROP POLICY IF EXISTS "Admins can update code requests" ON public.library_code_requests; CREATE POLICY "Admins can update code requests" ON public.library_code_requests FOR UPDATE USING (auth.role() = 'authenticated'); -- Enable Realtime ALTER PUBLICATION supabase_realtime ADD TABLE public.library_code_requests; [V0_FILE]typescriptreact:file="components/wizard-games-footer.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Instagram, Send } from "lucide-react" export function WizardGamesFooter() { const currentYear = new Date().getFullYear() return (
{/ Top Divider /}
{/ Main Footer Content /}

{/ Column 1 - Wizard Games Store Branding /}

Wizard Games

Bringing magic to modern game shopping.

{/ Column 2 - Store /}

Store

Discover

Browse

Free Games

Wishlist

Cart

Library

{/ Column 3 - Support /}

Support

Support Center

Help Center

Contact Us

Order Tracking

Refund Policy

{/ Column 4 - Company /}

Company

About Us

Careers

Privacy Policy

Terms of Service

{/ Column 5 - Social Icons /}

Follow Us

{/ Bottom Divider /}
{/ Bottom Bar - Copyright /}

© {currentYear} Wizard Games Store. All rights reserved.

) } [V0_FILE]typescriptreact:file="components/epic-style-section.tsx" isMerged="true" "use client" import type React from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Heart, Play, Calendar, Star } from "lucide-react" import { useWishlistStore } from "@/lib/wishlist-store" import { toast } from "sonner" import type { Game } from "@/types/game" import { CheckoutLoadingModal } from "@/components/checkout-loading-modal" import { useState } from "react" interface EpicStyleSectionProps { onGameClick: (game: Game) => void } // Custom games data for the Epic Games Store style section const customGames = { topSellers: [ { id: "wizard-quest-1", title: "Cyberpunk 2077", price: 99, originalPrice: 1599, discount: 94, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1091500/bc1dbc616ec607e9ea6be88a4698c8b94b895c98/header_alt_assets_8.jpg?t=1753355628", category: "RPG", rating: 4.8, tags: ["RPG", "Fantasy", "Adventure"], description: "Embark on an epic magical journey through mystical realms filled with ancient secrets and powerful spells.", developer: "Wizard Studios", publisher: "Epic Fantasy Games", releaseDate: "Available Now", isAvailable: true, }, { id: "Forza Horizon 5", title: "Forza Horizon 5", price: 99, originalPrice: 1299, discount: 92.4, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1551360/header.jpg?t=1746471508", category: " Racing Games", rating: 4.6, tags: [" Racing Games"], description: "Your Ultimate Horizon Adventure awaits! Explore the vibrant and ever-evolving open world landscapes of Mexico with limitless, fun driving action in hundreds of the worlds greatest cars.", developer: "Playground Games", publisher: "Xbox Game Studios", releaseDate: "Available Now", isAvailable: true, }, { id: "Medieval Kingdom Wars", title: "Medieval Kingdom Wars", price: 99, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/499660/header.jpg?t=1733362002", category: "Strategy", rating: 4.7, tags: ["Strategy", "Medieval", "War"], description: "Build your kingdom and lead your armies to victory in this epic medieval strategy game.", developer: "Reverie World Studios", publisher: "indie.io", releaseDate: "Available Now", isAvailable: true, }, { id: "Starfield", title: "Starfield", price: 299, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1716740/header.jpg?t=1749757928", category: "Sci-Fi", rating: 4.9, tags: ["RPG Games"], description: "Starfield is the first new universe in over 25 years from Bethesda Game Studios, the award-winning creators of The Elder Scrolls V: Skyrim and Fallout 4. In this next generation role-playing game set amongst the stars, create any character you want and explore with unparalleled freedom as you embark on an epic journey to answer humanitys greatest mystery.", developer: "Bethesda Game Studios", publisher: "Bethesda Softworks", releaseDate: "Available Now", isAvailable: true, }, { id: "dragonlegacy", title: "Dragons Legacy", price: 99, originalPrice: 250, discount: 60.4, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2520410/header.jpg?t=1726064636", category: "RPG", rating: 4.5, tags: ["Dragons", "ndie Games", "RPG"], description: "Dragons Legacy is an online dragon survival sandbox game set in a large, beautiful, open world with day/night cycles. Rule the world as one of several dragon species such as the Flame Stalker Dragon, Shadow Scale Dragon, or the Acid Spitter Drake.", developer: "Beawesome Games", publisher: "Beawesome Games", releaseDate: "Available Now", isAvailable: true, }, ], mostPlayed: [ { id: "3D PUZZLE - Battle Royal", title: "3D PUZZLE - Battle Royal", price: 999, isFree: true, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2466850/header.jpg?t=1723667369", category: "Battle Royale", rating: 4.4, tags: ["Battle Royale", "Multiplayer", " 3D PUZZLE"], description: "Collect a 3D puzzle, transferring things to the right places to create a beautiful place.", developer: "PUZZLE Game", publisher: "Hede", releaseDate: "Available", isAvailable: true, }, { id: "CarX Street", title: "CarX Street", price: 149, isFree: true, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1114150/1f75e1d54e74cc8c81c4baed87ac8b935a838d7a/header.jpg?t=1754659386", category: "Racing", rating: 4.3, tags: ["Racing"], description: "Street racing, high speeds, and adrenaline-pumping action… All of this is waiting for you in Sunset City. Get behind the wheel of a variety of cars, enjoy extensive tuning options, and feel like a real king of the road.", developer: "CarX Technologies, LLC", publisher: "CarX Technologies, LLC", releaseDate: "29 Aug,2024", isAvailable: true, }, { id: "Counter-Strike 2", title: "Counter-Strike 2", price: 0, isFree: true, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/730/header.jpg?t=1749053861", category: "FPS", rating: 4.6, tags: ["FPS", "Counter-Strike 2", "Free"], description: "For over two decades, Counter-Strike has offered an elite competitive experience, one shaped by millions of players from across the globe. And now the next chapter in the CS story is about to begin. This is Counter-Strike 2.", developer: "Valve", publisher: "Valve", releaseDate: "Free", isAvailable: true, }, { id: "MOBA GM", title: "MOBA GM", price: 0, isFree: true, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/791990/header.jpg?t=1612366837", category: "MOBA", rating: 4.5, tags: ["MOBA", "Sports Games", "Free"], description: "The premier single-player MOBA eSports management simulation game.", developer: "Zen GM Game", publisher: "Zen GM Game", releaseDate: "Free", isAvailable: true, }, { id: "Party Animals", title: "Party Animals", price: 249, isFree: true, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1260320/bf5b79ec2b39544a2b8112eed0c2bae26e224a00/header_alt_assets_5.jpg?t=1753424021", category: "Party", rating: 4.2, tags: ["Party", "Action Games ", "Free"], description: "Join the fun with friends in this collection of hilarious party games.", developer: "Recreate Games", publisher: "Source Technology", releaseDate: "Free", isAvailable: true, }, ], topUpcoming: [ { id: "ELDEN RING", title: "ELDEN RING", price: 99, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1245620/header.jpg?t=1748630546", category: "RPG", rating: 0, tags: ["RPG", "Action Game", "Open World"], description: "THE CRITICALLY ACCLAIMED FANTASY ACTION RPG. Rise, Tarnished, and be guided by grace to brandish the power of the Elden Ring.", developer: "FromSoftware,Inc", publisher: "FromeSoftware,Inc...", releaseDate: "25 Feb,2022", comingSoon: true, availableDate: "25 Feb,2022", }, { id: "diablo-4", title: "Diablo® IV", price: 299, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/2344520/header.jpg?t=1754526062", category: "Action RPG", rating: 4, tags: ["Action RPG", "Dark Fantasy", "Multiplayer"], description: "Diablo® IV is the ultimate action-RPG experience with endless evil to slaughter, countless abilities to master, nightmarish dungeons, and legendary loot. Embark on the epic campaign solo or with friends, meeting memorable characters through a gripping story in a beautifully dark world, or explore an expansive end game: battle iconic bosses for powerful loot, fight back the encroaching onslaught of Hell in Helltides, master the Forge to create your ultimate weapons and progress powerful characters, with cross-play and cross-progression on all available platforms.", developer: "Blizzard Entertainment", publisher: "Blizzard Entertainment...", releaseDate: "Available 18 oct,2023", comingSoon: true, availableDate: "18 oct,2023", }, { id: "hollow-knight", title: "Hollow Knight", price: 99, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/367520/header.jpg?t=1695270428", category: "Metroidvania", rating: 3, tags: ["Hollow Knight", "Adventure"], description: "Hollow Knight Expands with Free Content", developer: "Team Cherry", publisher: "Team Cherry", releaseDate: "24 Feb,2017", comingSoon: true, }, { id: "Grand Theft Auto V", title: "Grand Theft Auto V Enhanced", price: 99, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3240220/header.jpg?t=1753974947", category: "Open World", rating: 4, tags: ["Open World", "Action", "Crime"], description: "When a young street hustler, a retired bank robber, and a terrifying psychopath find themselves entangled with some of the most frightening and deranged elements of the criminal underworld, the U.S. government, and the entertainment industry, they must pull off a series of dangerous heists to survive in a ruthless city in which they can trust nobody — least of all each other.", developer: "Rockstar North", publisher: "Rockstar Games", releaseDate: "4 Mar,2025", comingSoon: true, }, { id: "hades-2", title: "Hades II: Underworld Rising", price: 99, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1145350/1aaa69012e49f17ed2d26fe1e104c294dce15373/header.jpg?t=1752529824", category: "Roguelike", rating: 4, tags: ["Roguelike", "Action", "Mythology"], description: "The first-ever sequel from Supergiant Games builds on the best aspects of the original god-like rogue-like dungeon crawler in an all-new, action-packed, endlessly replayable experience rooted in the Underworld of Greek myth and its deep connections to the dawn of witchcraft.", developer: "Supergiant Games", publisher: "Supergiant Games", releaseDate: "6 May,2024", comingSoon: true, }, ], } export function EpicStyleSection({ onGameClick }: EpicStyleSectionProps) { const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlistStore() const [showCheckoutModal, setShowCheckoutModal] = useState(false) const [checkoutUrl, setCheckoutUrl] = useState("") const handleWishlistToggle = (game: Game, e: React.MouseEvent) => { e.stopPropagation() if (isInWishlist(game.id)) { removeFromWishlist(game.id) toast.success(`${game.title} removed from wishlist`) } else { addToWishlist(game) toast.success(`${game.title} added to wishlist`) } } const handleBuyNow = (game: Game, e: React.MouseEvent) => { e.stopPropagation() const params = new URLSearchParams({ gameId: game.id.toString(), title: game.title, price: game.price.toString(), image: encodeURIComponent(game.image || ""), }) setCheckoutUrl(`/payment?${params.toString()}`) setShowCheckoutModal(true) } const GameCard = ({ game, showPlayButton = false }: { game: Game; showPlayButton?: boolean }) => { const isWishlisted = isInWishlist(game.id) return (
onGameClick(game)} >

{ e.currentTarget.src = `/placeholder.svg?height=64&width=64&text=${encodeURIComponent(game.title.slice(0, 3))}` }} /> {game.discount && ( -{game.discount}% )}

{game.title}

{showPlayButton && game.isAvailable && ( )} {game.releaseDate || (game.comingSoon ? "Coming Soon" : "Available Now")}

{game.originalPrice ? ( <> ₹{game.price} ₹{game.originalPrice} ) : game.isFree ? ( Free ) : game.comingSoon ? ( ₹{game.price} ) : ( ₹{game.price} )}

{!game.comingSoon && ( )}

) } return (

{/ Top Sellers /}

Top Sellers

{customGames.topSellers.map((game) => ( ))}
{/ Most Played /}

Most Played

{customGames.mostPlayed.map((game) => ( ))}
{/ Top Upcoming Wishlisted /}

Top Upcoming Wishlisted

{customGames.topUpcoming.map((game) => ( ))}

) } [V0_FILE]typescript:file="types/game.ts" isMerged="true" export interface Game { id: number | string title: string description?: string price: number originalPrice?: number image?: string background?: string trailer_url?: string tags?: string[] category: string screenshots?: string[] systemRequirements?: { minimum?: { os?: string processor?: string memory?: string graphics?: string storage?: string } recommended?: { os?: string processor?: string memory?: string graphics?: string storage?: string } } ageRating?: string developer?: string publisher?: string releaseDate?: string features?: string[] rating?: number discount?: number isFree?: boolean isNew?: boolean isTrending?: boolean comingSoon?: boolean availableDate?: string hasPlay?: boolean firstRun?: boolean nowOnEpic?: boolean type?: "base" | "dlc" | "edition" updateInfo?: string trendingRank?: number mobileHeroImage?: string mobilePromoImage?: string mobileImage?: string mobileBanner?: string } [V0_FILE]typescriptreact:file="components/game-section.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Heart } from "lucide-react" import type { Game } from "@/types/game" interface SectionGameCardProps { game: Game onClick: () => void } export function SectionGameCard({ game, onClick }: SectionGameCardProps) { const [isWishlisted, setIsWishlisted] = useState(false) return (
{game.mobileImage && }
{/ Badges /}
{game.isFree && FREE} {game.discount && ( -{game.discount}% )} {game.isNew && NEW} {game.isTrending && ( 🔥 TRENDING )} {game.comingSoon && ( COMING SOON )}
{/ Wishlist button /} {/ Rating /} {game.rating && (
⭐ {game.rating}
)}

{game.title}
{/ Price Display - Prominent below title /}
{game.originalPrice ? (
₹{game.price} ₹{game.originalPrice}
) : game.price === 0 ? ( FREE ) : ( ₹{game.price} )}

{game.tags && (
{game.tags.slice(0, 2).map((tag: string) => ( {tag} ))}
)}
) } interface GameSectionProps { title: string games: Game[] icon: React.ReactNode onGameClick: (game: Game) => void } export function GameSection({ title, games, icon, onGameClick }: GameSectionProps) { if (!games || games.length === 0) { return null } return (

{icon} {title}

{games.map((game) => ( onGameClick(game)} /> ))}

) } [V0_FILE]typescriptreact:file="app/game/[slug]/page.tsx" isMerged="true" "use client" import { useParams, useRouter } from "next/navigation" import { browseGamesWithSlugs } from "@/lib/browse-data" import { allGames, heroGames } from "@/lib/game-data" import Link from "next/link" import { Button } from "@/components/ui/button" import { X } from "lucide-react" import { BrowseGameDetail } from "@/components/browse-game-detail" import { useEffect } from "react" export default function GameDetailPage() { const params = useParams() const router = useRouter() const slug = params.slug as string useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }) }, [slug]) const combinedGames = [...browseGamesWithSlugs, ...allGames, ...heroGames] const game = combinedGames.find((g) => { const standardSlug = g.title .trim() .toLowerCase() .replace(/[^\w\s-]/g, "") .replace(/\s+/g, "-") .replace(/-+/g, "-") const idSlug = `${g.id}-${standardSlug}` return (g as any).slug === slug || standardSlug === slug || idSlug === slug }) const handleClose = () => { router.back() } if (!game) { return (

Game Not Found

) } return (

) } [V0_FILE]typescriptreact:file="components/epic-browse-game-card.tsx" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Heart, ShoppingCart } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import Image from "next/image" import type { BrowseGame } from "@/lib/browse-data" interface EpicBrowseGameCardProps { game: BrowseGame onClick: (game: BrowseGame) => void onAddToCart: (e: React.MouseEvent, game: BrowseGame) => void onToggleWishlist: (e: React.MouseEvent, game: BrowseGame) => void } export function EpicBrowseGameCard({ game, onClick, onAddToCart, onToggleWishlist }: EpicBrowseGameCardProps) { const { isInCart } = useCartStore() const { isInWishlist } = useWishlistStore() const [showActions, setShowActions] = useState(false) const inWishlist = isInWishlist(game.id) const inCart = isInCart(game.id) const handleCardClick = () => { console.log("[v0] Card clicked for game:", game.title, "ID:", game.id) onClick(game) } return (
setShowActions(true)} onMouseLeave={() => setShowActions(false)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { handleCardClick() } }} >

{/ Wishlist and Cart buttons (appear on hover) /}

{/ Card info below image /}
{/ Base Game label /} Base Game {/ Game Title /}
{game.title}
{/ Status badge - First Run, Now On Epic, etc. /} {game.isFirstRun && (
⭐ First Run
)}
{game.isFree || game.price === 0 ? "Free" : `₹${game.price}`}

) } [V0_FILE]typescriptreact:file="app/browse/page.tsx" isMerged="true" "use client" import type React from "react" import { useState, useMemo, useEffect } from "react" import { useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Search, ShoppingCart, Heart, User, Menu, ArrowLeft } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { browseGamesWithSlugs, browseCategoriesMap } from "@/lib/browse-data" import Image from "next/image" import Link from "next/link" import { PromoBanners } from "@/components/promo-banners" import { SkeletonGameGrid, SkeletonSlider } from "@/components/skeleton-loader" import { EpicBrowseGameCard } from "@/components/epic-browse-game-card" import { EpicGameDetailModal } from "@/components/epic-game-detail-modal" export default function BrowsePage() { const [searchQuery, setSearchQuery] = useState("") const [selectedCategory, setSelectedCategory] = useState("all") const [priceRange, setPriceRange] = useState("all") const [sortBy, setSortBy] = useState("name") const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) const [isLoading, setIsLoading] = useState(true) const [currentPage, setCurrentPage] = useState(1) const [selectedGame, setSelectedGame] = useState(null) const [showGameDetail, setShowGameDetail] = useState(false) const GAMES_PER_PAGE = 32 // 4 columns × 8 rows for fixed 4-column layout const searchParams = useSearchParams() const { items: cartItems, getTotalItems, addItem, isInCart } = useCartStore() const { items: wishlistItems, addItem: addToWishlist, removeItem: removeFromWishlist, isInWishlist, } = useWishlistStore() useEffect(() => { const categoryParam = searchParams.get("category") if (categoryParam) { const normalizedParam = categoryParam .toLowerCase() .trim() .replace(/\s+/g, "-") .replace(/[^\w-]/g, "") if (Object.keys(browseCategoriesMap).includes(normalizedParam)) { setSelectedCategory(normalizedParam) } } const timer = setTimeout(() => { setIsLoading(false) }, 1500) return () => clearTimeout(timer) }, [searchParams]) useEffect(() => { setCurrentPage(1) }, [searchQuery, selectedCategory, priceRange, sortBy]) const filteredGames = useMemo(() => { const seenIds = new Set() const uniqueGames = browseGamesWithSlugs.filter((game) => { if (seenIds.has(game.id)) { return false } seenIds.add(game.id) return true }) let filtered = uniqueGames if (searchQuery.trim()) { const q = searchQuery.toLowerCase() filtered = filtered.filter((game) => { const title = (game.title ?? "").toLowerCase() const category = (game.category ?? "").toLowerCase() const description = (game.description ?? "").toLowerCase() const tags = Array.isArray(game.tags) ? game.tags.join(" ").toLowerCase() : "" return title.includes(q) || category.includes(q) || description.includes(q) || tags.includes(q) }) } if (selectedCategory !== "all") { filtered = filtered.filter((game) => game.category === selectedCategory) } if (priceRange !== "all") { filtered = filtered.filter((game) => { const price = game.price switch (priceRange) { case "free": return price === 0 case "under-500": return price > 0 && price < 500 case "500-1000": return price >= 500 && price < 1000 case "1000-2000": return price >= 1000 && price < 2000 case "over-2000": return price >= 2000 default: return true } }) } filtered.sort((a, b) => { switch (sortBy) { case "name": const titleA = (a.title ?? "").toString() const titleB = (b.title ?? "").toString() return titleA.localeCompare(titleB) case "price-low": return a.price - b.price case "price-high": return b.price - a.price case "rating": return (b.rating ?? 0) - (a.rating ?? 0) case "release": return new Date(b.releaseDate).getTime() - new Date(a.releaseDate).getTime() default: return 0 } }) return filtered }, [browseGamesWithSlugs, searchQuery, selectedCategory, priceRange, sortBy]) const totalPages = Math.ceil(filteredGames.length / GAMES_PER_PAGE) const startIndex = (currentPage - 1) GAMES_PER_PAGE const paginatedGames = filteredGames.slice(startIndex, startIndex + GAMES_PER_PAGE) const handleSearch = (e: React.FormEvent) => { e.preventDefault() } const handleGameClick = (game: any) => { console.log("[v0] handleGameClick triggered for:", game.title, "ID:", game.id) setSelectedGame(game) setShowGameDetail(true) console.log("[v0] Modal opened for browse game:", game.title) } const handleAddToCart = (e: React.MouseEvent, game: any) => { e.stopPropagation() addItem({ id: game.id, title: game.title, price: game.price, image: game.image, originalPrice: game.originalPrice, discount: game.discount, quantity: 1, }) } const handleToggleWishlist = (e: React.MouseEvent, game: any) => { e.stopPropagation() if (isInWishlist(game.id)) { removeFromWishlist(game.id) } else { addToWishlist(game) } } return (

WG Store

Discover Browse Free Games News

setSearchQuery(e.target.value)} className="pl-10 bg-white/5 border-white/10 text-white placeholder-gray-400 focus:border-purple-400 focus-visible:ring-purple-400" />

{isMobileMenuOpen && (

setSearchQuery(e.target.value)} className="pl-10 bg-white/5 border-white/10 text-white placeholder-gray-400 focus:border-purple-400" />
Discover Browse Free Games News

)}

Browse Games

Discover your next favorite game from our premium collection

{isLoading ? ( <>

) : ( <>

Showing {paginatedGames.length} of {filteredGames.length} games

{paginatedGames.length > 0 ? ( <>

{paginatedGames.map((game) => (

))}

{totalPages > 1 && (

{Array.from({ length: Math.min(5, totalPages) }).map((_, i) => { let pageNum: number if (totalPages <= 5) { pageNum = i + 1 } else if (currentPage <= 3) { pageNum = i + 1 } else if (currentPage >= totalPages - 2) { pageNum = totalPages - 4 + i } else { pageNum = currentPage - 2 + i } return ( ) })} {totalPages > 5 && ( <> ... )}

)} ) : (

No games found matching your filters.

)} )}
{showGameDetail && selectedGame && ( { setShowGameDetail(false) setSelectedGame(null) }} /> )}
) } [V0_FILE]typescriptreact:file="app/cart/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft, ShoppingCart, Trash2, Plus, Minus, CreditCard } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { toast } from "sonner" import { useRouter } from "next/navigation" export default function CartPage() { const { items, removeFromCart, updateQuantity, clearCart, getTotalPrice, getTotalItems } = useCartStore() const [mounted, setMounted] = useState(false) const router = useRouter() useEffect(() => { setMounted(true) }, []) const handleBackToStore = () => { window.location.href = "/" } const handleCheckout = () => { if (items.length === 0) { toast.error("Your cart is empty") return } try { const cartData = encodeURIComponent(JSON.stringify(items)) router.push(`/payment?cart=${cartData}`) } catch (error) { console.error("Error navigating to payment:", error) toast.error("Failed to proceed to checkout. Please try again.") } } const handleRemoveItem = (gameId: string) => { const item = items.find((item) => item.id === gameId) removeFromCart(gameId) toast.success(`${item?.title} removed from cart`) } const handleUpdateQuantity = (gameId: string, newQuantity: number) => { if (newQuantity < 1) { handleRemoveItem(gameId) return } updateQuantity(gameId, newQuantity) } const handleClearCart = () => { clearCart() toast.success("Cart cleared") } if (!mounted) { return (

Loading...

) } const totalPrice = getTotalPrice() const totalItems = getTotalItems() return (
{/* Header /}

Shopping Cart
({totalItems} items)

{items.length > 0 && ( )}

{items.length === 0 ? (

Your cart is empty

Add some games to get started

) : (
{/ Cart Items /}
{items.map((item) => (

{item.title}

{/ Quantity Controls /}
{item.quantity}
{/ Price /}
{item.is_free ? ( FREE ) : (
₹{item.price item.quantity} {item.quantity > 1 &&
₹{item.price} each
}
)}

))}
{/* Order Summary /}
Order Summary

Items ({totalItems}) ₹{totalPrice}

Taxes ₹0

Shipping FREE

Total ₹{totalPrice}

)}

) } [V0_FILE]typescriptreact:file="app/free-games/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Heart, ShoppingCart, User, Package, Menu, X, Gift, Search } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { toast } from "sonner" import Image from "next/image" // Free games data - Epic Games Store style const freeGames = [ { id: "Wuthering Waves-free", title: "Wuthering Waves", price: 0, originalPrice: 0, discount: 0, rating: 4.2, image: "https://image.api.playstation.com/vulcan/ap/rnd/202511/1307/a9f28b8372ee7d1e860e73d2ff474a0a877b529132c33063.jpg", category: "Base Game", description: "Wuthering Waves is a story-rich open-world action RPG with a high degree of freedom. You wake from your slumber as Rover, joined by a vibrant cast of Resonators on a journey to reclaim your lost memories and change the world.", isFree: true, status: "Free", }, { id: "Red-Dead-Redemption-2", title: "Red Dead Redemption 2", price: 0, originalPrice: 3999, discount: 100, rating: 4.8, image: "https://w0.peakpx.com/wallpaper/702/559/HD-wallpaper-video-game-red-dead-redemption-2-red-dead.jpg", category: "Base Game", description: "Red Dead Redemption 2 is an epic open-world action-adventure set in America’s unforgiving heartland. You play as Arthur Morgan, an outlaw and member of the Van der Linde gang, fighting to survive as lawmen, rival gangs, and the modern world close in.", isFree: false, status: "Premium", }, { id: "warframe-free", title: "Warframe", price: 0, originalPrice: 0, discount: 0, rating: 4.4, image: "https://image.api.playstation.com/vulcan/ap/rnd/202512/1019/6440b44e359b7edd1145b6ada2799dec9be8dcaa2a8998fe.jpg", category: "Base Game", description: "Ninjas play free in this cooperative online action game.", isFree: true, status: "Free", }, { id: "fall-guys-free", title: "Fall Guys", price: 0, originalPrice: 0, discount: 0, rating: 4.1, image: "https://image.api.playstation.com/vulcan/ap/rnd/202309/2603/96eb8b2dd96571b78316f1f0158b3d1ef1625cfa33bfe734.png", category: "Base Game", description: "Stumble through rounds of escalating chaos.", isFree: true, status: "Free", }, { id: "rocket-league-free", title: "Rocket League", price: 0, originalPrice: 0, discount: 0, rating: 4.6, image: "https://m.media-amazon.com/images/M/MV5BMTliNzFlZTktMWM2MC00ZTM0LTkxZmQtZWYzMTRiNThhZDMwXkEyXkFqcGc@._V1_.jpg", category: "Base Game", description: "Soccer meets driving in this physics-based multiplayer game.", isFree: true, status: "Free", }, { id: "dota-2-free", title: "Dota 2", price: 0, originalPrice: 0, discount: 0, rating: 4.4, image: "https://i.pinimg.com/474x/e2/ea/c0/e2eac0854f5b20b532e24c98454faed1.jpg", category: "Base Game", description: "Every day, millions of players worldwide enter battle.", isFree: true, status: "Free", }, { id: "csgo-free", title: "Counter-Strike 2", price: 0, originalPrice: 0, discount: 0, rating: 4.7, image: "https://static0.gamerantimages.com/wordpress/wp-content/uploads/2023/09/counter-strike-2.jpg", category: "Base Game", description: "The next era of Counter-Strike begins with CS2.", isFree: true, status: "Free", }, { id: "apex-legends-free", title: "Apex Legends", price: 0, originalPrice: 0, discount: 0, rating: 4.5, image: "https://w0.peakpx.com/wallpaper/80/777/HD-wallpaper-apex-legends-game-fictional-character-heroes-legend-thumbnail.jpg", category: "Base Game", description: "A battle royale shooter where legendary competitors fight for glory.", isFree: true, status: "Free", }, { id: "pubg-battlegrounds-free", title: "PUBG: Battlegrounds", price: 0, originalPrice: 0, discount: 0, rating: 4.2, image: "https://image.api.playstation.com/vulcan/ap/rnd/202504/1604/fb8c0fd88caf3c887828d8d5b263902343ca58a534a08df2.jpg", category: "Base Game", description: "Drop in, loot, and fight to be the last one standing.", isFree: true, status: "Free", }, { id: "team-fortress-2-free", title: "Team Fortress 2", price: 0, originalPrice: 0, discount: 0, rating: 4.3, image: "https://cdn2.steamgriddb.com/grid/386a060e77ec41813c2e8212f7f8700f.png", category: "Base Game", description: "Nine distinct classes provide a broad range of tactical abilities.", isFree: true, status: "Free", }, { id: "lost-ark-free", title: "Ark Lost Colony", price: 0, originalPrice: 0, discount: 0, rating: 4.0, image: "https://image.api.playstation.com/vulcan/ap/rnd/202506/1116/13b39ac6f3b7e34a6af0235f19256fba9941836f8968c5b2.jpg", category: "Base Game", description: "Embark on an odyssey for the Lost Ark in a vast MMORPG world.", isFree: true, status: "Free", }, { id: "path-of-exile-free", title: "Path of Exile", price: 0, originalPrice: 0, discount: 0, rating: 4.5, image: "https://image.api.playstation.com/vulcan/ap/rnd/202510/2801/a14f2d88567bfc0e1fc02e49411ae83455f182b50b911c1b.jpg", category: "Base Game", description: "A deep, dark fantasy ARPG with massive customization and content.", isFree: true, status: "Free", }, { id: "eve-online-free", title: "EVE Online", price: 0, originalPrice: 0, discount: 0, rating: 4.1, image: "https://web.ccpgamescdn.com/newssystem/media/70784/1/Desktop_1920x1080.jpg", category: "MMO", description: "A staggering sci-fi MMO of politics, warfare, and trade.", isFree: true, status: "Free", }, { id: "scp-secret-lab-free", title: "SCP: Secret Laboratory", price: 0, originalPrice: 0, discount: 0, rating: 4.0, image: "https://image.api.playstation.com/vulcan/ap/rnd/202508/0712/f47ba85afdeafdba85d43e9c205c0aae8b97065d2b854ff7.jpg", category: "Horror", description: "A tense, multiplayer horror survival game.", isFree: true, status: "Free", }, { id: "crusader-kings-ii-free", title: "Crusader Kings II", price: 0, originalPrice: 0, discount: 0, rating: 4.3, image: "https://m.media-amazon.com/images/M/MV5BMWE5NTU0ZjMtMmUyZC00NzBkLWFhM2MtYTQwZmNhZjIzNTdiXkEyXkFqcGc@._V1_.jpg", category: "Strategy", description: "Grand strategy and dynastic intrigue in medieval times.", isFree: true, status: "Free", }, { id: "marvel-snap-free", title: "Marvel Snap", price: 0, originalPrice: 0, discount: 0, rating: 4.2, image: "https://i.pinimg.com/564x/37/4c/7e/374c7e84ba3daeed8364052345587121.jpg", category: "Card Game", description: "Fast-paced Marvel-themed card battler.", isFree: true, status: "Free", }, { id: "the-sims-4-free", title: "The Sims 4 (Base)", price: 0, originalPrice: 0, discount: 0, rating: 4.1, image: "https://store-images.s-microsoft.com/image/apps.53697.64737940845214615.82a9a5cd-32c5-4fb1-a951-2a7b976ad460.f0e0779f-450f-421f-b0c6-7b04bf25fa60", category: "Simulation", description: "Create and control people in this life simulation classic.", isFree: true, status: "Free", }, { id: "overwatch-2-free", title: "Overwatch 2", price: 0, originalPrice: 0, discount: 0, rating: 4.0, image: "https://m.media-amazon.com/images/M/MV5BOGMxODVmNDgtZGE1Yy00Y2VlLTk3ZTMtYzU5YTcxODhiNzMxXkEyXkFqcGc@._V1_.jpg", category: "Shooter", description: "Team-based shooter with new heroes and constant updates.", isFree: true, status: "Free", }, { id: "the-finals-free", title: "The Finals", price: 0, originalPrice: 0, discount: 0, rating: 4.2, image: "https://store-images.s-microsoft.com/image/apps.25160.14187080498030026.4b08d358-86fd-4fb3-8e08-650a7c673a2b.a3ff4941-2a18-4d35-91f9-dc1b6974b5d7", category: "Shooter", description: "A fresh, free-to-play multiplayer shooter with destructible environments.", isFree: true, status: "Free", }, ] export default function FreeGamesPage() { const [showMobileMenu, setShowMobileMenu] = useState(false) const [searchQuery, setSearchQuery] = useState("") const { getTotalItems: getCartItems } = useCartStore() const { items: wishlistItems, addItem: addToWishlist, removeItem: removeFromWishlist } = useWishlistStore() const handleGetFree = (game: any) => { const gameParams = new URLSearchParams({ gameId: game.id, title: game.title, price: "0", image: encodeURIComponent(game.image), isFree: "true", }) window.location.href = `/payment?${gameParams.toString()}` } const handleWishlistToggle = (game: any) => { const isInWishlist = wishlistItems.some((item) => item.id === game.id) if (isInWishlist) { removeFromWishlist(game.id) toast.success(`${game.title} removed from wishlist`) } else { addToWishlist({ id: game.id, title: game.title, price: game.price, image: game.image, }) toast.success(`${game.title} added to wishlist!`) } } const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchQuery.trim()) { window.location.href = `/browse?search=${encodeURIComponent(searchQuery.trim())}` } } const mobileMenuItems = [ { icon: Heart, label: "Wishlist", action: () => { window.location.href = "/wishlist" setShowMobileMenu(false) }, }, { icon: ShoppingCart, label: "Cart", action: () => { window.location.href = "/cart" setShowMobileMenu(false) }, }, { icon: Package, label: "Track Orders", action: () => { window.location.href = "/?track=true" setShowMobileMenu(false) }, }, { icon: User, label: "Game Code", action: () => { window.open("https://v0-wizard-games-store-design-silk.vercel.app/", "_blank") setShowMobileMenu(false) }, }, ] return (
{/ Header /}

Wizard Game Store WG Store
{/ Desktop Navigation /}

{/ Mobile Menu Button /}
{/ Mobile Menu /} {showMobileMenu && (
{mobileMenuItems.map((item, index) => ( ))}
)} {/ Navigation and Search /}

Discover Browse Free Games News
{/ Search Bar /}

setSearchQuery(e.target.value)} className="pl-10 bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:border-blue-500 w-full" />

{/ Epic Games Store Style Small Grid /}
{freeGames.map((game) => ( handleGetFree(game)} >
{/ Game Image - Small compact size /}

{/ Category Badge - Smaller /}
{game.category}
{/ Wishlist Button - Smaller /}
{/ Game Title - Smaller text /}
{game.title}
{/ Price - Smaller /}
{game.status}
))}
{/ Info Section /}

How Free Games Work

1

Request Game

Click on any game card and submit your request with optional comments.

2

Admin Approval

Our team reviews your request and approves eligible requests.

3

Game Delivery

Receive your Steam code and enjoy your free game!

{/ Footer /}

© {new Date().getFullYear()} Wizard Game Store. Bringing magic to modern game shopping.

instagram WizardGameStore

) } [V0_FILE]typescriptreact:file="app/news/accounts/[provider]/page.tsx" isMerged="true" "use client" import type React from "react" import { useMemo, useState, useEffect } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { accountsService } from "@/lib/supabase" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { ArrowLeft, Copy, ExternalLink, Gamepad2, Shield, Sparkles, User } from "lucide-react" type ProviderPageProps = { params: { provider: string } } const ROCKSTAR_GAMES = ["GTA 5", "GTA 4", "RDR1", "RDR2"] function getOrSetTempId(): string { try { const key = "wg_guest_temp_id" let id = localStorage.getItem(key) if (!id) { id = `guest_${Math.random().toString(36).slice(2, 10)}_${Date.now().toString(36)}` localStorage.setItem(key, id) } return id } catch { return `guest_${Date.now()}` } } export default function ProviderFormPage({ params }: ProviderPageProps) { const router = useRouter() const provider = (params.provider || "").toLowerCase() // Form state const [name, setName] = useState("") const [game, setGame] = useState(null) // used only for rockstar const [trackingIdInput, setTrackingIdInput] = useState("") const [submitting, setSubmitting] = useState(false) const [resultId, setResultId] = useState(null) const [errorMsg, setErrorMsg] = useState(null) useEffect(() => { // reset per provider setResultId(null) setErrorMsg(null) setGame(null) setTrackingIdInput("") }, [provider]) // Provider metadata for premium accents const meta = useMemo(() => { switch (provider) { case "ea": return { title: "EA Account", sub: "Submit your details. You’ll receive or reuse your Tracking ID.", accentGradient: "from-red-500 to-orange-500", ring: "ring-red-400/30", } case "ubisoft": return { title: "Ubisoft Account", sub: "Submit your details. You’ll receive or reuse your Tracking ID.", accentGradient: "from-indigo-500 to-violet-600", ring: "ring-indigo-400/30", } default: return { title: "Rockstar Account", sub: "Choose your game and submit. We’ll generate or reuse your Tracking ID.", accentGradient: "from-rose-500 to-amber-500", ring: "ring-rose-400/30", } } }, [provider]) async function onSubmit(e: React.FormEvent) { e.preventDefault() setSubmitting(true) setErrorMsg(null) try { const tempId = getOrSetTempId() const { trackingId } = await accountsService.submitOrUpdateAccountRequest({ provider, name: name || null, // optional gameTitle: provider === "rockstar" ? game || null : null, // only for rockstar trackingId: trackingIdInput || null, // reuse if provided tempId, }) setResultId(trackingId) } catch (err: any) { const msg = typeof err?.message === "string" ? err.message : "We couldn't submit your request right now. Please try again." setErrorMsg(msg) } finally { setSubmitting(false) } } async function copyId() { if (!resultId) return try { await navigator.clipboard.writeText(resultId) } catch { // ignore } } const showGameSelect = provider === "rockstar" return (
{/ Premium background: subtle radial + grid overlay /}

{meta.title} Request

{meta.sub}

{/ Premium glass card /} {meta.title} Provide your details below to create or update your request.
{/ Name (optional) /}
Name (optional) setName(e.target.value)} placeholder="Enter your name" className="border-white/10 bg-neutral-900/70 text-white placeholder:text-neutral-500" />
{/ Game selector ONLY for Rockstar /} {showGameSelect && (
Choose Game
)} {/ Tracking ID (optional, reuse) /}
Tracking ID (optional) setTrackingIdInput(e.target.value.trim())} placeholder="Paste existing Tracking ID (e.g., WZ-12345) or leave blank" className="border-white/10 bg-neutral-900/70 text-white placeholder:text-neutral-500" />
{/ Error /} {errorMsg && (
{errorMsg}
)} {/ Submit /} {/ Result /} {resultId && (

Your Tracking ID

{resultId}

Or save this link:{" "} /news/track?tid={encodeURIComponent(resultId)}

)}

) } [V0_FILE]typescriptreact:file="app/support/track/page.tsx" isMerged="true" "use client" // This page is redirected from app/news/track/page.tsx // Same content, just new route import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Search, Clock, CheckCircle, AlertCircle } from "lucide-react" import { accountsService, type AccountSubmission } from "@/lib/supabase" export default function TrackPage() { const [trackingId, setTrackingId] = useState("") const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [submission, setSubmission] = useState(null) const handleSearch = async () => { if (!trackingId.trim()) { setError("Please enter a tracking ID") return } setLoading(true) setError(null) setSubmission(null) try { const result = await accountsService.getSubmissionByTrackingId(trackingId.trim()) if (!result) { setError("No submission found with this tracking ID") return } setSubmission(result) } catch (err) { console.error("Error searching:", err) setError("An error occurred while searching. Please try again.") } finally { setLoading(false) } } const getStatusColor = (status: string) => { switch (status?.toLowerCase()) { case "completed": return "bg-green-600" case "approved": return "bg-blue-600" case "pending": return "bg-yellow-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getStatusIcon = (status: string) => { switch (status?.toLowerCase()) { case "completed": case "approved": return case "rejected": return case "pending": return default: return } } return (
{/ Header /}

Track Your Support Request

{/ Search Card /} Track Your Support Request
setTrackingId(e.target.value)} className="bg-gray-700 border-gray-600 text-white flex-1" onKeyDown={(e) => { if (e.key === "Enter") handleSearch() }} />
{error && (

{error}

)} {/ Results /} {submission && (
Request Details {submission.status?.toUpperCase()}
{/ Status Timeline /}

{getStatusIcon(submission.status)}

{submission.status?.toUpperCase()}

{submission.status?.toLowerCase() === "completed" ? "Your request has been completed" : submission.status?.toLowerCase() === "approved" ? "Your request is approved and being processed" : submission.status?.toLowerCase() === "pending" ? "Your request is pending review" : "Your request was rejected"}

{/ Details /}

Tracking ID

{submission.tracking_id}

Provider

{submission.provider === "rockstar" ? "Rockstar" : submission.provider === "ea" ? "EA" : submission.provider === "ubisoft" ? "Ubisoft" : submission.provider}

{/ Message /}

Your Request

{submission.message}

{/ Timestamps /}

Submitted

{new Date(submission.created_at).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })}

Last Updated

{new Date(submission.updated_at || submission.created_at).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })}

{/ Credentials Section - Only show when completed /} {submission.status?.toLowerCase() === "completed" && (

Your Account Credentials

Account ID / Username

{submission.account_id}

Password

{submission.account_password}

)} {submission.status?.toLowerCase() === "completed" && submission.platform && (

Platform Account Credentials

Platform

{submission.provider === "rockstar" ? "Rockstar" : submission.provider === "ea" ? "EA" : submission.provider === "ubisoft" ? "Ubisoft" : submission.provider}

Platform Username / ID

{submission.account_id}

Platform Password

{submission.account_password}

Important: Use these credentials to log into{" "} {submission.provider === "rockstar" ? "Rockstar" : submission.provider === "ea" ? "EA" : submission.provider === "ubisoft" ? "Ubisoft" : submission.provider}{" "} and access your account. Keep these details safe and don't share them with anyone.

)} {/ Help Text /}

💡 Tip: Save your credentials in a secure location. Once you access your account, change the password immediately for security.

)} {/ Empty State /} {!submission && !error && (
Enter your tracking ID above to view your support request status
)}

{/ Footer /}

© {new Date().getFullYear()} Wizard Games Store. Your trusted gaming destination.

) } [V0_FILE]typescriptreact:file="app/wishlist/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Heart, ShoppingCart, Trash2, Star } from "lucide-react" import { useWishlistStore } from "@/lib/wishlist-store" import { useCartStore } from "@/lib/cart-store" import { toast } from "sonner" export default function WishlistPage() { const { items, removeItem, clearWishlist } = useWishlistStore() const { addToCart, getTotalItems } = useCartStore() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) const handleBackToStore = () => { window.location.href = "/" } const handleAddToCart = (item: any) => { addToCart({ id: item.id, title: item.title, price: item.price, image: item.image, originalPrice: item.originalPrice, discount: item.discount, quantity: 1, }) const updatedTotal = getTotalItems() toast.success(`${item.title} added to cart!`, { description: `Cart now has ${updatedTotal} item(s)`, }) } const handleRemoveFromWishlist = (gameId: string) => { const item = items.find((item) => item.id === gameId) removeItem(gameId) toast.success(`${item?.title} removed from wishlist`) } const handleClearWishlist = () => { clearWishlist() toast.success("Wishlist cleared") } if (!mounted) { return (

Loading...

) } return (
{/ Header /}

My Wishlist
({items.length} items)

{items.length > 0 && ( )}

{items.length === 0 ? (

Your wishlist is empty

Add games you're interested in to keep track of them

) : (

{items.map((game) => (

{game.title}
{game.rating && (
{game.rating}/5
)}
{game.is_free ? ( FREE ) : (
{game.discount && game.discount > 0 ? ( <> ₹{game.price} ₹{game.original_price} ) : ( ₹{game.price} )}
)}

))}

)}

) } [V0_FILE]sql:file="scripts/create-redeem-requests-table.sql" isMerged="true" -- Create redeem_requests table for managing redeem code requests CREATE TABLE IF NOT EXISTS public.redeem_requests ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, redeem_code TEXT NOT NULL UNIQUE, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected')), request_date TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), approved_at TIMESTAMP WITH TIME ZONE, approved_by UUID REFERENCES auth.users(id) ON DELETE SET NULL, tokens_amount INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_redeem_requests_user_id ON public.redeem_requests(user_id); CREATE INDEX IF NOT EXISTS idx_redeem_requests_status ON public.redeem_requests(status); CREATE INDEX IF NOT EXISTS idx_redeem_requests_redeem_code ON public.redeem_requests(redeem_code); CREATE INDEX IF NOT EXISTS idx_redeem_requests_created_at ON public.redeem_requests(created_at DESC); -- Enable Row Level Security (RLS) ALTER TABLE public.redeem_requests ENABLE ROW LEVEL SECURITY; -- RLS Policy: Users can see their own redeem requests CREATE POLICY "Users can view their own redeem requests" ON public.redeem_requests FOR SELECT USING (auth.uid() = user_id OR auth.jwt() ->> 'role' = 'authenticated'); -- RLS Policy: Users can create redeem requests CREATE POLICY "Users can create redeem requests" ON public.redeem_requests FOR INSERT WITH CHECK (auth.uid() = user_id); -- RLS Policy: Admin can update redeem requests CREATE POLICY "Admin can update redeem requests" ON public.redeem_requests FOR UPDATE USING (true) WITH CHECK (true); -- Enable real-time for the redeem_requests table ALTER PUBLICATION supabase_realtime ADD TABLE public.redeem_requests; -- Add wizard_tokens column to auth.users (store user's wizard token balance) -- Note: This uses user_metadata instead since we can't directly modify auth.users -- We'll use a separate profile table approach or store in user_metadata [V0_FILE]sql:file="scripts/create-user-wallets-table.sql" isMerged="true" -- Create user_wallets table to track wizard tokens per user CREATE TABLE IF NOT EXISTS public.user_wallets ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID NOT NULL UNIQUE REFERENCES auth.users(id) ON DELETE CASCADE, wizard_tokens INTEGER DEFAULT 0, total_tokens_earned INTEGER DEFAULT 0, total_tokens_spent INTEGER DEFAULT 0, updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for user lookups CREATE INDEX IF NOT EXISTS idx_user_wallets_user_id ON public.user_wallets(user_id); -- Enable Row Level Security (RLS) ALTER TABLE public.user_wallets ENABLE ROW LEVEL SECURITY; -- RLS Policy: Users can view their own wallet CREATE POLICY "Users can view their own wallet" ON public.user_wallets FOR SELECT USING (auth.uid() = user_id); -- RLS Policy: Authenticated users can update their own wallet CREATE POLICY "System can update wallets" ON public.user_wallets FOR UPDATE USING (true) WITH CHECK (true); -- Enable real-time ALTER PUBLICATION supabase_realtime ADD TABLE public.user_wallets; [V0_FILE]typescriptreact:file="app/redeem/loading.tsx" isMerged="true" export default function RedeemLoading() { return (

Loading redeem code page...

) } [V0_FILE]typescript:file="app/api/redeem/approve/route.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { const cookieStore = await cookies() const body = await request.json() const { userId, tokensAmount } = body const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, // Admin key bypasses RLS { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) try { // Get existing wallet const { data: existingWallet, error: walletFetchError } = await supabase .from("user_wallets") .select("") .eq("user_id", userId) .single() if (walletFetchError && (walletFetchError as any).code !== "PGRST116") { throw walletFetchError } if (existingWallet) { const { error: walletUpdateError } = await supabase .from("user_wallets") .update({ wizard_tokens: existingWallet.wizard_tokens + tokensAmount, total_tokens_earned: existingWallet.total_tokens_earned + tokensAmount, updated_at: new Date().toISOString(), }) .eq("user_id", userId) if (walletUpdateError) throw walletUpdateError } else { const { error: walletCreateError } = await supabase.from("user_wallets").insert([ { user_id: userId, wizard_tokens: tokensAmount, total_tokens_earned: tokensAmount, total_tokens_spent: 0, }, ]) if (walletCreateError) throw walletCreateError } return NextResponse.json({ success: true }) } catch (error: any) { console.error("Wallet update error:", error) return NextResponse.json({ error: error.message }, { status: 500 }) } } [V0_FILE]typescript:file="app/actions/redeem.ts" isMerged="true" "use server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function approveRedeemRequestAction(requestId: string, tokensAmount: number) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }) try { // Get the redeem request const { data: request, error: fetchError } = await supabase .from("redeem_requests") .select("user_id") .eq("id", requestId) .single() if (fetchError) throw fetchError if (!request) throw new Error("Redeem request not found") const userId = request.user_id const { error: updateError } = await supabase .from("redeem_requests") .update({ status: "approved", approved_at: new Date().toISOString(), tokens_amount: tokensAmount, updated_at: new Date().toISOString(), }) .eq("id", requestId) if (updateError) throw updateError const { data: existingWallet, error: walletFetchError } = await supabase .from("user_wallets") .select("*") .eq("user_id", userId) .single() if (walletFetchError && (walletFetchError as any).code !== "PGRST116") { throw walletFetchError } if (existingWallet) { const { error: walletUpdateError } = await supabase .from("user_wallets") .update({ wizard_tokens: existingWallet.wizard_tokens + tokensAmount, total_tokens_earned: existingWallet.total_tokens_earned + tokensAmount, updated_at: new Date().toISOString(), }) .eq("user_id", userId) if (walletUpdateError) throw walletUpdateError } else { const { error: walletCreateError } = await supabase.from("user_wallets").insert([ { user_id: userId, wizard_tokens: tokensAmount, total_tokens_earned: tokensAmount, total_tokens_spent: 0, }, ]) if (walletCreateError) throw walletCreateError } return { success: true } } catch (error: any) { console.error("Approve redeem request error:", error) throw error } } export async function rejectRedeemRequestAction(requestId: string) { const cookieStore = await cookies() const supabase = createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }) try { const { error } = await supabase .from("redeem_requests") .update({ status: "rejected", updated_at: new Date().toISOString(), }) .eq("id", requestId) if (error) throw error return { success: true } } catch (error: any) { console.error("Reject redeem request error:", error) throw error } } [V0_FILE]sql:file="scripts/create-user-audit-logs-table.sql" isMerged="true" -- Create user_audit_logs table for tracking token adjustments and admin actions CREATE TABLE IF NOT EXISTS public.user_audit_logs ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, admin_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE SET NULL, action_type TEXT NOT NULL CHECK (action_type IN ('TOKEN_ADJUSTMENT', 'SUPPORT_NOTE', 'ACCOUNT_STATUS')), description TEXT NOT NULL, token_change INTEGER, previous_balance INTEGER, new_balance INTEGER, note TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes CREATE INDEX IF NOT EXISTS idx_user_audit_logs_user_id ON public.user_audit_logs(user_id); CREATE INDEX IF NOT EXISTS idx_user_audit_logs_admin_id ON public.user_audit_logs(admin_id); CREATE INDEX IF NOT EXISTS idx_user_audit_logs_created_at ON public.user_audit_logs(created_at DESC); -- Enable RLS ALTER TABLE public.user_audit_logs ENABLE ROW LEVEL SECURITY; -- RLS Policy: Admins can view all logs (handled via service role in API) CREATE POLICY "Admins can view audit logs" ON public.user_audit_logs FOR SELECT USING (true); -- Enable real-time ALTER PUBLICATION supabase_realtime ADD TABLE public.user_audit_logs; [V0_FILE]sql:file="scripts/add-tokens-processed-to-orders.sql" isMerged="true" -- Add tokens_processed flag to orders table ALTER TABLE orders ADD COLUMN IF NOT EXISTS tokens_processed BOOLEAN DEFAULT false; -- Create index for quick lookups CREATE INDEX IF NOT EXISTS idx_orders_tokens_processed ON orders(tokens_processed) WHERE tokens_processed = false; [V0_FILE]sql:file="scripts/add-user-id-to-orders.sql" isMerged="true" -- Add user_id column to orders table to link orders to authenticated users ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id) ON DELETE SET NULL; -- Create index for user_id for faster queries CREATE INDEX IF NOT EXISTS idx_orders_user_id ON orders(user_id); -- Add user_email and user_name columns for display purposes ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_email TEXT; ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_name TEXT; [V0_FILE]sql:file="scripts/create-user-logins-table.sql" isMerged="true" -- Create user_logins table to track all user login/signup events persistently -- This table stores every successful login, not just current sessions CREATE TABLE IF NOT EXISTS user_logins ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE, email TEXT NOT NULL, logged_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create index for fast lookups by user_id CREATE INDEX IF NOT EXISTS idx_user_logins_user_id ON user_logins(user_id); -- Create index for fast lookups by email CREATE INDEX IF NOT EXISTS idx_user_logins_email ON user_logins(email); -- Create index for sorting by logged_at CREATE INDEX IF NOT EXISTS idx_user_logins_logged_at ON user_logins(logged_at DESC); -- Enable Row Level Security ALTER TABLE user_logins ENABLE ROW LEVEL SECURITY; -- Create policy to allow service role to access all records CREATE POLICY "Service role can manage user_logins" ON user_logins FOR ALL TO service_role USING (true) WITH CHECK (true); -- Create policy to allow authenticated users to insert their own login records CREATE POLICY "Users can insert their own login records" ON user_logins FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id); -- Create policy to allow authenticated users to view their own login records CREATE POLICY "Users can view their own login records" ON user_logins FOR SELECT TO authenticated USING (auth.uid() = user_id); [V0_FILE]typescript:file="utils/date-utils.ts" isMerged="true" /** * Formats a date string into a readable format: MMM DD, YYYY */ export function formatDate(dateString: string | Date | null | undefined): string { if (!dateString) return "Never" const date = new Date(dateString) if (isNaN(date.getTime())) return "Invalid Date" return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", }).format(date) } /** * Returns a human-readable relative time string (e.g., "2 hours ago") / export function getTimeSince(dateString: string | Date | null | undefined): string { if (!dateString) return "" const date = new Date(dateString) if (isNaN(date.getTime())) return "" const now = new Date() const seconds = Math.floor((now.getTime() - date.getTime()) / 1000) if (seconds < 60) return "Just now" const minutes = Math.floor(seconds / 60) if (minutes < 60) return `${minutes}m ago` const hours = Math.floor(minutes / 60) if (hours < 24) return `${hours}h ago` const days = Math.floor(hours / 24) if (days < 30) return `${days}d ago` const months = Math.floor(days / 30) if (months < 12) return `${months}mo ago` const years = Math.floor(months / 12) return `${years}y ago` } [V0_FILE]sql:file="scripts/create-token-rpc-functions.sql" isMerged="true" -- Atomic RPC functions for token wallet operations -- These functions ensure thread-safe token updates using database-level atomic operations -- Function to atomically deduct tokens from a user's wallet CREATE OR REPLACE FUNCTION deduct_tokens_atomic(target_user_id UUID, amount_to_deduct INTEGER) RETURNS INTEGER LANGUAGE plpgsql SECURITY DEFINER AS $$ DECLARE new_balance INTEGER; BEGIN UPDATE public.user_wallets SET wizard_tokens = GREATEST(0, wizard_tokens - amount_to_deduct), total_tokens_spent = total_tokens_spent + amount_to_deduct, updated_at = NOW() WHERE user_id = target_user_id RETURNING wizard_tokens INTO new_balance; RETURN new_balance; END; $$; -- Function to atomically add tokens to a user's wallet CREATE OR REPLACE FUNCTION add_tokens_atomic(target_user_id UUID, amount_to_add INTEGER) RETURNS INTEGER LANGUAGE plpgsql SECURITY DEFINER AS $$ DECLARE new_balance INTEGER; BEGIN UPDATE public.user_wallets SET wizard_tokens = wizard_tokens + amount_to_add, total_tokens_earned = total_tokens_earned + amount_to_add, updated_at = NOW() WHERE user_id = target_user_id RETURNING wizard_tokens INTO new_balance; RETURN new_balance; END; $$; -- Grant execute permissions to authenticated users and service role GRANT EXECUTE ON FUNCTION deduct_tokens_atomic(UUID, INTEGER) TO authenticated, service_role; GRANT EXECUTE ON FUNCTION add_tokens_atomic(UUID, INTEGER) TO authenticated, service_role; [V0_FILE]typescriptreact:file="app/loading.tsx" isMerged="true" export default function Loading() { return (

Loading Wizard Games Store...

) } [V0_FILE]typescriptreact:file="components/minimal-game-card.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { Game } from "@/types/game" interface MinimalGameCardProps { game: Game label?: string badgeText?: string badgeColor?: string } export function MinimalGameCard({ game, label = "Wizard's Pick", badgeText, badgeColor = "bg-blue-600", }: MinimalGameCardProps) { const gameSlug = game.id ? `${game.id}-${game.title.toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : game.title.toLowerCase().replace(/[^a-z0-9]+/g, "-") return (

{game.mobileImage && } {badgeText && ( {badgeText} )}

{label}
{/ Game Title /}
{game.title}
{/ Price and Add Button Row /}

{game.isFree || game.price === 0 ? "FREE" : `₹${game.price}`}

) } [V0_FILE]typescriptreact:file="components/checkout-loading-modal.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import Image from "next/image" interface CheckoutLoadingModalProps { isOpen: boolean onOpenChange: (open: boolean) => void redirectUrl: string } export function CheckoutLoadingModal({ isOpen, onOpenChange, redirectUrl }: CheckoutLoadingModalProps) { const router = useRouter() useEffect(() => { if (isOpen) { const timer = setTimeout(() => { onOpenChange(false) router.push(redirectUrl) }, 2000) return () => clearTimeout(timer) } }, [isOpen, redirectUrl, router, onOpenChange]) if (!isOpen) return null return (

Loading your order...

) } [V0_FILE]sql:file="scripts/create-reviews-table.sql" isMerged="true" -- Create reviews table for persistent community feedback CREATE TABLE IF NOT EXISTS reviews ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, game_id UUID REFERENCES games(id) ON DELETE CASCADE, game_title TEXT NOT NULL, user_id UUID REFERENCES auth.users(id) ON DELETE SET NULL, user_name TEXT NOT NULL, rating INTEGER CHECK (rating >= 1 AND rating <= 5), comment TEXT NOT NULL, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected')), helpful_count INTEGER DEFAULT 0, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for performance CREATE INDEX IF NOT EXISTS idx_reviews_game_id ON reviews(game_id); CREATE INDEX IF NOT EXISTS idx_reviews_status ON reviews(status); CREATE INDEX IF NOT EXISTS idx_reviews_created_at ON reviews(created_at DESC); -- Enable RLS ALTER TABLE reviews ENABLE ROW LEVEL SECURITY; -- Policies CREATE POLICY "Enable read access for approved reviews" ON reviews FOR SELECT USING (status = 'approved'); CREATE POLICY "Enable insert for authenticated users" ON reviews FOR INSERT WITH CHECK (auth.uid() = user_id OR user_id IS NULL); -- Enable realtime ALTER PUBLICATION supabase_realtime ADD TABLE reviews; [V0_FILE]sql:file="scripts/create-orders-table-v2.sql" isMerged="true" -- Added missing columns is_free, customer_name, user_id, user_email, user_name, and additional_comments -- Create orders table in Supabase CREATE TABLE IF NOT EXISTS orders ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, tracking_id TEXT UNIQUE NOT NULL, amount INTEGER NOT NULL, items JSONB NOT NULL DEFAULT '[]', payment_screenshot TEXT, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'approved', 'rejected')), payment_status TEXT DEFAULT 'pending' CHECK (payment_status IN ('pending', 'paid', 'refunded')), customer_ip TEXT, customer_name TEXT, payment_method TEXT DEFAULT 'UPI', additional_comments TEXT, user_id UUID, user_email TEXT, user_name TEXT, is_free BOOLEAN DEFAULT FALSE, steam_username TEXT, steam_password TEXT, steam_code TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); [V0_FILE]sql:file="scripts/update-orders-table-v7.sql" isMerged="true" -- Migration to add missing columns for free game requests and user identification -- This script adds the columns: is_free, user_id, user_email, and user_name -- Added missing columns for free game requests and user details ALTER TABLE orders ADD COLUMN IF NOT EXISTS is_free BOOLEAN DEFAULT FALSE, ADD COLUMN IF NOT EXISTS user_id UUID, ADD COLUMN IF NOT EXISTS user_email TEXT, ADD COLUMN IF NOT EXISTS user_name TEXT; -- Added indexes for the new user-related columns to optimize lookups CREATE INDEX IF NOT EXISTS idx_orders_user_id ON orders(user_id); CREATE INDEX IF NOT EXISTS idx_orders_user_email ON orders(user_email); CREATE INDEX IF NOT EXISTS idx_orders_is_free ON orders(is_free) WHERE is_free = TRUE; -- Updated schema comments to document the new columns COMMENT ON COLUMN orders.is_free IS 'Flag indicating if the order is a free game request'; COMMENT ON COLUMN orders.user_id IS 'Supabase Auth user ID associated with the order'; COMMENT ON COLUMN orders.user_email IS 'Email address of the user who placed the order'; COMMENT ON COLUMN orders.user_name IS 'Display name or username of the user who placed the order'; -- Log the schema update INSERT INTO admin_logs (action, details, created_at) VALUES ('schema_update', 'Added is_free and user identification columns to orders table (v7)', NOW()) ON CONFLICT DO NOTHING; [V0_FILE]sql:file="scripts/update-orders-table-v8.sql" isMerged="true" -- adding all missing columns required by the payment page ALTER TABLE orders ADD COLUMN IF NOT EXISTS is_free boolean DEFAULT false; ALTER TABLE orders ADD COLUMN IF NOT EXISTS customer_name text; ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_id uuid; ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_email text; ALTER TABLE orders ADD COLUMN IF NOT EXISTS user_name text; ALTER TABLE orders ADD COLUMN IF NOT EXISTS additional_comments text; -- Add indexes for common queries CREATE INDEX IF NOT EXISTS idx_orders_user_id ON orders(user_id); CREATE INDEX IF NOT EXISTS idx_orders_is_free ON orders(is_free); [V0_FILE]sql:file="scripts/create-library-code-requests-table.sql" isMerged="true" -- Create library_code_requests table for tracking game code requests from library CREATE TABLE IF NOT EXISTS library_code_requests ( id UUID DEFAULT gen_random_uuid() PRIMARY KEY, library_id UUID NOT NULL REFERENCES library(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, game_id TEXT NOT NULL, game_title TEXT NOT NULL, customer_email TEXT NOT NULL, status TEXT DEFAULT 'pending' CHECK (status IN ('pending', 'delivered', 'cancelled')), game_code TEXT, created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(), UNIQUE(library_id) -- One request per library game ); -- Enable Row Level Security ALTER TABLE library_code_requests ENABLE ROW LEVEL SECURITY; -- Create policies for RLS CREATE POLICY "Users can view their own code requests" ON library_code_requests FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own code requests" ON library_code_requests FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Admins can view all code requests" ON library_code_requests FOR SELECT USING (true); CREATE POLICY "Admins can update code requests" ON library_code_requests FOR UPDATE USING (true); -- Create indexes for better performance CREATE INDEX IF NOT EXISTS idx_library_code_requests_library_id ON library_code_requests(library_id); CREATE INDEX IF NOT EXISTS idx_library_code_requests_user_id ON library_code_requests(user_id); CREATE INDEX IF NOT EXISTS idx_library_code_requests_status ON library_code_requests(status); CREATE INDEX IF NOT EXISTS idx_library_code_requests_created_at ON library_code_requests(created_at DESC); -- Create updated_at trigger CREATE OR REPLACE FUNCTION update_library_code_requests_updated_at() RETURNS TRIGGER AS $$ BEGIN NEW.updated_at = NOW(); RETURN NEW; END; $$ language 'plpgsql'; CREATE TRIGGER update_library_code_requests_updated_at BEFORE UPDATE ON library_code_requests FOR EACH ROW EXECUTE FUNCTION update_library_code_requests_updated_at(); -- Enable real-time for the library_code_requests table ALTER PUBLICATION supabase_realtime ADD TABLE library_code_requests; [V0_FILE]typescriptreact:file="components/browse-game-detail.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { X, Star, ChevronLeft, ChevronRight, Calendar, User, Building, MessageSquare, Gamepad2 } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { allGames } from "@/lib/game-data" import { toast } from "sonner" import { GameDetailSkeleton } from "@/components/game-detail-skeleton" import type { Game } from "@/types/game" import type { BrowseGame } from "@/lib/browse-data" import { WizardGamesFooter } from "@/components/wizard-games-footer" import { CheckoutLoadingModal } from "@/components/checkout-loading-modal" import { supabase, userWalletService } from "@/lib/supabase" interface BrowseGameDetailProps { game: Game | BrowseGame onClose: () => void onGameChange?: (game: Game | BrowseGame) => void isLoading?: boolean } interface Review { id: number reviewer: string rating: number hours: number helpful: number notHelpful: number date: string text: string avatar: string userHelpful?: boolean } const fakeReviews: Review[] = [ { id: 1, reviewer: "ShadowHunter92", rating: 5, hours: 45, helpful: 234, notHelpful: 12, date: "2 weeks ago", text: "Absolutely incredible game! The combat system is fluid and engaging. The story kept me hooked throughout. Highly recommend!", avatar: "🎮", }, { id: 2, reviewer: "CrimsonBlade", rating: 4, hours: 38, helpful: 189, notHelpful: 8, date: "3 weeks ago", text: "Really enjoyed this one. Some minor performance issues but overall a solid experience. Worth the purchase.", avatar: "⚔️", }, { id: 3, reviewer: "PhantomNight", rating: 5, hours: 67, helpful: 456, notHelpful: 18, date: "1 month ago", text: "Best game I've played this year. The graphics are stunning, gameplay is smooth, and the story is engaging from start to finish.", avatar: "👻", }, { id: 4, reviewer: "IceWolf23", rating: 4, hours: 32, helpful: 123, notHelpful: 5, date: "1 month ago", text: "Great game overall. Takes about 40 hours to complete. A bit short on content but the quality is outstanding.", avatar: "❄️", }, { id: 5, reviewer: "PhantomNinja", avatar: "🥷", rating: 5, hours: 120, text: "This game is an absolute masterpiece. Every aspect is polished to perfection. The attention to detail is mind-blowing. Definitely worth every penny!", helpful: 456, notHelpful: 8, date: "1 month ago", }, { id: 6, reviewer: "SilentAssassin", avatar: "🗡️", rating: 4, hours: 87, text: "Great game overall, but some performance issues on higher settings. Still, the story and gameplay make up for it. Highly recommended!", helpful: 234, notHelpful: 15, date: "2 months ago", }, { id: 7, reviewer: "ShadowRunner", avatar: "👤", rating: 5, hours: 200, text: "One of the best games I've played in years. The world is incredibly immersive and engaging. Can't wait for DLC content!", helpful: 678, notHelpful: 5, date: "3 months ago", }, { id: 8, reviewer: "DarkVoyager", avatar: "🌙", rating: 3, hours: 45, text: "Good game but not my cup of tea. The difficulty spikes are frustrating at times. Still, it's a solid experience for those who enjoy challenging gameplay.", helpful: 156, notHelpful: 89, date: "3 months ago", }, ] const ReviewCard = ({ review, onHelpful, onNotHelpful, }: { review: Review onHelpful: (id: number) => void onNotHelpful: (id: number) => void }) => { const [helpful, setHelpful] = useState(review.helpful) const [notHelpful, setNotHelpful] = useState(review.notHelpful) const [userHelpful, setUserHelpful] = useState<"helpful" | "not_helpful" | null>(null) const handleHelpful = () => { if (userHelpful === "helpful") { setHelpful(helpful - 1) setUserHelpful(null) } else { if (userHelpful === "not_helpful") { setNotHelpful(notHelpful - 1) } setHelpful(helpful + 1) setUserHelpful("helpful") } onHelpful(review.id) } const handleNotHelpful = () => { if (userHelpful === "not_helpful") { setNotHelpful(notHelpful - 1) setUserHelpful(null) } else { if (userHelpful === "helpful") { setHelpful(helpful - 1) } setNotHelpful(notHelpful + 1) setUserHelpful("not_helpful") } onNotHelpful(review.id) } return (

{review.avatar}

{review.reviewer}

{[...Array(5)].map((_, i) => ( ))}
{review.hours}h played

{review.date}

{review.text}

) } const getSuggestedGamesByTags = (currentGame: Game, allGames: Game[], count = 3): Game[] => { const currentTags = currentGame.tags || [] // Calculate match score for each game const gameScores = allGames .filter((game) => game.id !== currentGame.id) .map((game) => { const gameTags = game.tags || [] const matchedTags = gameTags.filter((tag) => currentTags.includes(tag)).length return { game, score: matchedTags } }) .filter((item) => item.score > 0) .sort((a, b) => b.score - a.score) .slice(0, count) // If not enough matches by tags, fill with random games if (gameScores.length < count) { const remainingGames = allGames .filter((game) => game.id !== currentGame.id && !gameScores.find((s) => s.game.id === game.id)) .slice(0, count - gameScores.length) return [...gameScores.map((s) => s.game), ...remainingGames] } return gameScores.map((s) => s.game) } const SuggestedGamesSection = ({ currentGame }: { currentGame: Game }) => { const suggestedGames = getSuggestedGamesByTags(currentGame, allGames, 3) return (

Suggested Games

{suggestedGames.map((game) => (

{game.title}

{game.rating || "N/A"}
{game.isFree ? ( FREE ) : ( ₹{game.price} )}

))}

) } const SystemRequirementsSection = ({ game }: { game: Game }) => { if (!game.systemRequirements) return null const { minimum, recommended } = game.systemRequirements return (

System Requirements

{/ Minimum Requirements /}
Minimum

OS

{minimum.os}

Processor

{minimum.processor}

Memory

{minimum.memory}

Graphics

{minimum.graphics}

Storage

{minimum.storage}

{/ Recommended Requirements /}
Recommended

{game.systemRequirements.recommended?.os && (
OS:
{game.systemRequirements.recommended.os}

)} {game.systemRequirements.recommended?.processor && (
Processor:
{game.systemRequirements.recommended.processor}

)} {game.systemRequirements.recommended?.memory && (
Memory:
{game.systemRequirements.recommended.memory}

)} {game.systemRequirements.recommended?.graphics && (
Graphics:
{game.systemRequirements.recommended.graphics}

)} {game.systemRequirements.recommended?.storage && (
Storage:
{game.systemRequirements.recommended.storage}

)}

) } const SuggestedGames = ({ currentGameId }: { currentGameId: number }) => { const suggestedGames = allGames.filter((g) => g.id !== currentGameId).slice(0, 4) return (
{suggestedGames.map((game) => (

{game.title}

${game.price}

))}
) } export function BrowseGameDetail({ game, onClose, onGameChange, isLoading = false }: BrowseGameDetailProps) { const [selectedScreenshot, setSelectedScreenshot] = useState(null) const [selectedEdition, setSelectedEdition] = useState("standard") const [reviews, setReviews] = useState(fakeReviews) const [showAllReviews, setShowAllReviews] = useState(false) const [newReviewText, setNewReviewText] = useState("") const [newReviewRating, setNewReviewRating] = useState(5) const [showSkeleton, setShowSkeleton] = useState(true) const [fadeOut, setFadeOut] = useState(false) const screenshotCarouselRef = useRef(null) const [showCheckoutModal, setShowCheckoutModal] = useState(false) const [checkoutUrl, setCheckoutUrl] = useState("") const { addToCart, getTotalItems } = useCartStore() const { addItem, removeItem, isInWishlist } = useWishlistStore() const isWishlisted = isInWishlist(game.id) const [user, setUser] = useState<{ id: string } | null>(null) const [userTokenBalance, setUserTokenBalance] = useState(null) const [tokensToEarn, setTokensToEarn] = useState(0) useEffect(() => { setSelectedScreenshot(null) setSelectedEdition("standard") setShowAllReviews(false) setReviews(fakeReviews) const fetchUserAndTokens = async () => { const { data } = await supabase.auth.getSession() if (data.session?.user) { setUser(data.session.user as any) try { const wallet = await userWalletService.getUserWallet(data.session.user.id) setUserTokenBalance(wallet?.wizard_tokens || 0) } catch (error) { console.error("Error fetching wallet:", error) } } } fetchUserAndTokens() setTokensToEarn(Math.floor(game.price / 10)) }, [game.id, game.price]) useEffect(() => { setShowSkeleton(true) setFadeOut(false) const skeletonTimer = setTimeout(() => { setFadeOut(true) setTimeout(() => { setShowSkeleton(false) }, 300) // Fade-out duration }, 2000) // Show skeleton for 2 seconds return () => clearTimeout(skeletonTimer) }, [game.id]) const screenshots = game.screenshots && game.screenshots.length > 0 ? game.screenshots : null const scrollCarousel = (ref: React.RefObject, direction: "left" | "right") => { if (ref.current) { const scrollAmount = 300 const currentScroll = ref.current.scrollLeft const targetScroll = direction === "left" ? currentScroll - scrollAmount : currentScroll + scrollAmount ref.current.scrollTo({ left: targetScroll, behavior: "smooth", }) } } const handleSubmitReview = () => { if (newReviewText.trim() === "") return const newReview: Review = { id: Math.max(...reviews.map((r) => r.id), 0) + 1, reviewer: "You", rating: newReviewRating, hours: 10, helpful: 0, notHelpful: 0, date: "just now", text: newReviewText, avatar: "👤", } setReviews([newReview, ...reviews]) setNewReviewText("") setNewReviewRating(5) } const displayedReviews = showAllReviews ? reviews : reviews.slice(0, 3) const hasMoreReviews = reviews.length > 3 const handleHelpful = (reviewId: number) => { // This is handled in the ReviewCard component } const handleNotHelpful = (reviewId: number) => { // This is handled in the ReviewCard component } const systemRequirements = game.systemRequirements || { minimum: { os: "Not specified", processor: "Not specified", memory: "Not specified", graphics: "Not specified", storage: "Not specified", }, recommended: { os: "Not specified", processor: "Not specified", memory: "Not specified", graphics: "Not specified", storage: "Not specified", }, } const handleBuyNow = () => { const params = new URLSearchParams({ gameId: game.id.toString(), title: game.title, price: game.price.toString(), image: encodeURIComponent(game.image || ""), }) setCheckoutUrl(`/payment?${params.toString()}`) setShowCheckoutModal(true) } const handleAddToCart = () => { addToCart({ id: game.id, title: game.title, price: game.price, image: game.image, originalPrice: game.originalPrice, discount: game.discount, quantity: 1, }) const updatedTotal = getTotalItems() toast.success(`${game.title} added to cart!`, { description: `Cart now has ${updatedTotal} item(s)`, }) } const handleWishlistToggle = () => { if (isWishlisted) { removeItem(game.id) toast.success(`${game.title} removed from wishlist`) } else { addItem({ id: game.id, title: game.title, price: game.price, image: game.image, originalPrice: game.originalPrice, discount: game.discount, }) toast.success(`${game.title} added to wishlist`) } } const handleGameClick = (selectedGame: Game) => { if (onGameChange) { onGameChange(selectedGame) } } if (showSkeleton) { return (

) } return (
{/ Header /}

{game.title}

{/ Left: Video Player & Screenshots Section /}
{/ Selected Screenshot Display /} {selectedScreenshot ? (

) : ( <> {/ Video Player /} {game.trailer_url && (
{game.trailer_url.includes("youtube.com") || game.trailer_url.includes("youtu.be") ? ( ) : ( <video src={game.trailer_url} controls autoPlay loop muted playsInline className="w-full h-full object-cover" /> )} </div> )} </> )} {/ Screenshots Carousel /} {screenshots && screenshots.length > 0 && ( <div className="relative mb-8"> <div className="flex items-center gap-2 mb-4"> <h3 className="text-white font-semibold">Screenshots</h3> <div className="flex gap-2 ml-auto"> <Button variant="ghost" size="sm" onClick={() => scrollCarousel(screenshotCarouselRef, "left")} className="text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => scrollCarousel(screenshotCarouselRef, "right")} className="text-gray-400 hover:text-white" > <ChevronRight className="w-4 h-4" /> </Button> </div> </div> <div ref={screenshotCarouselRef} className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide no-scrollbar min-h-28 items-center justify-center" > {screenshots.map((screenshot, index) => ( <div key={index} className="flex-shrink-0 w-40 h-24 rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setSelectedScreenshot(screenshot)} > <Image src={screenshot || "/placeholder.svg?height=96&width=160&query=game screenshot"} alt={`Screenshot ${index}`} width={160} height={96} className="w-full h-full object-cover" /> </div> ))} </div> </div> )} {/ Game Info - About This Game Section /} <div className="space-y-6 mb-16"> <div> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">About This Game</h2> <div className="space-y-6"> <div> <h1 className="text-4xl font-bold text-white mb-4">{game.title}</h1> <div className="flex flex-wrap gap-2 mb-4"> {game.tags?.map((tag) => ( <Badge key={tag} variant="secondary" className="bg-gray-800 text-gray-300 hover:bg-gray-700"> {tag} </Badge> ))} </div> {game.rating && ( <div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-1"> <Star className="w-4 h-4 text-yellow-400 fill-current" /> <span className="text-white font-medium">{game.rating}</span> </div> <span className="text-gray-400">• Very Positive Reviews</span> </div> )} </div> <div> <p className="text-gray-300 leading-relaxed"> {game.description || `Experience the ultimate gaming adventure with ${game.title}. This critically acclaimed title offers hours of immersive gameplay, stunning visuals, and an unforgettable story that will keep you engaged from start to finish.`} </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h4 className="text-lg font-semibold text-white mb-3">Game Details</h4> <div className="space-y-2 text-sm"> {game.releaseDate && ( <div className="flex items-center gap-2"> <Calendar className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Release Date:</span> <span className="text-white">{game.releaseDate}</span> </div> )} {game.developer && ( <div className="flex items-center gap-2"> <User className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Developer:</span> <span className="text-white">{game.developer}</span> </div> )} {game.publisher && ( <div className="flex items-center gap-2"> <Building className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Publisher:</span> <span className="text-white">{game.publisher}</span> </div> )} </div> </div> {game.features && game.features.length > 0 && ( <div> <h4 className="text-lg font-semibold text-white mb-3">Features</h4> <div className="space-y-1 text-sm"> {game.features.map((feature) => ( <div key={feature} className="flex items-center gap-2 text-gray-300"> <Gamepad2 className="w-4 h-4 text-blue-400" /> {feature} </div> ))} </div> </div> )} </div> </div> </div> {/ System Requirements /} {game.systemRequirements && <SystemRequirementsSection game={game} />} </div> {/ Reviews Section /} <div className="mb-12"> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">Reviews</h2> <div className="mb-8"> <div className="flex items-center gap-4 mb-8 p-4 bg-gray-800/50 rounded-lg border border-gray-700"> <div className="text-4xl font-bold text-white">4.5</div> <div> <div className="flex items-center gap-1 mb-1"> {[...Array(5)].map((_, i) => ( <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" /> ))} </div> <p className="text-gray-400 text-sm">{reviews.length} reviews</p> </div> </div> <div className="bg-gray-800/30 border border-gray-700 rounded-lg p-4 mb-8"> <div className="mb-3"> <label className="text-white text-sm font-semibold block mb-2">Your Rating:</label> <div className="flex gap-1"> {[1, 2, 3, 4, 5].map((star) => ( <button key={star} onClick={() => setNewReviewRating(star)} className="transition-transform hover:scale-110" > <Star className={`w-5 h-5 ${ star <= newReviewRating ? "text-yellow-400 fill-yellow-400" : "text-gray-600" }`} /> </button> ))} </div> </div> <textarea placeholder="Write your review here..." value={newReviewText} onChange={(e) => setNewReviewText(e.target.value)} className="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-blue-500" rows={3} /> <Button onClick={handleSubmitReview} className="mt-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold" > <MessageSquare className="w-4 h-4 mr-2" /> Submit Review </Button> </div> </div> {/ Reviews List /} <div className="space-y-4"> {displayedReviews.map((review) => ( <ReviewCard key={review.id} review={review} onHelpful={handleHelpful} onNotHelpful={handleNotHelpful} /> ))} </div> {hasMoreReviews && ( <Button onClick={() => setShowAllReviews(!showAllReviews)} className="w-full mt-6 bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3" > {showAllReviews ? "Show Less" : `Show More Reviews (${reviews.length - 3} more)`} </Button> )} </div> {/ Suggested Games Section /} <SuggestedGamesSection currentGame={game as Game} /> </div> {/ Right: Buy Panel /} <div className="lg:col-span-1 order-first lg:order-last"> <div className="sticky top-24 space-y-4"> {/ Rating Badge /} <div className="flex items-center gap-2 bg-gray-800/50 rounded-lg p-3"> <div className="w-10 h-10 rounded flex items-center justify-center bg-gray-900 text-white font-bold"> {game.ageRating || "T"} </div> <div> <p className="text-white font-semibold text-sm">{game.ageRating || "Teen"}</p> <p className="text-gray-400 text-xs">{game.tags?.[0] || "Game"}</p> </div> </div> {/ Edition Selector /} <div> <label className="text-gray-400 text-sm font-semibold block mb-2">Edition</label> <select value={selectedEdition} onChange={(e) => setSelectedEdition(e.target.value)} className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500" > <option value="standard">Standard Edition</option> <option value="deluxe">Deluxe Edition</option> <option value="gold">Gold Edition</option> <option value="ultimate">Ultimate Edition</option> <option value="legacy">Legacy Edition</option> <option value="enhanced">Enhanced Edition</option> </select> </div> {/ Price /} <div> <p className="text-gray-400 text-xs font-semibold mb-1">Price</p> <div className="flex items-center gap-2"> <p className="text-white text-3xl font-bold">₹{game.price}</p> {game.originalPrice && <p className="text-gray-500 text-sm line-through">₹{game.originalPrice}</p>} </div> </div> {/ Availability /} {game.comingSoon ? ( <p className="text-orange-400 text-sm font-semibold">Coming Soon</p> ) : ( <p className="text-green-400 text-sm font-semibold">Available on PC</p> )} {/ Buy Button /} <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3" onClick={handleBuyNow} > Buy Now </Button> {/ Add to Cart /} <Button onClick={handleAddToCart} className="w-full bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3" > Add To Cart </Button> {/ Add to Wishlist /} <Button onClick={handleWishlistToggle} className={`w-full font-semibold py-3 ${ isWishlisted ? "bg-red-600 hover:bg-red-700 text-white" : "bg-gray-800 hover:bg-gray-700 text-white" }`} > ❤️ {isWishlisted ? "Remove from Wishlist" : "Add to Wishlist"} </Button> {/ Wizard Tokens - Earn Display ONLY - NO PURCHASE UI HERE /} <div className="bg-gradient-to-br from-cyan-900/30 to-purple-900/30 border border-cyan-500/30 rounded-lg p-4"> <div className="flex items-center justify-between"> <div> <p className="text-white font-semibold text-sm flex items-center gap-2">🪙 Wizard Tokens</p> <p className="text-cyan-400 text-xs font-semibold mt-1"> You will earn {tokensToEarn} tokens after purchase </p> </div> <div className="text-right"> <div className="text-cyan-400 font-bold text-lg">{tokensToEarn}</div> <p className="text-gray-400 text-xs">tokens</p> </div> </div> </div> </div> </div> </div> </div> {/ Wizard Games Footer /} <WizardGamesFooter /> {/ Checkout Modal /} <CheckoutLoadingModal isOpen={showCheckoutModal} redirectUrl={checkoutUrl} onOpenChange={setShowCheckoutModal} /> </div> ) } [V0_FILE]typescriptreact:file="components/admin-panel.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { X, Users, ShoppingCart, DollarSign, Package, MessageSquare, Settings, Database, BarChart3, Plus, RefreshCw, MessageCircle, Gift, FileText, Activity, Mail, User, KeyRound, ShieldCheck, } from "lucide-react" import { RealTimeOrders } from "@/components/real-time-orders" import { CodeRequestsPanel } from "@/components/code-requests-panel" import { SupportMessagesPanel } from "@/components/support-messages-panel" import { AdminLiveChat } from "@/components/admin-live-chat" import { useWebSocketStore } from "@/lib/websocket-store" import { orderService, userService, accountsService, dashboardService, type AccountSubmission } from "@/lib/supabase" import Image from "next/image" import { LibraryCodesPanel } from "@/components/library-codes-panel" import { RedeemRequestsPanel } from "@/components/redeem-requests-panel" import { toast } from "sonner" import { UsersManagementPanel } from "./users-management-panel" import { approveOrderWithTokensAction } from "@/app/actions/order" interface AdminPanelProps { onClose: () => void } interface FreeGameComment { id: string tracking_id: string game_title: string customer_name: string customer_comments: string status: string created_at: string updated_at: string user_id?: string | null payment_method?: string | null amount?: number | null } interface UserActivity { id: string email: string username: string last_seen: string is_active: boolean created_at: string total_orders: number total_spent: number } export function AdminPanel({ onClose }: AdminPanelProps) { const [activeTab, setActiveTab] = useState("dashboard") const [freeGameComments, setFreeGameComments] = useState<FreeGameComment[]>([]) const [loadingComments, setLoadingComments] = useState(false) const [userActivities, setUserActivities] = useState<UserActivity[]>([]) const [loadingUsers, setLoadingUsers] = useState(false) const [activeUsersCount, setActiveUsersCount] = useState(0) const [loadingDashboard, setLoadingDashboard] = useState(true) const [stats, setStats] = useState({ totalUsers: 0, totalOrders: 0, totalRevenue: 0, activeUsers: 0, pendingOrders: 0, completedOrders: 0, supportTickets: 0, liveChats: 0, }) // Accounts Manager state const [acctLoading, setAcctLoading] = useState(false) const [submissions, setSubmissions] = useState<AccountSubmission[]>([]) const { sessions } = useWebSocketStore() const waitingSessions = sessions.filter((s) => s.status === "waiting") const activeSessions = sessions.filter((s) => s.status === "connected") useEffect(() => { loadDashboardMetrics() }, []) const loadDashboardMetrics = async () => { setLoadingDashboard(true) try { const metrics = await dashboardService.getDashboardMetrics() setStats((prev) => ({ ...prev, totalUsers: metrics.totalUsers, totalOrders: metrics.totalOrders, totalRevenue: metrics.totalRevenue, activeUsers: metrics.activeUsers, pendingOrders: metrics.pendingOrders, completedOrders: metrics.completedOrders, })) } catch (error) { console.error("[v0] Error loading dashboard metrics:", error) // Keep previous stats on error } finally { setLoadingDashboard(false) } } // Update live chat stats useEffect(() => { setStats((prev) => ({ ...prev, liveChats: activeSessions.length, supportTickets: waitingSessions.length, })) }, [sessions, waitingSessions.length, activeSessions.length]) // Load free game comments when tab is selected useEffect(() => { if (activeTab === "freegames") { loadFreeGameComments() } }, [activeTab]) // Load real users when tab is selected and set up auto-refresh useEffect(() => { if (activeTab === "realusers") { loadRealUsers() const interval = setInterval(() => { loadRealUsers() }, 30000) return () => clearInterval(interval) } }, [activeTab]) // Load account submissions and subscribe in real-time useEffect(() => { if (activeTab === "accounts") { refreshSubmissions() const off = accountsService.subscribeToAll((sub) => { setSubmissions((prev) => { const idx = prev.findIndex((p) => p.id === sub.id) if (idx >= 0) { const clone = [...prev] clone[idx] = sub return clone } return [sub, ...prev] }) }) return () => { off?.() } } }, [activeTab]) const refreshSubmissions = async () => { setAcctLoading(true) try { const list = await accountsService.listAllSubmissions() setSubmissions(list) } catch (err) { console.error("Error loading account submissions", err) } finally { setAcctLoading(false) } } const loadFreeGameComments = async () => { setLoadingComments(true) try { const orders = await orderService.getAllFreeGameOrders() console.log("📊 Free game orders fetched:", orders.length) const freeGameOrders = orders .map((order) => { console.log("Processing free game order:", { id: order.id, tracking_id: order.tracking_id, customer_name: order.customer_name, additional_comments: order.additional_comments, items: order.items, user_id: order.user_id, payment_method: order.payment_method, amount: order.amount, }) return { id: order.id, tracking_id: order.tracking_id, game_title: order.items?.[0]?.title || "Unknown Game", customer_name: order.customer_name?.trim() || "No name provided", customer_comments: order.additional_comments?.trim() || "No comments provided", status: order.status || "pending", created_at: order.created_at, updated_at: order.updated_at || order.created_at, user_id: order.user_id, payment_method: order.payment_method, amount: order.amount, } }) .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()) console.log("📝 Free game comments processed:", freeGameOrders) setFreeGameComments(freeGameOrders) } catch (error) { console.error("❌ Error loading free game comments:", error) } finally { setLoadingComments(false) } } const loadRealUsers = async () => { setLoadingUsers(true) try { console.log("👥 Loading real authenticated users...") const users = await userService.getRealAuthenticatedUsers() console.log("✅ Real users loaded:", users.length) // Calculate active users (last seen within 5 minutes) const fiveMinutesAgo = new Date(Date.now() - 5 60 * 1000) const activeUsers = users.filter((user: any) => new Date(user.last_seen) > fiveMinutesAgo) setActiveUsersCount(activeUsers.length) // Update stats setStats((prev) => ({ ...prev, totalUsers: users.length, activeUsers: activeUsers.length, })) // @ts-ignore setUserActivities(users) } catch (error) { console.error("❌ Error loading real users:", error) setUserActivities([]) setActiveUsersCount(0) } finally { setLoadingUsers(false) } } const getStatusColor = (status: string) => { switch ((status || "").toLowerCase()) { case "pending": return "bg-yellow-600" case "approved": return "bg-green-600" case "completed": return "bg-blue-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getLastSeenText = (lastSeen: string) => { const now = new Date() const lastSeenDate = new Date(lastSeen) const diffInMinutes = Math.floor((now.getTime() - lastSeenDate.getTime()) / (1000 * 60)) if (diffInMinutes < 1) return "Just now" if (diffInMinutes < 60) return `${diffInMinutes}m ago` if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago` return `${Math.floor(diffInMinutes / 1440)}d ago` } const StatCard = ({ title, value, icon, color = "text-blue-400", }: { title: string value: number | string icon: React.ReactNode color?: string }) => ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-sm text-gray-400">{title}</p> <p className="text-2xl font-bold text-white">{value}</p> </div> <div className={`${color}`}>{icon}</div> </div> </CardContent> </Card> ) const providerLabel = (p: string) => p === "rockstar" ? "Rockstar" : p === "ea" ? "EA" : p === "ubisoft" ? "Ubisoft" : p return ( <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="bg-gray-900 rounded-lg w-full max-w-7xl h-[90vh] flex flex-col border border-gray-700"> {/* Header /} <div className="flex items-center justify-between p-6 border-b border-gray-700"> <div className="flex items-center gap-3"> <div className="w-10 h-10 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg flex items-center justify-center"> <Settings className="w-5 h-5 text-white" /> </div> <div> <h1 className="text-xl font-bold text-white">Admin Panel</h1> <p className="text-sm text-gray-400">Wizard Games Store Management</p> </div> </div> <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> </div> {/ Content /} <div className="flex-1 overflow-hidden"> <Tabs value={activeTab} onValueChange={setActiveTab} className="h-full flex flex-col"> <TabsList className="grid grid-cols-11 bg-gray-800 mx-6 mt-4"> <TabsTrigger value="dashboard" className="text-xs"> Dashboard </TabsTrigger> <TabsTrigger value="orders" className="text-xs"> Orders </TabsTrigger> <TabsTrigger value="codes" className="text-xs"> Game Codes </TabsTrigger> <TabsTrigger value="accounts" className="text-xs"> Accounts Manager </TabsTrigger> <TabsTrigger value="freegames" className="text-xs"> Free Games </TabsTrigger> <TabsTrigger value="realusers" className="text-xs flex items-center gap-1"> Real Users {activeUsersCount > 0 && ( <Badge className="bg-green-600 text-white text-xs ml-1">{activeUsersCount}</Badge> )} </TabsTrigger> <TabsTrigger value="support" className="text-xs"> Support </TabsTrigger> <TabsTrigger value="livechat" className="text-xs flex items-center gap-1"> Live Chat {waitingSessions.length + activeSessions.length > 0 && ( <Badge className="bg-red-600 text-white text-xs ml-1"> {waitingSessions.length + activeSessions.length} </Badge> )} </TabsTrigger> <TabsTrigger value="library-codes" className="text-xs"> Library Codes </TabsTrigger> <TabsTrigger value="redeem" className="text-xs"> Redeem Codes </TabsTrigger> {/ START: New Users Tab /} <TabsTrigger value="users" className="text-xs"> Users </TabsTrigger> {/ END: New Users Tab /} <TabsTrigger value="settings" className="text-xs"> Settings </TabsTrigger> </TabsList> <div className="flex-1 overflow-hidden"> <TabsContent value="dashboard" className="h-full m-0 p-6"> {/ existing dashboard content unchanged /} <ScrollArea className="h-full"> <div className="space-y-6"> <div> <h2 className="text-lg font-semibold text-white mb-4">Overview</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <StatCard title="Total Users" value={loadingDashboard ? "..." : stats.totalUsers.toLocaleString()} icon={<Users className="w-6 h-6" />} color="text-blue-400" /> <StatCard title="Total Orders" value={loadingDashboard ? "..." : stats.totalOrders.toLocaleString()} icon={<ShoppingCart className="w-6 h-6" />} color="text-green-400" /> <StatCard title="Total Revenue" value={loadingDashboard ? "..." : `$${stats.totalRevenue.toLocaleString()}`} icon={<DollarSign className="w-6 h-6" />} color="text-yellow-400" /> <StatCard title="Active Users" value={loadingDashboard ? "..." : stats.activeUsers.toLocaleString()} icon={<Activity className="w-6 h-6" />} color="text-green-400" /> </div> </div> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <Card className="bg-gray-800 border-gray-700"> <CardHeader> <CardTitle className="text-white flex items-center gap-2"> <Package className="w-5 h-5" /> Order Status </CardTitle> </CardHeader> <CardContent> <div className="space-y-3"> <div className="flex items-center justify-between"> <span className="text-gray-400">Pending Orders</span> <Badge className="bg-yellow-600">{stats.pendingOrders}</Badge> </div> <div className="flex items-center justify-between"> <span className="text-gray-400">Completed Orders</span> <Badge className="bg-green-600">{stats.completedOrders}</Badge> </div> <div className="flex items-center justify-between"> <span className="text-gray-400">Total Orders</span> <Badge className="bg-blue-600">{stats.totalOrders}</Badge> </div> </div> </CardContent> </Card> <Card className="bg-gray-800 border-gray-700"> <CardHeader> <CardTitle className="text-white flex items-center gap-2"> <Activity className="w-5 h-5" /> User Activity Status </CardTitle> </CardHeader> <CardContent> <div className="space-y-3"> <div className="flex items-center justify-between"> <span className="text-gray-400 flex items-center gap-2"> <Image src="/logo.png" alt="WG" width={16} height={16} className="rounded" /> Active Users (Online) </span> <Badge className="bg-green-600">{activeUsersCount}</Badge> </div> <div className="flex items-center justify-between"> <span className="text-gray-400 flex items-center gap-2"> <Users className="w-4 h-4" /> Total Registered Users </span> <Badge className="bg-blue-600">{stats.totalUsers}</Badge> </div> <div className="flex items-center justify-between"> <span className="text-gray-400 flex items-center gap-2"> <MessageCircle className="w-4 h-4" /> Live Chat Sessions </span> <Badge className="bg-purple-600">{activeSessions.length}</Badge> </div> </div> </CardContent> </Card> </div> <Card className="bg-gray-800 border-gray-700"> <CardHeader> <CardTitle className="text-white flex items-center gap-2"> <BarChart3 className="w-5 h-5" /> Quick Actions </CardTitle> </CardHeader> <CardContent> <div className="grid grid-cols-2 md:grid-cols-6 gap-3"> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("orders")} > <Package className="w-4 h-4 mr-2" /> View Orders </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("codes")} > <Database className="w-4 h-4 mr-2" /> Manage Codes </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("accounts")} > <ShieldCheck className="w-4 h-4 mr-2" /> Accounts </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("freegames")} > <Gift className="w-4 h-4 mr-2" /> Free Games </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("realusers")} > <Activity className="w-4 h-4 mr-2" /> Real Users </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" onClick={() => setActiveTab("support")} > <MessageSquare className="w-4 h-4 mr-2" /> Support </Button> </div> </CardContent> </Card> </div> </ScrollArea> </TabsContent> <TabsContent value="orders" className="h-full m-0 p-6"> <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white">Real-Time Orders</h2> <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className="w-4 h-4 mr-2" /> Refresh </Button> </div> <RealTimeOrders /> </div> </TabsContent> <TabsContent value="codes" className="h-full m-0 p-6"> <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white">Game Code Requests</h2> <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <Plus className="w-4 h-4 mr-2" /> Add Code </Button> </div> <CodeRequestsPanel /> </div> </TabsContent> {/ NEW: Accounts Manager /} <TabsContent value="accounts" className="h-full m-0 p-6"> <div className="h-full flex flex-col"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white flex items-center gap-2"> <ShieldCheck className="w-5 h-5 text-blue-400" /> Accounts Manager </h2> <Button variant="outline" size="sm" onClick={refreshSubmissions} disabled={acctLoading} className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className={`w-4 h-4 mr-2 ${acctLoading ? "animate-spin" : ""}`} /> Refresh </Button> </div> <ScrollArea className="h-[calc(100%-50px)]"> {submissions.length === 0 ? ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-8 text-center"> <FileText className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <h3 className="text-lg font-semibold text-white mb-2">No Account Submissions</h3> <p className="text-gray-400">New user submissions will appear here in real time.</p> </CardContent> </Card> ) : ( <div className="space-y-4"> {submissions.map((s) => ( <Card key={s.id} className="bg-gray-800 border-gray-700"> <CardHeader className="pb-3"> <div className="flex items-center justify-between"> <div className="flex items-center gap-3"> <div className="w-9 h-9 rounded-lg bg-blue-500/10 ring-1 ring-blue-500/20 flex items-center justify-center text-blue-400"> <ShieldCheck className="w-5 h-5" /> </div> <div> <CardTitle className="text-white text-base"> {providerLabel(s.provider)} Submission </CardTitle> <p className="text-gray-400 text-xs"> {s.user_email ? s.user_email : "Anonymous"} •{" "} {new Date(s.created_at).toLocaleString()} </p> </div> </div> <Badge className={s.status === "completed" ? "bg-green-600" : "bg-yellow-600"}> {s.status.toUpperCase()} </Badge> </div> </CardHeader> <CardContent className="space-y-4"> <div className="rounded-lg bg-gray-900 border border-gray-700 p-3 text-sm text-gray-300"> <span className="text-gray-400">Message:</span> {s.message} </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="space-y-2"> <Label className="text-gray-300 text-xs">Account ID / Username</Label> <Input defaultValue={s.account_id ?? ""} onChange={(e) => { setSubmissions((prev) => prev.map((p) => (p.id === s.id ? { ...p, account_id: e.target.value } : p)), ) }} placeholder="Enter account ID / username" className="bg-gray-900 border-gray-700 text-white rounded-lg ring-1 ring-transparent focus:ring-blue-500/40 focus:border-blue-500/60" /> </div> <div className="space-y-2"> <Label className="text-gray-300 text-xs">Password</Label> <Input defaultValue={s.account_password ?? ""} onChange={(e) => { setSubmissions((prev) => prev.map((p) => p.id === s.id ? { ...p, account_password: e.target.value } : p, ), ) }} placeholder="Enter password" className="bg-gray-900 border-gray-700 text-white rounded-lg ring-1 ring-transparent focus:ring-blue-500/40 focus:border-blue-500/60" /> </div> </div> <div className="flex justify-end"> <Button onClick={async () => { const current = submissions.find((p) => p.id === s.id) const aid = current?.account_id ?? "" const pwd = current?.account_password ?? "" if (!aid || !pwd) { return } try { await accountsService.saveCredentials(s.id, aid, pwd) // UI will update via real-time } catch (err) { console.error(err) } }} className="bg-blue-600 hover:bg-blue-700 shadow-[0_0_18px_rgba(37,99,235,0.35)]" > <KeyRound className="w-4 h-4 mr-2" /> Save Credentials </Button> </div> </CardContent> </Card> ))} </div> )} </ScrollArea> </div> </TabsContent> <TabsContent value="freegames" className="h-full m-0 p-6"> {/ existing Free Games tab remains unchanged /} <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white"> Free Game Comments & Requests ({freeGameComments.length}) </h2> <Button variant="outline" size="sm" onClick={loadFreeGameComments} disabled={loadingComments} className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className={`w-4 h-4 mr-2 ${loadingComments ? "animate-spin" : ""}`} /> Refresh </Button> </div> <ScrollArea className="h-[calc(100%-80px)]"> {loadingComments ? ( <div className="flex items-center justify-center h-32"> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-400"></div> </div> ) : freeGameComments.length === 0 ? ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-8 text-center"> <FileText className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <h3 className="text-lg font-semibold text-white mb-2">No Free Game Requests</h3> <p className="text-gray-400">No free game requests with comments found yet.</p> </CardContent> </Card> ) : ( <div className="space-y-4"> {freeGameComments.map((comment) => ( <Card key={comment.id} className="bg-gray-800 border-gray-700"> <CardHeader className="pb-3"> <div className="flex items-center justify-between"> <div className="flex items-center gap-3"> <Gift className="w-5 h-5 text-green-400" /> <div> <CardTitle className="text-white text-lg">{comment.game_title}</CardTitle> <p className="text-gray-400 text-sm">Tracking ID: {comment.tracking_id}</p> </div> </div> <Badge className={`${getStatusColor(comment.status)} text-white`}> {comment.status.toUpperCase()} </Badge> </div> </CardHeader> <CardContent className="space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <Label className="text-gray-400 text-sm">Customer Name</Label> <p className="text-white font-medium">{comment.customer_name}</p> </div> <div> <Label className="text-gray-400 text-sm">Request Date</Label> <p className="text-white"> {new Date(comment.created_at).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", })} </p> </div> </div> <div> <Label className="text-gray-400 text-sm">Customer Comments</Label> <div className="bg-gray-700/50 rounded-lg p-4 mt-2 border-l-4 border-green-500"> <p className="text-gray-100 leading-relaxed whitespace-pre-wrap"> {comment.customer_comments} </p> </div> </div> <div className="flex items-center justify-between pt-3 border-t border-gray-700"> <div className="text-xs text-gray-500"> Last updated: {new Date(comment.updated_at).toLocaleDateString()} </div> <div className="flex gap-2"> <Button variant="outline" size="sm" onClick={async () => { try { const order = comment const userId = order.user_id || comment.id // Use user_id if available const result = await approveOrderWithTokensAction( comment.id, userId, order.payment_method, order.amount, ) if (!result.success) { throw new Error(result.error) } // Then approve the order status await orderService.updateOrderStatus(comment.id, "approved") loadFreeGameComments() toast.success("Order approved and tokens processed!") } catch (error) { console.error("Error approving request:", error) toast.error("Failed to approve request") } }} className="border-green-600 text-green-400 hover:bg-green-600 hover:text-white bg-transparent" > Approve </Button> <Button variant="outline" size="sm" onClick={async () => { try { await orderService.updateOrderStatus(comment.id, "rejected") loadFreeGameComments() toast.success("Request rejected!") } catch (error) { console.error("Error rejecting request:", error) toast.error("Failed to reject request") } }} className="border-red-600 text-red-400 hover:bg-red-600 hover:text-white bg-transparent" > Reject </Button> </div> </div> </CardContent> </Card> ))} </div> )} </ScrollArea> </div> </TabsContent> <TabsContent value="realusers" className="h-full m-0 p-6"> {/ existing real users tab unchanged /} <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white flex items-center gap-2"> <Activity className="w-5 h-5 text-blue-400" /> Real Authenticated Users ({userActivities.length} total, {activeUsersCount} active) </h2> <Button variant="outline" size="sm" onClick={loadRealUsers} disabled={loadingUsers} className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className={`w-4 h-4 mr-2 ${loadingUsers ? "animate-spin" : ""}`} /> Refresh </Button> </div> <ScrollArea className="h-[calc(100%-80px)]"> {loadingUsers ? ( <div className="flex items-center justify-center h-32"> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400"></div> </div> ) : userActivities.length === 0 ? ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-8 text-center"> <Users className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <h3 className="text-lg font-semibold text-white mb-2">No Real Users Found</h3> <p className="text-gray-400"> No authenticated users have logged into the store yet. <br /> Users will appear here after they register and log in with their Gmail accounts. </p> <Button variant="outline" size="sm" onClick={loadRealUsers} className="border-gray-600 text-gray-300 hover:text-white bg-transparent mt-4" > <RefreshCw className="w-4 h-4 mr-2" /> Check Again </Button> </CardContent> </Card> ) : ( <div className="space-y-4"> {userActivities.map((user) => ( <Card key={user.id} className="bg-gray-800 border-gray-700"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center"> <User className="w-6 h-6 text-white" /> </div> <div> <div className="flex items-center gap-2"> <h3 className="text-white font-semibold">{user.username}</h3> {user.is_active && ( <Badge className="bg-green-600 text-white text-xs"> <Image src="/logo.png" alt="WG" width={12} height={12} className="rounded mr-1" /> ONLINE </Badge> )} </div> <div className="flex items-center gap-2 text-gray-400 text-sm"> <Mail className="w-4 h-4" /> {user.email} </div> <div className="text-gray-500 text-xs mt-1"> Last seen: {getLastSeenText(user.last_seen)} </div> </div> </div> {/ START: Add null check for total_spent to prevent undefined error /} <div className="text-right"> <div className="text-white font-semibold"> ${(user.total_spent || 0).toLocaleString()} </div> <div className="text-gray-400 text-sm">{user.total_orders || 0} orders</div> <div className="text-gray-500 text-xs"> Joined{" "} {user.created_at ? new Date(user.created_at).toLocaleDateString() : "Unknown"} </div> </div> {/ END: Add null check for total_spent to prevent undefined error /} </div> </CardContent> </Card> ))} </div> )} </ScrollArea> </div> </TabsContent> <TabsContent value="support" className="h-full m-0 p-6"> <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white">Support Messages</h2> <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className="w-4 h-4 mr-2" /> Refresh </Button> </div> <SupportMessagesPanel /> </div> </TabsContent> <TabsContent value="livechat" className="h-full m-0"> <AdminLiveChat /> </TabsContent> <TabsContent value="library-codes" className="h-full m-0 p-6"> <div className="h-full"> <h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <KeyRound className="w-5 h-5 text-purple-400" /> Library Game Codes Management </h2> <LibraryCodesPanel /> </div> </TabsContent> {/ START: Redeem Code Management Tab /} <TabsContent value="redeem" className="h-full m-0 p-6"> <div className="h-full"> <div className="flex items-center justify-between mb-4"> <h2 className="text-lg font-semibold text-white flex items-center gap-2"> <Gift className="w-5 h-5 text-purple-400" /> Redeem Code Management </h2> </div> <RedeemRequestsPanel /> </div> </TabsContent> {/ END: Redeem Code Management Tab /} {/ START: New Users Tab Content /} <TabsContent value="users" className="m-0 p-6"> <UsersManagementPanel /> </TabsContent> {/ END: New Users Tab Content /} <TabsContent value="settings" className="h-full m-0 p-6"> <ScrollArea className="h-full"> <div className="space-y-6"> <div> <h2 className="text-lg font-semibold text-white mb-4">Store Settings</h2> <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-4 space-y-4"> <div className="flex items-center justify-between"> <div> <Label className="text-white">Maintenance Mode</Label> <p className="text-sm text-gray-400">Put the store in maintenance mode</p> </div> <Switch /> </div> <div className="flex items-center justify-between"> <div> <Label className="text-white">Live Chat</Label> <p className="text-sm text-gray-400">Enable live chat support</p> </div> <Switch defaultChecked /> </div> <div className="flex items-center justify-between"> <div> <Label className="text-white">Auto-approve Orders</Label> <p className="text-sm text-gray-400">Automatically approve new orders</p> </div> <Switch /> </div> </CardContent> </Card> </div> <div> <h2 className="text-lg font-semibold text-white mb-4">Notification Settings</h2> <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-4 space-y-4"> <div className="space-y-2"> <Label className="text-white">Email Notifications</Label> <Input placeholder="admin@wizardgamestore.com" className="bg-gray-700 border-gray-600 text-white" /> </div> <div className="space-y-2"> <Label className="text-white">Webhook URL</Label> <Input placeholder="https://your-webhook-url.com" className="bg-gray-700 border-gray-600 text-white" /> </div> </CardContent> </Card> </div> <div> <h2 className="text-lg font-semibold text-white mb-4">Database Actions</h2> <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-4"> <div className="grid grid-cols-2 gap-3"> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <Database className="w-4 h-4 mr-2" /> Backup Database </Button> <Button variant="outline" className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className="w-4 h-4 mr-2" /> Sync Data </Button> </div> </CardContent> </Card> </div> </div> </ScrollArea> </TabsContent> </div> </Tabs> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/discover-card.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Heart, ShoppingCart, BookOpen } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { libraryService, supabase } from "@/lib/supabase" import { toast } from "sonner" import Image from "next/image" import type { Game } from "@/types/game" interface DiscoverCardProps { game: Game onClick: (game: Game) => void } export function DiscoverCard({ game, onClick }: DiscoverCardProps) { const { addToCart, isInCart } = useCartStore() const { addItem: addToWishlist, removeItem: removeFromWishlist, isInWishlist } = useWishlistStore() const [user, setUser] = useState<any>(null) const [isAddingToLibrary, setIsAddingToLibrary] = useState(false) const [showActions, setShowActions] = useState(false) // Check authentication status useEffect(() => { const checkAuth = async () => { const { data: { user }, } = await supabase.auth.getUser() setUser(user) } checkAuth() // Listen for auth changes const { data: { subscription }, } = supabase.auth.onAuthStateChange((event, session) => { setUser(session?.user || null) }) return () => { subscription.unsubscribe() } }, []) const handleAddToCart = (e: React.MouseEvent) => { e.stopPropagation() addToCart({ id: game.id.toString(), title: game.title, price: game.price, image: game.image || "", originalPrice: game.originalPrice, discount: game.discount, quantity: 1, }) toast.success(`${game.title} added to cart!`) } const handleWishlistToggle = (e: React.MouseEvent) => { e.stopPropagation() if (isInWishlist(game.id)) { removeFromWishlist(game.id) toast.success(`${game.title} removed from wishlist`) } else { addToWishlist(game) toast.success(`${game.title} added to wishlist!`) } } const handleAddToLibrary = async (e: React.MouseEvent) => { e.stopPropagation() if (!user) { toast.error("Please sign in to add games to your library") return } setIsAddingToLibrary(true) try { await libraryService.addToLibrary(user.id, game.id.toString(), game.title, game.image || null, null, null) toast.success("Added to Library successfully") } catch (error: any) { console.error("Error adding to library:", error) if (error.message === "DUPLICATE_ENTRY") { toast.info("Game is already in your library") } else { toast.error("Failed to add to library") } } finally { setIsAddingToLibrary(false) } } const isInWishlistState = isInWishlist(game.id) const isInCartState = isInCart(game.id) return ( <div className="group cursor-pointer transition-all duration-300 hover:scale-[1.02] hover:shadow-lg flex-shrink-0 w-full flex flex-col" onClick={() => onClick(game)} onMouseEnter={() => setShowActions(true)} onMouseLeave={() => setShowActions(false)} > <div className="relative aspect-[3/4] overflow-hidden rounded-[12px] bg-gray-800 flex-shrink-0"> <picture> {game.mobileImage && <source media="(max-width: 640px)" srcSet={game.mobileImage} />} <Image src={game.image || "/placeholder.svg?height=200&width=150"} alt={game.title} fill className="object-cover transition-transform duration-300 group-hover:scale-105" sizes="(max-width: 640px) 33vw, (max-width: 1024px) 25vw, 150px" /> </picture> {/ Action Buttons - Show on Hover /} <div className={`absolute top-1 right-1 flex flex-col gap-1 transition-opacity duration-200 ${showActions ? "opacity-100" : "opacity-0"}`} > <Button size="sm" variant="secondary" className="w-6 h-6 p-0 bg-black/70 hover:bg-black/90 border-0" onClick={handleWishlistToggle} > <Heart className={`w-2.5 h-2.5 ${isInWishlistState ? "fill-red-500 text-red-500" : "text-white"}`} /> </Button> </div> {/ Bottom Action Buttons - Show on Hover /} <div className={`absolute bottom-1 left-1 right-1 flex gap-1 transition-opacity duration-200 ${showActions ? "opacity-100" : "opacity-0"}`} > <Button size="sm" className="flex-1 bg-white/90 hover:bg-white text-black text-xs font-medium h-6" onClick={handleAddToCart} disabled={isInCartState} > <ShoppingCart className="w-2.5 h-2.5 mr-1" /> {isInCartState ? "In Cart" : "Add"} </Button> {user && ( <Button size="sm" variant="secondary" className="bg-black/70 hover:bg-black/90 text-white h-6 px-1.5" onClick={handleAddToLibrary} disabled={isAddingToLibrary} > <BookOpen className="w-2.5 h-2.5" /> </Button> )} </div> </div> {/ Game Info - Now has proper space to display all content /} <div className="space-y-0.5 px-0 py-1 flex-grow flex flex-col justify-start overflow-hidden"> {/ Base Game Label /} <p className="text-xs text-gray-400 uppercase tracking-wide font-medium truncate"> {game.isFree || game.price === 0 ? "Free Game" : "Base Game"} </p> {/ Game Title - with proper wrapping /} <h3 className="text-white font-medium text-xs leading-tight line-clamp-2 group-hover:text-blue-400 transition-colors"> {game.title} </h3> {/ Price - Always visible and properly spaced /} <div className="flex items-center gap-1 pt-1 flex-wrap text-xs"> <span className="text-white font-bold">{game.isFree || game.price === 0 ? "FREE" : `₹${game.price}`}</span> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/epic-slider.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, Star } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { toast } from "sonner" import { useRouter } from "next/navigation" import { DiscoverCard } from "@/components/discover-card" // Assuming DiscoverCard is imported interface Game { id: string title: string image: string price: number originalPrice?: number discount?: number rating?: number category: string isFree?: boolean } interface EpicSliderProps { games: Game[] title: string showViewAll?: boolean onViewAll?: () => void } export function EpicSlider({ games, title, showViewAll = false, onViewAll }: EpicSliderProps) { const [currentIndex, setCurrentIndex] = useState(0) const [isHovered, setIsHovered] = useState<string | null>(null) const sliderRef = useRef<HTMLDivElement>(null) const router = useRouter() const { addToCart } = useCartStore() const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlistStore() const itemsPerView = 5 const maxIndex = Math.max(0, games.length - itemsPerView) const gamesPerRow = 5 const totalPages = Math.ceil(games.length / gamesPerRow) const nextSlide = () => { setCurrentIndex((prev) => Math.min(prev + 1, totalPages - 1)) } const prevSlide = () => { setCurrentIndex((prev) => Math.max(prev - 1, 0)) } const handleGameClick = (game: Game) => { const params = new URLSearchParams({ gameId: game.id, title: game.title, price: game.price.toString(), image: game.image, isFree: (game.isFree || game.price === 0).toString(), }) router.push(`/payment?${params.toString()}`) } const handleAddToCart = (e: React.MouseEvent, game: Game) => { e.stopPropagation() addToCart({ id: game.id, title: game.title, price: game.price, image: game.image, quantity: 1, }) toast.success(`${game.title} added to cart!`) } const handleWishlistToggle = (e: React.MouseEvent, game: Game) => { e.stopPropagation() if (isInWishlist(game.id)) { removeFromWishlist(game.id) toast.success(`${game.title} removed from wishlist`) } else { addToWishlist({ id: game.id, title: game.title, price: game.price, image: game.image, category: game.category, }) toast.success(`${game.title} added to wishlist!`) } } const renderStars = (rating: number) => { return Array.from({ length: 5 }, (_, i) => ( <Star key={i} className={`w-3 h-3 ${i < Math.floor(rating) ? "fill-yellow-400 text-yellow-400" : "text-gray-400"}`} /> )) } if (!games || games.length === 0) { return null } return ( <div className="w-full flex justify-center px-4 sm:px-6 lg:px-8"> <div className="w-full max-w-[1200px] space-y-4"> {/ Header /} <div className="flex items-center justify-between"> <h2 className="text-lg sm:text-xl font-semibold text-white">{title}</h2> <div className="flex items-center gap-2"> {showViewAll && ( <Button variant="ghost" onClick={onViewAll} className="text-blue-400 hover:text-blue-300"> View All </Button> )} <div className="flex gap-1"> <Button variant="ghost" size="sm" onClick={prevSlide} disabled={currentIndex === 0} className="text-gray-400 hover:text-white disabled:opacity-50" > <ChevronLeft className="w-4 h-4" /> </Button> <Button variant="ghost" size="sm" onClick={nextSlide} disabled={currentIndex >= totalPages - 1} className="text-gray-400 hover:text-white disabled:opacity-50" > <ChevronRight className="w-4 h-4" /> </Button> </div> </div> </div> {/ Slider /} <div className="flex justify-center"> <div className="relative overflow-hidden w-full"> <div ref={sliderRef} className="flex transition-transform duration-300 ease-in-out gap-3 sm:gap-4" style={{ transform: `translateX(-${currentIndex 100}%)` }} role="region" aria-label={`${title} carousel`} > {Array.from({ length: totalPages }, (_, pageIndex) => ( <div key={pageIndex} className="flex gap-3 sm:gap-4 min-w-full"> {games.slice(pageIndex * gamesPerRow, (pageIndex + 1) * gamesPerRow).map((game) => ( <div key={game.id} className="flex-1 min-w-0"> <DiscoverCard game={game} onClick={() => handleGameClick(game)} /> </div> ))} </div> ))} </div> </div> </div> {/* Progress Indicators /} {games.length > gamesPerRow && ( <div className="flex justify-center gap-1 mt-4"> {Array.from({ length: totalPages }, (_, i) => ( <button key={i} onClick={() => setCurrentIndex(i)} className={`w-2 h-2 rounded-full transition-colors ${i === currentIndex ? "bg-blue-500" : "bg-gray-600"}`} /> ))} </div> )} </div> </div> ) } [V0_FILE]typescriptreact:file="components/hero-slider.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import Image from "next/image" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ShoppingCart, Heart } from "lucide-react" import { heroGames } from "@/lib/game-data" import { CheckoutLoadingModal } from "@/components/checkout-loading-modal" import { useIsMobile } from "@/hooks/use-mobile" interface HeroSliderProps { onDirectPurchase?: (game: any) => void } export function HeroSlider({ onDirectPurchase }: HeroSliderProps) { const [currentSlide, setCurrentSlide] = useState(0) const [prevSlide, setPrevSlide] = useState<number | null>(null) const [isTransitioning, setIsTransitioning] = useState(false) const animationKeyRef = useRef(0) const [showCheckoutModal, setShowCheckoutModal] = useState(false) const [checkoutUrl, setCheckoutUrl] = useState("") const autoSlideIntervalRef = useRef<NodeJS.Timeout | null>(null) const isMobile = useIsMobile() const router = useRouter() const scrollContainerRef = useRef<HTMLDivElement>(null) const hasMountedRef = useRef(false) const currentSlideRef = useRef(0) const isAnimatingRef = useRef(false) const currentGame = heroGames[currentSlide] const createSlug = (title: string) => { return title .trim() .toLowerCase() .replace(/[^\w\s-]/g, "") .replace(/\s+/g, "-") .replace(/-+/g, "-") } const clearTimers = useCallback(() => { if (autoSlideIntervalRef.current) { clearInterval(autoSlideIntervalRef.current) autoSlideIntervalRef.current = null } }, []) useEffect(() => { if (hasMountedRef.current) return hasMountedRef.current = true const startAutoplay = () => { autoSlideIntervalRef.current = setInterval(() => { if (isAnimatingRef.current) return isAnimatingRef.current = true setCurrentSlide((prev) => { const nextIndex = (prev + 1) % heroGames.length currentSlideRef.current = nextIndex setPrevSlide(prev) setIsTransitioning(true) setTimeout(() => { animationKeyRef.current += 1 setPrevSlide(null) setIsTransitioning(false) isAnimatingRef.current = false }, 600) return nextIndex }) }, 7000) } startAutoplay() return () => { if (autoSlideIntervalRef.current) { clearInterval(autoSlideIntervalRef.current) } } }, []) useEffect(() => { currentSlideRef.current = currentSlide }, [currentSlide]) useEffect(() => { if (isMobile && scrollContainerRef.current) { const container = scrollContainerRef.current const slideWidth = container.offsetWidth container.scrollTo({ left: currentSlide slideWidth, behavior: "smooth", }) } }, [currentSlide, isMobile]) const handleBuyNow = (e: React.MouseEvent) => { e.stopPropagation() if (onDirectPurchase) { onDirectPurchase(currentGame) } else { const params = new URLSearchParams({ gameId: currentGame.id.toString(), title: currentGame.title, price: currentGame.price.toString(), image: encodeURIComponent(currentGame.image || ""), }) setCheckoutUrl(`/payment?${params.toString()}`) setShowCheckoutModal(true) } } const handleSlideChange = (index: number) => { if (index === currentSlide || isTransitioning || isAnimatingRef.current) return isAnimatingRef.current = true setPrevSlide(currentSlide) setCurrentSlide(index) currentSlideRef.current = index setIsTransitioning(true) setTimeout(() => { animationKeyRef.current += 1 setPrevSlide(null) setIsTransitioning(false) isAnimatingRef.current = false }, 600) } const handleBannerClick = () => { const game = heroGames[currentSlide] const slug = createSlug(game.title) router.push(`/game/${slug}`) } const handleScroll = (e: React.UIEvent<HTMLDivElement>) => { if (!isMobile || isAnimatingRef.current) return const container = e.currentTarget const slideWidth = container.offsetWidth const newSlide = Math.round(container.scrollLeft / slideWidth) if (newSlide !== currentSlide && newSlide >= 0 && newSlide < heroGames.length) { setCurrentSlide(newSlide) } } return ( <div className="flex justify-center mb-8 px-4 md:px-0"> <style jsx>{` @keyframes progressFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .progress-bar { transform-origin: left; transform: scaleX(0); } .progress-bar.animating { animation: progressFill 7s linear forwards; } .fade-transition { transition: opacity 600ms ease-in-out; } .animate-in.fade-in { animation: fadeIn 600ms ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Added smooth scrolling behavior and improved scroll snap / .hero-scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .hero-slide { scroll-snap-align: start; scroll-snap-stop: always; } .no-scrollbar { -ms-overflow-style: none; / IE and Edge / scrollbar-width: none; / Firefox / } .no-scrollbar::-webkit-scrollbar { display: none; / Chrome, Safari and Opera / } `}</style> <div className="w-full max-w-[1400px] h-auto md:h-[550px] flex flex-col md:flex-row gap-4 rounded-[16px] overflow-hidden shadow-2xl relative"> <div ref={scrollContainerRef} onScroll={handleScroll} className={`flex-[3] lg:flex-[4] relative md:bg-gray-900 min-h-[350px] md:min-h-0 cursor-pointer group/main hero-scroll-container ${ isMobile ? "flex overflow-x-auto no-scrollbar" : "" }`} onClick={handleBannerClick} > {isMobile ? ( heroGames.map((game, index) => ( <div key={game.id} className="min-w-full relative h-full hero-slide" onClick={handleBannerClick}> <div className="relative w-full h-full overflow-hidden bg-gray-900"> <Image src={game.image || "/placeholder.svg"} alt={game.title} fill className="object-cover w-full h-full" priority={index === 0} sizes="100vw" /> <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent" /> <div className="relative h-full z-20 flex flex-col justify-end px-6 pb-6 pt-12 space-y-2"> <div className="flex flex-wrap gap-2"> {game.tags && game.tags .filter((tag) => tag !== "Open World" && tag !== "RPG") .slice(0, 3) .map((tag) => ( <Badge key={tag} variant="secondary" className="bg-white/15 text-white/90 text-[10px] px-2 py-0" > {tag} </Badge> ))} </div> <h1 className="text-lg font-bold text-white leading-tight">{game.title}</h1> <p className="text-[10px] text-white/70 line-clamp-2 font-light">{game.description}</p> <div className="flex items-center gap-3"> {game.price === 0 ? ( <Badge className="bg-green-600 text-white px-2 py-0.5 text-[10px]">Free</Badge> ) : ( <span className="text-sm font-semibold text-white">₹{game.price}</span> )} </div> <div className="flex flex-col items-start pt-1"> <Button size="sm" variant="ghost" className="text-white/60 hover:text-white p-0 h-auto font-medium text-xs" onClick={(e) => e.stopPropagation()} > <Heart className="w-3.5 h-3.5 mr-2" /> Add to Wishlist </Button> </div> </div> </div> </div> )) ) : ( <> {prevSlide !== null && ( <div className="absolute inset-0 z-0 w-full h-full bg-gray-900"> <Image src={heroGames[prevSlide].background || heroGames[prevSlide].image || "/placeholder.svg"} alt={heroGames[prevSlide].title} fill className="object-cover w-full h-full" priority sizes="100%" /> <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent" /> </div> )} <div className={`absolute inset-0 z-10 fade-transition ${isTransitioning ? "opacity-100" : "opacity-100"}`} > <div className={`absolute inset-0 transition-opacity duration-600 w-full h-full bg-gray-900 ${isTransitioning ? "animate-in fade-in" : ""}`} > <Image src={currentGame.background || currentGame.image || "/placeholder.svg"} alt={currentGame.title} fill className="object-cover w-full h-full" priority sizes="100%" /> <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/40 to-transparent" /> </div> </div> <div className={`relative h-full z-20 flex flex-col justify-end px-12 py-12 space-y-4 max-w-xl fade-transition ${isTransitioning ? "opacity-0" : "opacity-100"}`} > <div className="flex flex-wrap gap-2"> {currentGame.tags && currentGame.tags.slice(0, 3).map((tag) => ( <Badge key={tag} variant="secondary" className="bg-white/15 text-white/90 border-white/20 text-xs px-2 py-0.5" > {tag} </Badge> ))} </div> <h1 className="text-3xl font-bold text-white leading-tight max-w-md">{currentGame.title}</h1> <p className="text-sm text-white/80 line-clamp-2 font-normal leading-relaxed max-w-md"> {currentGame.description} </p> <div className="flex items-center gap-3"> {currentGame.price === 0 ? ( <Badge className="bg-green-600 text-white px-3 py-1 text-xs">Free</Badge> ) : ( <> {currentGame.originalPrice && ( <span className="text-xs text-gray-400 line-through">₹{currentGame.originalPrice}</span> )} <span className="text-xl font-bold text-white">₹{currentGame.price}</span> </> )} </div> <div className="flex items-center gap-4 pt-2"> <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-6 rounded-md text-base font-bold shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]" onClick={handleBuyNow} > <ShoppingCart className="w-5 h-5 mr-3" /> {currentGame.price === 0 ? "Play Now" : "Buy Now"} </Button> <Button size="lg" variant="outline" className="bg-white/10 border-white/20 text-white hover:bg-white/20 py-6 px-6 font-medium" onClick={(e) => e.stopPropagation()} > <Heart className="w-5 h-5 mr-2" /> Wishlist </Button> </div> </div> </> )} </div> <div className="hidden md:flex flex-1 bg-gray-950 flex-col relative group overflow-y-auto scroll-smooth no-scrollbar"> <div className="flex flex-col h-full"> {heroGames.map((game, index) => ( <button key={game.id} onClick={() => handleSlideChange(index)} className={`relative h-[130px] flex-shrink-0 overflow-hidden transition-all duration-300 border-l-4 flex flex-col justify-end p-3 ${ index === currentSlide ? "border-blue-600 bg-gray-800/60" : "border-gray-800 bg-gray-900 hover:bg-gray-850" }`} > <Image src={game.background || game.image || "/placeholder.svg"} alt={game.title} fill className="object-cover w-full h-full" sizes="120px" /> <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" /> <div key={`glow-${index}-${currentSlide}`} className={`progress-bar absolute inset-0 pointer-events-none ${ index === currentSlide ? "animating" : "" }`} style={{ background: "linear-gradient(to right, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15))", opacity: index === currentSlide ? 1 : 0, transition: "opacity 400ms ease-out", }} /> <div className="relative z-10"> <p className="text-white text-xs font-semibold line-clamp-2 leading-tight">{game.title}</p> </div> </button> ))} </div> </div> </div> <CheckoutLoadingModal isOpen={showCheckoutModal} redirectUrl={checkoutUrl} onOpenChange={setShowCheckoutModal} /> </div> ) } [V0_FILE]typescriptreact:file="components/feature-banners.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ExternalLink } from "lucide-react" import type { Game } from "@/types/game" interface FeatureBannersProps { onGameClick: (game: Game) => void trendingGames?: Game[] } export function FeatureBanners({ onGameClick, trendingGames = [] }: FeatureBannersProps) { const [currentBanner, setCurrentBanner] = useState(0) const defaultFeatureBanners: Game[] = [ { id: 1075, title: "Cyberpunk 2077: Phantom Liberty", price: 1999, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/292030/ad9240e088f953a84aee814034c50a6a92bf4516/header.jpg", category: "rpg", rating: 4.3, isNew: false, isTrending: true, description: "A futuristic RPG set in Night City", screenshots: [], discount: 0, originalPrice: 1999, }, { id: 1076, title: "The Witcher 3: Wild Hunt", price: 999, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/292030/ad9240e088f953a84aee814034c50a6a92bf4516/header.jpg?t=1749199563", category: "rpg", rating: 4.9, isNew: false, isTrending: true, description: "Embark on an adventure across a vast world", screenshots: [], discount: 50, originalPrice: 1999, }, { id: 1077, title: "Baldur's Gate 3", price: 2999, image: "https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/1086940/48a2fcbda8565bb45025e98fd8ebde8a7203f6a0/header.jpg?t=1748346026", category: "rpg", rating: 4.8, isNew: true, isTrending: true, description: "Forge your destiny in the Forgotten Realms", screenshots: [], discount: 0, originalPrice: 2999, }, ] const bannerGames = (trendingGames?.length ? trendingGames : defaultFeatureBanners).slice(0, 3) const uniqueTrendingGames = trendingGames ?.filter((game, index, self) => { // Remove duplicates by checking if this is the first occurrence return ( self.findIndex((g) => g.id === game.id) === index && // Exclude games already used as main banners !bannerGames.some((b) => b.id === game.id) ) }) .slice(0, 8) // Limit to 8 unique games for the right sidebar const handleSeeInShop = (game: Game) => { onGameClick(game) } return ( <section className="mb-10 py-7" aria-label="Featured Games"> {/ Split Layout: Hero Left, Game Cards Right /} <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 max-w-[1300px] mx-auto justify-items-center px-4 md:px-0"> {/ LEFT HALF - Main Hero Banner /} <div className="relative overflow-hidden rounded-lg transition-all duration-500 shadow-2xl h-72 sm:h-80 group max-w-[640px] w-full"> <img src={bannerGames[currentBanner]?.image || "/placeholder.svg"} alt={bannerGames[currentBanner]?.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> {/ Banner Text Overlay /} <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/30 to-transparent" /> <div className="absolute left-6 top-1/2 -translate-y-1/2 z-10 max-w-xs"> {bannerGames[currentBanner]?.discount ? ( <Badge className="bg-yellow-600 text-white mb-2 text-xs font-semibold"> {Math.round(bannerGames[currentBanner].discount)}% OFF </Badge> ) : bannerGames[currentBanner]?.isNew ? ( <Badge className="bg-green-600 text-white mb-2 text-xs font-semibold">NEW RELEASE</Badge> ) : null} <h2 className="text-2xl font-bold mb-1 text-white">{bannerGames[currentBanner]?.title}</h2> <p className="text-gray-300 text-xs mb-3 leading-relaxed line-clamp-2"> {bannerGames[currentBanner]?.description} </p> <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-1.5 text-xs font-semibold" onClick={() => handleSeeInShop(bannerGames[currentBanner])} > See in Shop <ExternalLink className="w-3 h-3 ml-2" /> </Button> </div> {/ Navigation Dots /} <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-20"> {bannerGames.map((_, index) => ( <button key={index} onClick={() => setCurrentBanner(index)} className={`w-2 h-2 rounded-full transition-all ${ index === currentBanner ? "bg-blue-600 scale-125" : "bg-gray-600/70 hover:bg-gray-500" }`} aria-label={`Go to banner ${index + 1}`} /> ))} </div> </div> </div> </section> ) } [V0_FILE]typescriptreact:file="components/free-game-comments.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Star, MessageSquare, ThumbsUp, User, Clock } from "lucide-react" import { toast } from "sonner" import { reviewService, supabase } from "@/lib/supabase" interface Comment { id: string user: string rating: number comment: string timestamp: string helpful: number verified: boolean status: string } interface FreeGameCommentsProps { gameId: string gameTitle: string } export function FreeGameComments({ gameId, gameTitle }: FreeGameCommentsProps) { const [comments, setComments] = useState<Comment[]>([]) const [newComment, setNewComment] = useState("") const [newRating, setNewRating] = useState(5) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) useEffect(() => { loadRealComments() }, [gameTitle]) const loadRealComments = async () => { setIsLoading(true) try { const realReviews = await reviewService.getReviewsByGameTitle(gameTitle) const formattedComments = realReviews.map((rev) => ({ id: rev.id, user: rev.user_name, rating: rev.rating, comment: rev.comment, timestamp: new Date(rev.created_at).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }), helpful: rev.helpful_count, verified: true, status: rev.status, })) setComments(formattedComments) } catch (error) { console.error("Error loading comments:", error) setComments([]) } finally { setIsLoading(false) } } const handleSubmitComment = async () => { if (!newComment.trim()) { toast.error("Please write a comment") return } setIsSubmitting(true) try { const { data: { user }, } = await supabase.auth.getUser() await reviewService.createReview({ game_title: gameTitle, user_id: user?.id || null, user_name: user?.user_metadata?.username || "Guest User", rating: newRating, comment: newComment.trim(), status: "pending", }) setNewComment("") setNewRating(5) toast.success("Review submitted! It will appear after approval.") } catch (error) { console.error("Failed to post comment:", error) toast.error("Failed to post review") } finally { setIsSubmitting(false) } } const averageRating = comments.length > 0 ? (comments.reduce((sum, comment) => sum + comment.rating, 0) / comments.length).toFixed(1) : "0.0" return ( <Card className="bg-[#1a1a1a] border-slate-800/50 shadow-2xl rounded-2xl overflow-hidden"> <CardHeader className="border-b border-slate-800/50 bg-slate-900/20 px-7 py-5"> <div className="flex items-center justify-between"> <div className="space-y-0.5"> <CardTitle className="text-lg font-bold text-white flex items-center gap-3"> <MessageSquare className="w-6 h-6 text-emerald-400" /> Community Reviews </CardTitle> <p className="text-slate-400 text-xs">Real feedback from our gamers</p> </div> <div className="flex items-center gap-4"> <div className="bg-slate-800/50 px-4 py-2 rounded-xl flex items-center gap-2 border border-slate-700/50"> <Star className="w-5 h-5 text-yellow-400 fill-current" /> <span className="text-white font-black text-lg">{averageRating}</span> <span className="text-slate-500 text-xs font-bold uppercase tracking-wider"> ({comments.length} {comments.length === 1 ? "review" : "reviews"}) </span> </div> </div> </div> </CardHeader> <CardContent className="px-7 py-7 space-y-8"> <div className="bg-[#121212] border border-slate-800/50 rounded-2xl p-5 shadow-inner"> <h4 className="text-white font-bold mb-3 flex items-center gap-2"> <Star className="w-4 h-4 text-emerald-400" /> Write a Review </h4> <div className="flex flex-col md:flex-row gap-5 items-start"> <div className="w-full md:w-auto space-y-2"> <span className="text-slate-400 text-xs font-bold uppercase tracking-widest">Your Rating</span> <div className="flex gap-1.5 bg-black/20 p-2 rounded-lg border border-slate-800/50"> {[1, 2, 3, 4, 5].map((star) => ( <button key={star} onClick={() => setNewRating(star)} className="transition-all hover:scale-110 active:scale-95" > <Star className={`w-6 h-6 ${star <= newRating ? "text-yellow-400 fill-current drop-shadow-[0_0_8px_rgba(250,204,21,0.4)]" : "text-slate-700"}`} /> </button> ))} </div> </div> <div className="flex-1 w-full space-y-3"> <Textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} placeholder="Share your experience with this game..." className="bg-[#0f0f0f] border-slate-800 text-white placeholder-slate-600 min-h-[120px] rounded-xl focus:ring-emerald-500/20 focus:border-emerald-500/50 resize-none" maxLength={500} /> <div className="flex items-center justify-between"> <span className="text-slate-600 text-[10px] font-bold uppercase tracking-widest"> {newComment.length}/500 chars </span> <Button onClick={handleSubmitComment} disabled={isSubmitting || !newComment.trim()} className="bg-emerald-500 hover:bg-emerald-600 text-white font-bold px-8 rounded-xl h-11 transition-all active:scale-95 shadow-lg shadow-emerald-500/10" > {isSubmitting ? ( <div className="flex items-center gap-2"> <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> Posting... </div> ) : ( "Post Review" )} </Button> </div> </div> </div> </div> {/ Comments List /} <div className="space-y-5"> {isLoading ? ( <div className="text-center py-12 space-y-4"> <div className="w-10 h-10 border-2 border-slate-800 border-t-emerald-400 rounded-full animate-spin mx-auto"></div> <p className="text-slate-500 font-bold text-xs uppercase tracking-widest">Fetching reviews</p> </div> ) : comments.length === 0 ? ( <div className="text-center py-12 bg-[#121212] rounded-2xl border border-dashed border-slate-800"> <MessageSquare className="w-12 h-12 text-slate-800 mx-auto mb-4" /> <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">No reviews yet</p> <p className="text-slate-600 text-sm mt-1">Be the first to share your thoughts!</p> </div> ) : ( <div className="grid gap-5"> {comments.map((comment) => ( <div key={comment.id} className="bg-[#121212] border border-slate-800/50 rounded-2xl p-5 transition-all hover:border-slate-700/50 group" > <div className="flex items-start justify-between mb-4"> <div className="flex items-center gap-4"> <div className="w-12 h-12 bg-slate-800 rounded-2xl flex items-center justify-center border border-slate-700/50 text-emerald-400 group-hover:bg-emerald-500 group-hover:text-white transition-all duration-300"> <User className="w-6 h-6" /> </div> <div> <div className="flex items-center gap-2"> <span className="text-white font-bold">{comment.user}</span> {comment.verified && ( <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20 text-[10px] font-black uppercase px-2 py-0.5 rounded-md"> Verified </Badge> )} </div> <div className="flex items-center gap-3 mt-1"> <div className="flex gap-0.5"> {[1, 2, 3, 4, 5].map((star) => ( <Star key={star} className={`w-3 h-3 ${ star <= comment.rating ? "text-yellow-400 fill-current" : "text-slate-800" }`} /> ))} </div> <span className="text-slate-700 text-[10px]">•</span> <div className="flex items-center gap-1.5 text-slate-500 font-bold text-[10px] uppercase tracking-wider"> <Clock className="w-3 h-3" /> {comment.timestamp} </div> </div> </div> </div> </div> <p className="text-slate-300 text-sm leading-relaxed font-medium bg-black/20 p-4 rounded-xl border border-slate-800/30"> {comment.comment} </p> <div className="flex items-center gap-4 mt-4 pt-4 border-t border-slate-800/50"> <button className="flex items-center gap-2 text-slate-500 hover:text-emerald-400 transition-colors text-[10px] font-black uppercase tracking-widest group/btn"> <ThumbsUp className="w-4 h-4 transition-transform group-active/btn:scale-125" /> Helpful ({comment.helpful}) </button> </div> </div> ))} </div> )} </div> {comments.length > 5 && ( <div className="text-center pt-3"> <Button variant="outline" className="border-slate-800 text-slate-400 hover:text-white hover:bg-slate-800 bg-transparent rounded-xl px-8 font-bold text-xs uppercase tracking-widest transition-all" > View All Reviews </Button> </div> )} </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="components/wizard-specials-section.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { EpicSectionGrid } from "@/components/epic-section-grid" import { WizardNewReleasesBanners } from "@/components/wizard-new-releases-banners" import type { Game } from "@/types/game" import { allGames } from "@/lib/game-data" interface WizardSpecialsSectionProps { onGameClick?: (game: Game) => void } export function WizardSpecialsSection({ onGameClick }: WizardSpecialsSectionProps) { const [wizardGames, setWizardGames] = useState<Game[]>([]) const [loading, setLoading] = useState(true) useEffect(() => { const loadWizardGames = async () => { try { const specialGames = allGames.filter((game) => game.category === "Wizard's Specials") setWizardGames(specialGames) } catch (error) { console.error("Failed to load wizard special games:", error) } finally { setLoading(false) } } loadWizardGames() }, []) if (loading) { return <EpicSectionGrid title="Wizard's Specials" games={[]} loading /> } if (wizardGames.length === 0) { return null } return ( <EpicSectionGrid title="Wizard's Specials" description="Hand-picked Premium Games at Great Prices" games={wizardGames} onGameClick={onGameClick} bannerComponent={<WizardNewReleasesBanners />} /> ) } [V0_FILE]typescriptreact:file="components/epic-game-detail-modal.tsx" isMerged="true" "use client" import type React from "react" import { supabase, userWalletService } from "@/lib/supabase" import { useState, useRef, useEffect } from "react" import Image from "next/image" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { X, Star, ChevronLeft, ChevronRight, Calendar, User, Building, MessageSquare, Gamepad2 } from "lucide-react" import { useCartStore } from "@/lib/cart-store" import { useWishlistStore } from "@/lib/wishlist-store" import { allGames } from "@/lib/game-data" import { toast } from "sonner" import { GameDetailSkeleton } from "@/components/game-detail-skeleton" import type { Game } from "@/types/game" import type { BrowseGame } from "@/lib/browse-data" import { CheckoutLoadingModal } from "@/components/checkout-loading-modal" interface EpicGameDetailModalProps { game: Game | BrowseGame onClose: () => void onGameChange?: (game: Game | BrowseGame) => void isLoading?: boolean } interface Review { id: number reviewer: string rating: number hours: number helpful: number notHelpful: number date: string text: string avatar: string userHelpful?: boolean } const fakeReviews: Review[] = [ { id: 1, reviewer: "ShadowHunter92", rating: 5, hours: 45, helpful: 234, notHelpful: 12, date: "2 weeks ago", text: "Absolutely incredible game! The combat system is fluid and engaging. The story kept me hooked throughout. Highly recommend!", avatar: "🎮", }, { id: 2, reviewer: "CrimsonBlade", rating: 4, hours: 38, helpful: 189, notHelpful: 8, date: "3 weeks ago", text: "Really enjoyed this one. Some minor performance issues but overall a solid experience. Worth the purchase.", avatar: "⚔️", }, { id: 3, reviewer: "PhantomNight", rating: 5, hours: 67, helpful: 456, notHelpful: 18, date: "1 month ago", text: "Best game I've played this year. The graphics are stunning, gameplay is smooth, and the story is engaging from start to finish.", avatar: "👻", }, { id: 4, reviewer: "IceWolf23", rating: 4, hours: 32, helpful: 123, notHelpful: 5, date: "1 month ago", text: "Great game overall. Takes about 40 hours to complete. A bit short on content but the quality is outstanding.", avatar: "❄️", }, { id: 5, reviewer: "PhantomNinja", avatar: "🥷", rating: 5, hours: 120, text: "This game is an absolute masterpiece. Every aspect is polished to perfection. The attention to detail is mind-blowing. Definitely worth every penny!", helpful: 456, notHelpful: 8, date: "1 month ago", }, { id: 6, reviewer: "SilentAssassin", avatar: "🗡️", rating: 4, hours: 87, text: "Great game overall, but some performance issues on higher settings. Still, the story and gameplay make up for it. Highly recommended!", helpful: 234, notHelpful: 15, date: "2 months ago", }, { id: 7, reviewer: "ShadowRunner", avatar: "👤", rating: 5, hours: 200, text: "One of the best games I've played in years. The world is incredibly immersive and engaging. Can't wait for DLC content!", helpful: 678, notHelpful: 5, date: "3 months ago", }, { id: 8, reviewer: "DarkVoyager", avatar: "🌙", rating: 3, hours: 45, text: "Good game but not my cup of tea. The difficulty spikes are frustrating at times. Still, it's a solid experience for those who enjoy challenging gameplay.", helpful: 156, notHelpful: 89, date: "3 months ago", }, ] const ReviewCard = ({ review, onHelpful, onNotHelpful, }: { review: Review onHelpful: (id: number) => void onNotHelpful: (id: number) => void }) => { const [helpful, setHelpful] = useState(review.helpful) const [notHelpful, setNotHelpful] = useState(review.notHelpful) const [userHelpful, setUserHelpful] = useState<"helpful" | "not_helpful" | null>(null) const handleHelpful = () => { if (userHelpful === "helpful") { setHelpful(helpful - 1) setUserHelpful(null) } else { if (userHelpful === "not_helpful") { setNotHelpful(notHelpful - 1) } setHelpful(helpful + 1) setUserHelpful("helpful") } onHelpful(review.id) } const handleNotHelpful = () => { if (userHelpful === "not_helpful") { setNotHelpful(notHelpful - 1) setUserHelpful(null) } else { if (userHelpful === "helpful") { setHelpful(helpful - 1) } setNotHelpful(notHelpful + 1) setUserHelpful("not_helpful") } onNotHelpful(review.id) } return ( <div className="bg-gray-800/30 border border-gray-700 rounded-lg p-4"> <div className="flex items-start justify-between mb-3"> <div className="flex items-center gap-3"> <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-lg"> {review.avatar} </div> <div> <p className="text-white font-semibold">{review.reviewer}</p> <div className="flex items-center gap-2"> <div className="flex gap-0.5"> {[...Array(5)].map((_, i) => ( <Star key={i} className={`w-3 h-3 ${i < review.rating ? "text-yellow-400 fill-yellow-400" : "text-gray-600"}`} /> ))} </div> <span className="text-gray-400 text-sm">{review.hours}h played</span> </div> </div> </div> <span className="text-gray-500 text-xs">{review.date}</span> </div> <p className="text-gray-300 text-sm mb-4">{review.text}</p> <div className="flex items-center gap-4"> <Button variant="ghost" size="sm" onClick={handleHelpful} className={`text-gray-400 hover:text-green-400 text-xs gap-1 ${ userHelpful === "helpful" ? "text-green-400" : "" }`} > 👍 Helpful ({helpful}) </Button> <Button variant="ghost" size="sm" onClick={handleNotHelpful} className={`text-gray-400 hover:text-red-400 text-xs gap-1 ${ userHelpful === "not_helpful" ? "text-red-400" : "" }`} > 👎 Not helpful ({notHelpful}) </Button> </div> </div> ) } const getSuggestedGamesByTags = (currentGame: Game, allGames: Game[], count = 3): Game[] => { const currentTags = currentGame.tags || [] // Calculate match score for each game const gameScores = allGames .filter((game) => game.id !== currentGame.id) .map((game) => { const gameTags = game.tags || [] const matchedTags = gameTags.filter((tag) => currentTags.includes(tag)).length return { game, score: matchedTags } }) .filter((item) => item.score > 0) .sort((a, b) => b.score - a.score) .slice(0, count) // If not enough matches by tags, fill with random games if (gameScores.length < count) { const remainingGames = allGames .filter((game) => game.id !== currentGame.id && !gameScores.find((s) => s.game.id === game.id)) .slice(0, count - gameScores.length) return [...gameScores.map((s) => s.game), ...remainingGames] } return gameScores.map((s) => s.game) } const SuggestedGamesSection = ({ currentGame }: { currentGame: Game }) => { const suggestedGames = getSuggestedGamesByTags(currentGame, allGames, 3) return ( <div className="mb-12"> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">Suggested Games</h2> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> {suggestedGames.map((game) => ( <div key={game.id} className="group cursor-pointer"> <div className="relative mb-3 overflow-hidden rounded-lg"> <Image src={game.image || "/placeholder.svg?height=420&width=280&query=game cover"} alt={game.title} width={280} height={420} className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-300" /> </div> <h3 className="text-white text-sm font-semibold truncate group-hover:text-blue-400">{game.title}</h3> <div className="flex items-center justify-between mt-2"> <div className="flex items-center gap-1"> <Star className="w-3 h-3 text-yellow-400 fill-yellow-400" /> <span className="text-gray-400 text-xs">{game.rating || "N/A"}</span> </div> {game.isFree ? ( <span className="text-green-400 text-xs font-semibold">FREE</span> ) : ( <span className="text-white text-xs font-semibold">₹{game.price}</span> )} </div> </div> ))} </div> </div> ) } const SystemRequirementsSection = ({ game }: { game: Game }) => { if (!game.systemRequirements) return null const { minimum, recommended } = game.systemRequirements return ( <div className="mb-12"> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">System Requirements</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {/ Minimum Requirements /} <Card className="bg-gray-800/50 border-gray-700"> <CardContent className="p-6"> <h3 className="text-white font-semibold text-lg mb-4">Minimum</h3> <div className="space-y-3 text-sm"> <div> <p className="text-gray-400">OS</p> <p className="text-white">{minimum.os}</p> </div> <div> <p className="text-gray-400">Processor</p> <p className="text-white">{minimum.processor}</p> </div> <div> <p className="text-gray-400">Memory</p> <p className="text-white">{minimum.memory}</p> </div> <div> <p className="text-gray-400">Graphics</p> <p className="text-white">{minimum.graphics}</p> </div> <div> <p className="text-gray-400">Storage</p> <p className="text-white">{minimum.storage}</p> </div> </div> </CardContent> </Card> {/ Recommended Requirements /} <Card className="bg-blue-900/20 border-blue-500/30"> <CardContent className="p-6"> <h3 className="text-white font-semibold text-lg mb-4">Recommended</h3> <div className="space-y-3 text-sm text-gray-300"> {game.systemRequirements.recommended?.os && ( <div> <span className="text-gray-400">OS:</span> <p className="text-white">{game.systemRequirements.recommended.os}</p> </div> )} {game.systemRequirements.recommended?.processor && ( <div> <span className="text-gray-400">Processor:</span> <p className="text-white">{game.systemRequirements.recommended.processor}</p> </div> )} {game.systemRequirements.recommended?.memory && ( <div> <span className="text-gray-400">Memory:</span> <p className="text-white">{game.systemRequirements.recommended.memory}</p> </div> )} {game.systemRequirements.recommended?.graphics && ( <div> <span className="text-gray-400">Graphics:</span> <p className="text-white">{game.systemRequirements.recommended.graphics}</p> </div> )} {game.systemRequirements.recommended?.storage && ( <div> <span className="text-gray-400">Storage:</span> <p className="text-white">{game.systemRequirements.recommended.storage}</p> </div> )} </div> </CardContent> </Card> </div> </div> ) } const SuggestedGames = ({ currentGameId }: { currentGameId: number }) => { const suggestedGames = allGames.filter((g) => g.id !== currentGameId).slice(0, 4) return ( <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> {suggestedGames.map((game) => ( <div key={game.id} className="bg-gray-900 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-transform duration-200 cursor-pointer" > <div className="relative w-full aspect-video"> <Image src={game.image || "/placeholder.svg"} alt={game.title} fill className="object-cover" /> </div> <div className="p-3"> <p className="text-white font-semibold text-sm truncate">{game.title}</p> <p className="text-blue-400 font-bold mt-2">${game.price}</p> </div> </div> ))} </div> ) } export function EpicGameDetailModal({ game, onClose, onGameChange, isLoading = false }: EpicGameDetailModalProps) { const [selectedScreenshot, setSelectedScreenshot] = useState<string | null>(null) const [selectedEdition, setSelectedEdition] = useState("standard") const [reviews, setReviews] = useState<Review[]>(fakeReviews) const [showAllReviews, setShowAllReviews] = useState(false) const [newReviewText, setNewReviewText] = useState("") const [newReviewRating, setNewReviewRating] = useState(5) const screenshotCarouselRef = useRef<HTMLDivElement>(null) const [showCheckoutModal, setShowCheckoutModal] = useState(false) const [checkoutUrl, setCheckoutUrl] = useState("") const { addToCart, getTotalItems } = useCartStore() const { addItem: addToWishlist, removeItem: removeFromWishlist, isInWishlist } = useWishlistStore() const isWishlisted = isInWishlist(game.id) const [user, setUser] = useState<{ id: string } | null>(null) const [userTokenBalance, setUserTokenBalance] = useState<number | null>(null) const [tokensToEarn, setTokensToEarn] = useState<number>(0) const [showSkeleton, setShowSkeleton] = useState(true) const [fadeOut, setFadeOut] = useState(false) useEffect(() => { setSelectedScreenshot(null) setSelectedEdition("standard") setShowAllReviews(false) setReviews(fakeReviews) const fetchUserAndTokens = async () => { const { data } = await supabase.auth.getSession() if (data.session?.user) { setUser(data.session.user as any) try { const wallet = await userWalletService.getUserWallet(data.session.user.id) setUserTokenBalance(wallet?.wizard_tokens || 0) } catch (error) { console.error("Error fetching wallet:", error) } } } fetchUserAndTokens() setTokensToEarn(Math.floor(game.price / 10)) setShowSkeleton(true) setFadeOut(false) const skeletonTimer = setTimeout(() => { setFadeOut(true) setTimeout(() => { setShowSkeleton(false) }, 300) // Fade-out duration }, 2000) // Show skeleton for 2 seconds return () => clearTimeout(skeletonTimer) }, [game.id, game.price]) const screenshots = game.screenshots && game.screenshots.length > 0 ? game.screenshots : null const scrollCarousel = (ref: React.RefObject<HTMLDivElement>, direction: "left" | "right") => { if (ref.current) { const scrollAmount = 300 const currentScroll = ref.current.scrollLeft const targetScroll = direction === "left" ? currentScroll - scrollAmount : currentScroll + scrollAmount ref.current.scrollTo({ left: targetScroll, behavior: "smooth", }) } } const handleSubmitReview = () => { if (newReviewText.trim() === "") return const newReview: Review = { id: Math.max(...reviews.map((r) => r.id), 0) + 1, reviewer: "You", rating: newReviewRating, hours: 10, helpful: 0, notHelpful: 0, date: "just now", text: newReviewText, avatar: "👤", } setReviews([newReview, ...reviews]) setNewReviewText("") setNewReviewRating(5) } const displayedReviews = showAllReviews ? reviews : reviews.slice(0, 3) const hasMoreReviews = reviews.length > 3 const handleHelpful = (reviewId: number) => { // This is handled in the ReviewCard component } const handleNotHelpful = (reviewId: number) => { // This is handled in the ReviewCard component } const systemRequirements = game.systemRequirements || { minimum: { os: "Not specified", processor: "Not specified", memory: "Not specified", graphics: "Not specified", storage: "Not specified", }, recommended: { os: "Not specified", processor: "Not specified", memory: "Not specified", graphics: "Not specified", storage: "Not specified", }, } const handleBuyNow = () => { const params = new URLSearchParams({ gameId: game.id.toString(), title: game.title, price: game.price.toString(), image: encodeURIComponent(game.image || ""), }) setCheckoutUrl(`/payment?${params.toString()}`) setShowCheckoutModal(true) } const handleAddToCart = () => { addToCart({ id: game.id, title: game.title, price: game.price, image: game.image, originalPrice: game.originalPrice, discount: game.discount, quantity: 1, }) toast.success(`${game.title} added to cart!`, { description: `Cart now has ${getTotalItems() + 1} item(s)`, }) } const handleWishlistToggle = () => { if (isWishlisted) { removeFromWishlist(game.id) toast.success(`${game.title} removed from wishlist`) } else { addToWishlist({ id: game.id, title: game.title, price: game.price, image: game.image, originalPrice: game.originalPrice, discount: game.discount, }) toast.success(`${game.title} added to wishlist`) } } const handleGameClick = (selectedGame: Game) => { if (onGameChange) { onGameChange(selectedGame) } } if (showSkeleton) { return ( <div className={`transition-opacity duration-300 ${fadeOut ? "opacity-0" : "opacity-100"}`}> <GameDetailSkeleton /> </div> ) } return ( <div className="fixed inset-0 bg-gradient-to-br from-[#1a1a1a] via-[#121212] to-[#0f0f0f] backdrop-blur-sm z-50 overflow-y-auto"> {/ Header /} <div className="sticky top-0 z-10 bg-gradient-to-b from-[#1a1a1a]/95 to-[#121212]/80 backdrop-blur-sm border-b border-gray-700/50"> <div className="container mx-auto px-4 py-4 flex items-center justify-between"> <div className="flex items-center gap-4"> <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> <h1 className="text-xl font-bold text-white">{game.title}</h1> </div> </div> </div> <div className="container mx-auto px-4 py-8"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12"> {/ Left: Video Player & Screenshots Section /} <div className="lg:col-span-2"> {/ Selected Screenshot Display /} {selectedScreenshot ? ( <div className="relative w-full mb-8 bg-black rounded-lg overflow-hidden" style={{ aspectRatio: "16/9" }}> <Image src={selectedScreenshot || "/placeholder.svg"} alt="Selected screenshot" fill className="object-cover" priority /> <Button onClick={() => setSelectedScreenshot(null)} className="absolute top-2 right-2 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 z-10" > ✕ </Button> </div> ) : ( <> {/ Video Player /} {game.trailer_url && ( <div className="relative w-full mb-8 bg-black rounded-lg overflow-hidden" style={{ aspectRatio: "16/9" }} > {game.trailer_url.includes("youtube.com") || game.trailer_url.includes("youtu.be") ? ( <iframe width="100%" height="100%" src={ (game.trailer_url.includes("youtube.com") ? game.trailer_url.replace("watch?v=", "embed/") : game.trailer_url.replace("youtu.be/", "youtube.com/embed/")) + "?autoplay=1&mute=1&loop=1" } frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="w-full h-full" /> ) : ( <video src={game.trailer_url} controls autoPlay loop muted playsInline className="w-full h-full object-cover" /> )} </div> )} </> )} {/ Screenshots Carousel /} {screenshots && screenshots.length > 0 && ( <div className="relative mb-8"> <div className="flex items-center gap-2 mb-4"> <h3 className="text-white font-semibold">Screenshots</h3> <div className="flex gap-2 ml-auto"> <Button variant="ghost" size="sm" onClick={() => scrollCarousel(screenshotCarouselRef, "left")} className="text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => scrollCarousel(screenshotCarouselRef, "right")} className="text-gray-400 hover:text-white" > <ChevronRight className="w-4 h-4" /> </Button> </div> </div> <div ref={screenshotCarouselRef} className="flex gap-3 overflow-x-auto pb-2 scrollbar-hide no-scrollbar min-h-28 items-center justify-center" > {screenshots.map((screenshot, index) => ( <div key={index} className="flex-shrink-0 w-40 h-24 rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setSelectedScreenshot(screenshot)} > <Image src={screenshot || "/placeholder.svg"} alt={`Screenshot ${index}`} width={160} height={96} className="w-full h-full object-cover" /> </div> ))} </div> </div> )} {/ Game Info - About This Game Section /} <div className="space-y-6 mb-16"> <div> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">About This Game</h2> <div className="space-y-6"> <div> <h1 className="text-4xl font-bold text-white mb-4">{game.title}</h1> <div className="flex flex-wrap gap-2 mb-4"> {game.tags?.map((tag) => ( <Badge key={tag} variant="secondary" className="bg-gray-800 text-gray-300 hover:bg-gray-700"> {tag} </Badge> ))} </div> {game.rating && ( <div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-1"> <Star className="w-4 h-4 text-yellow-400 fill-current" /> <span className="text-white font-medium">{game.rating}</span> </div> <span className="text-gray-400">• Very Positive Reviews</span> </div> )} </div> <div> <p className="text-gray-300 leading-relaxed"> {game.description || `Experience the ultimate gaming adventure with ${game.title}. This critically acclaimed title offers hours of immersive gameplay, stunning visuals, and an unforgettable story that will keep you engaged from start to finish.`} </p> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h4 className="text-lg font-semibold text-white mb-3">Game Details</h4> <div className="space-y-2 text-sm"> {game.releaseDate && ( <div className="flex items-center gap-2"> <Calendar className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Release Date:</span> <span className="text-white">{game.releaseDate}</span> </div> )} {game.developer && ( <div className="flex items-center gap-2"> <User className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Developer:</span> <span className="text-white">{game.developer}</span> </div> )} {game.publisher && ( <div className="flex items-center gap-2"> <Building className="w-4 h-4 text-gray-400" /> <span className="text-gray-400">Publisher:</span> <span className="text-white">{game.publisher}</span> </div> )} </div> </div> {game.features && game.features.length > 0 && ( <div> <h4 className="text-lg font-semibold text-white mb-3">Features</h4> <div className="space-y-1 text-sm"> {game.features.map((feature) => ( <div key={feature} className="flex items-center gap-2 text-gray-300"> <Gamepad2 className="w-4 h-4 text-blue-400" /> {feature} </div> ))} </div> </div> )} </div> </div> </div> {/ System Requirements /} {game.systemRequirements && <SystemRequirementsSection game={game} />} </div> {/ Reviews Section /} <div className="mb-12"> <h2 className="text-3xl font-bold text-white mb-6 pb-3 border-b-2 border-blue-500">Reviews</h2> <div className="mb-8"> <div className="flex items-center gap-4 mb-8 p-4 bg-gray-800/50 rounded-lg border border-gray-700"> <div className="text-4xl font-bold text-white">4.5</div> <div> <div className="flex items-center gap-1 mb-1"> {[...Array(5)].map((_, i) => ( <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" /> ))} </div> <p className="text-gray-400 text-sm">{reviews.length} reviews</p> </div> </div> <div className="bg-gray-800/30 border border-gray-700 rounded-lg p-4 mb-8"> <div className="mb-3"> <label className="text-white text-sm font-semibold block mb-2">Your Rating:</label> <div className="flex gap-1"> {[1, 2, 3, 4, 5].map((star) => ( <button key={star} onClick={() => setNewReviewRating(star)} className="transition-transform hover:scale-110" > <Star className={`w-5 h-5 ${ star <= newReviewRating ? "text-yellow-400 fill-yellow-400" : "text-gray-600" }`} /> </button> ))} </div> </div> <textarea placeholder="Write your review here..." value={newReviewText} onChange={(e) => setNewReviewText(e.target.value)} className="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-blue-500" rows={3} /> <Button onClick={handleSubmitReview} className="mt-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold" > <MessageSquare className="w-4 h-4 mr-2" /> Submit Review </Button> </div> </div> {/ Reviews List /} <div className="space-y-4"> {displayedReviews.map((review) => ( <ReviewCard key={review.id} review={review} onHelpful={handleHelpful} onNotHelpful={handleNotHelpful} /> ))} </div> {hasMoreReviews && ( <Button onClick={() => setShowAllReviews(!showAllReviews)} className="w-full mt-6 bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3" > {showAllReviews ? "Show Less" : `Show More Reviews (${reviews.length - 3} more)`} </Button> )} </div> {/ Suggested Games Section /} <SuggestedGamesSection currentGame={game as Game} /> </div> {/ Right: Buy Panel /} <div className="lg:col-span-1 order-first lg:order-last"> <div className="sticky top-24 space-y-4"> {/ Rating Badge /} <div className="flex items-center gap-2 bg-gray-800/50 rounded-lg p-3"> <div className="w-10 h-10 rounded flex items-center justify-center bg-gray-900 text-white font-bold"> {game.ageRating || "T"} </div> <div> <p className="text-white font-semibold text-sm">{game.ageRating || "Teen"}</p> <p className="text-gray-400 text-xs">{game.tags?.[0] || "Game"}</p> </div> </div> {/ Edition Selector /} <div> <label className="text-gray-400 text-sm font-semibold block mb-2">Edition</label> <select value={selectedEdition} onChange={(e) => setSelectedEdition(e.target.value)} className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500" > <option value="standard">Standard Edition</option> <option value="deluxe">Deluxe Edition</option> <option value="gold">Gold Edition</option> <option value="ultimate">Ultimate Edition</option> <option value="legacy">Legacy Edition</option> <option value="enhanced">Enhanced Edition</option> </select> </div> {/ Price /} <div> <p className="text-gray-400 text-xs font-semibold mb-1">Price</p> <div className="flex items-center gap-2"> <p className="text-white text-3xl font-bold">₹{game.price}</p> {game.originalPrice && <p className="text-gray-500 text-sm line-through">₹{game.originalPrice}</p>} </div> </div> {/ Availability /} {game.comingSoon ? ( <p className="text-orange-400 text-sm font-semibold">Coming Soon</p> ) : ( <p className="text-green-400 text-sm font-semibold">Available on PC</p> )} {/ Buy Button /} <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3" onClick={handleBuyNow} > Buy Now </Button> {/ Add to Cart /} <Button onClick={handleAddToCart} className="w-full bg-gray-800 hover:bg-gray-700 text-white font-semibold py-3" > Add To Cart </Button> {/ Add to Wishlist /} <Button onClick={handleWishlistToggle} className={`w-full font-semibold py-3 ${ isWishlisted ? "bg-red-600 hover:bg-red-700 text-white" : "bg-gray-800 hover:bg-gray-700 text-white" }`} > ❤️ {isWishlisted ? "Remove from Wishlist" : "Add to Wishlist"} </Button> {/ Game Details /} <div className="bg-gray-800/40 border border-gray-700/50 rounded-lg p-4 space-y-3"> <h3 className="text-white font-semibold text-sm">Game Details</h3> <div className="space-y-2 text-xs"> {game.releaseDate && ( <div className="flex justify-between items-start"> <span className="text-gray-400">Release Date:</span> <span className="text-white font-medium">{game.releaseDate}</span> </div> )} {game.developer && ( <div className="flex justify-between items-start"> <span className="text-gray-400">Developer:</span> <span className="text-white font-medium text-right">{game.developer}</span> </div> )} {game.publisher && ( <div className="flex justify-between items-start"> <span className="text-gray-400">Publisher:</span> <span className="text-white font-medium text-right">{game.publisher}</span> </div> )} {game.tags && game.tags.length > 0 && ( <div className="flex justify-between items-start"> <span className="text-gray-400">Genre:</span> <span className="text-white font-medium text-right">{game.tags.join(", ")}</span> </div> )} </div> </div> {/ Wizard Tokens - Earn Display ONLY /} <div className="bg-gradient-to-br from-cyan-900/30 to-purple-900/30 border border-cyan-500/30 rounded-lg p-4"> <div className="flex items-center justify-between"> <div> <p className="text-white font-semibold text-sm flex items-center gap-2">🪙 Wizard Tokens</p> <p className="text-cyan-400 text-xs font-semibold mt-1"> You will earn {tokensToEarn} tokens after purchase </p> </div> <div className="text-right"> <div className="text-cyan-400 font-bold text-lg">{tokensToEarn}</div> <p className="text-gray-400 text-xs">tokens</p> </div> </div> </div> </div> </div> </div> </div> <CheckoutLoadingModal isOpen={showCheckoutModal} redirectUrl={checkoutUrl} onOpenChange={setShowCheckoutModal} /> </div> ) } [V0_FILE]typescript:file="app/api/purchase/tokens/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" export async function POST(req: NextRequest) { try { const cookieStore = await cookies() const supabaseServiceRole = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) // Create anon client for auth const supabaseAnon = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) // Get authenticated user const { data: { user }, } = await supabaseAnon.auth.getUser() if (!user) { return NextResponse.json({ error: "Unauthorized - User not authenticated" }, { status: 401 }) } // Parse request body const { items, gameData } = await req.json() if (!items || !Array.isArray(items) || items.length === 0) { return NextResponse.json({ error: "Invalid items data" }, { status: 400 }) } // Calculate total price const totalPrice = items.reduce((sum: number, item: any) => sum + item.price (item.quantity || 1), 0) if (totalPrice <= 0) { return NextResponse.json({ error: "Invalid price calculation" }, { status: 400 }) } // Calculate tokens required (price * 2) const tokensRequired = Math.ceil(totalPrice * 2) console.log(`[v0] Token purchase: user=${user.id}, price=${totalPrice}, tokens_required=${tokensRequired}`) const { data: wallet, error: walletError } = await supabaseServiceRole .from("user_wallets") .select("wizard_tokens") .eq("user_id", user.id) .single() if (walletError || !wallet) { console.error("[v0] Wallet fetch error:", walletError) return NextResponse.json({ error: "Wallet not found" }, { status: 404 }) } if (wallet.wizard_tokens < tokensRequired) { return NextResponse.json( { error: "Insufficient wizard tokens", required: tokensRequired, available: wallet.wizard_tokens, }, { status: 402 }, ) } // Generate tracking ID const trackingId = `WZ-${Date.now()}-${Math.random().toString(36).substring(2, 6).toUpperCase()}` console.log(`[v0] Creating order: ${trackingId}`) const { data, error: deductError } = await supabaseServiceRole.rpc("deduct_tokens_atomic", { target_user_id: user.id, amount_to_deduct: tokensRequired, }) const newBalance = typeof data === "number" ? data : Array.isArray(data) ? data[0] : data if (deductError) { console.error("[v0] Token deduction error:", deductError) return NextResponse.json({ error: "Failed to deduct tokens" }, { status: 500 }) } if (typeof newBalance !== "number" || newBalance < 0) { console.error(`[v0] Invalid balance returned: ${newBalance}, expected number >= 0`) // Refund the tokens await supabaseServiceRole.rpc("add_tokens_atomic", { target_user_id: user.id, amount_to_add: tokensRequired, }) return NextResponse.json({ error: "Token calculation error - refunded" }, { status: 500 }) } console.log( `[v0] Tokens deducted successfully. Old balance: ${wallet.wizard_tokens}, Deducted: ${tokensRequired}, New balance: ${newBalance}`, ) const orderData = { tracking_id: trackingId, amount: totalPrice, items: items, payment_method: "WIZARD_TOKENS", payment_status: "paid", // Auto-approve: instant paid status status: "approved", // Auto-approve: instant approval tokens_processed: true, // Mark as already processed customer_name: user.user_metadata?.full_name || null, customer_ip: req.headers.get("x-forwarded-for") || req.headers.get("cf-connecting-ip") || "unknown", user_id: user.id, user_email: user.email || null, user_name: user.user_metadata?.full_name || user.email?.split("@")[0] || null, } const { data: createdOrder, error: orderError } = await supabaseServiceRole .from("orders") .insert([orderData]) .select() .single() if (orderError) { console.error("[v0] Order creation error:", orderError) await supabaseServiceRole.rpc("add_tokens_atomic", { target_user_id: user.id, amount_to_add: tokensRequired, }) return NextResponse.json({ error: "Failed to create order" }, { status: 500 }) } console.log(`[v0] Order created: ${trackingId}`) for (const item of items) { const { error: libraryError } = await supabaseServiceRole.from("library").insert({ user_id: user.id, game_id: item.id, game_title: item.title, game_image: item.image, added_at: new Date().toISOString(), }) if (libraryError) { console.error(`[v0] Library insert error for game ${item.id}:`, libraryError) } } console.log(`[v0] Token purchase complete: ${trackingId}, new_balance=${newBalance}`) return NextResponse.json({ success: true, trackingId: trackingId, order: createdOrder, newBalance: newBalance, tokensDeducted: tokensRequired, }) } catch (error: any) { console.error("[v0] Token purchase error:", error) return NextResponse.json({ error: error.message || "Failed to process token purchase" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/redeem-requests-panel.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Gift, Check, X, Loader2, FileText } from "lucide-react" import { redeemRequestService, type RedeemRequest } from "@/lib/supabase" import { toast } from "sonner" import { approveRedeemRequestAction, rejectRedeemRequestAction } from "@/app/actions/redeem" export function RedeemRequestsPanel() { const [requests, setRequests] = useState<RedeemRequest[]>([]) const [loading, setLoading] = useState(true) const [approving, setApproving] = useState<string | null>(null) const [rejecting, setRejecting] = useState<string | null>(null) const [showTokensInput, setShowTokensInput] = useState<string | null>(null) const [tokensAmount, setTokensAmount] = useState<{ [key: string]: number }>({}) const [showConfirmDialog, setShowConfirmDialog] = useState<{ type: "approve" | "reject" requestId: string } | null>(null) useEffect(() => { loadRequests() // Subscribe to real-time updates const unsubscribe = redeemRequestService.subscribeToRedeemRequests((updatedRequest) => { setRequests((prev) => { const index = prev.findIndex((r) => r.id === updatedRequest.id) if (index >= 0) { const newRequests = [...prev] newRequests[index] = updatedRequest return newRequests } return [updatedRequest, ...prev] }) }) return () => unsubscribe() }, []) const loadRequests = async () => { try { setLoading(true) const data = await redeemRequestService.getAllRedeemRequests() setRequests(data) } catch (error) { console.error("Error loading redeem requests:", error) toast.error("Failed to load redeem requests") } finally { setLoading(false) } } const handleApprove = async (requestId: string) => { const tokens = tokensAmount[requestId] || 100 // Default to 100 tokens if (tokens <= 0) { toast.error("Please enter a valid token amount") return } try { setApproving(requestId) await approveRedeemRequestAction(requestId, tokens) toast.success(`Redeem request approved! +${tokens} tokens added.`) setShowConfirmDialog(null) setShowTokensInput(null) setTokensAmount((prev) => { const newState = { ...prev } delete newState[requestId] return newState }) } catch (error) { console.error("Error approving request:", error) toast.error("Failed to approve redeem request") } finally { setApproving(null) } } const handleReject = async (requestId: string) => { try { setRejecting(requestId) await rejectRedeemRequestAction(requestId) toast.success("Redeem request rejected") setShowConfirmDialog(null) } catch (error) { console.error("Error rejecting request:", error) toast.error("Failed to reject redeem request") } finally { setRejecting(null) } } const pendingRequests = requests.filter((r) => r.status === "pending") const processedRequests = requests.filter((r) => r.status !== "pending") return ( <div className="space-y-6"> {/* Pending Requests /} <div> <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <Gift className="w-5 h-5 text-purple-400" /> Pending Requests ({pendingRequests.length}) </h3> {loading ? ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-8 text-center"> <Loader2 className="w-8 h-8 text-gray-400 mx-auto animate-spin" /> <p className="text-gray-400 mt-4">Loading redeem requests...</p> </CardContent> </Card> ) : pendingRequests.length === 0 ? ( <Card className="bg-gray-800 border-gray-700"> <CardContent className="p-8 text-center"> <FileText className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <h3 className="text-lg font-semibold text-white mb-2">No Pending Requests</h3> <p className="text-gray-400">All redeem requests have been processed.</p> </CardContent> </Card> ) : ( <div className="space-y-3"> {pendingRequests.map((request) => ( <Card key={request.id} className="bg-gray-800 border-gray-700"> <CardContent className="p-4"> <div className="space-y-3"> <div className="flex items-center justify-between"> <div> <p className="text-white font-mono font-bold text-lg">{request.redeem_code}</p> <p className="text-gray-400 text-sm"> User ID: {request.user_id} • {new Date(request.created_at).toLocaleString()} </p> </div> <Badge className="bg-yellow-600 text-white">Pending</Badge> </div> {/ Tokens Input /} {showTokensInput === request.id ? ( <div className="space-y-2"> <label className="text-gray-300 text-xs">Wizard Tokens to Award</label> <Input type="text" inputMode="numeric" min="1" max="10000" placeholder="Enter token amount" value={tokensAmount[request.id] ?? 100} onChange={(e) => { const rawValue = e.target.value.replace(/[^0-9]/g, "") const numValue = rawValue ? Number.parseInt(rawValue, 10) : 0 setTokensAmount((prev) => ({ ...prev, [request.id]: Math.max(0, Math.min(numValue, 10000)), })) }} className="bg-gray-900 border-gray-600 text-white" /> </div> ) : null} {/ Action Buttons /} <div className="flex gap-2"> {showTokensInput === request.id ? ( <> <Button onClick={() => handleApprove(request.id)} disabled={approving === request.id} className="flex-1 bg-green-600 hover:bg-green-700" > {approving === request.id ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Approving... </> ) : ( <> <Check className="w-4 h-4 mr-2" /> Confirm Approval </> )} </Button> <Button onClick={() => setShowTokensInput(null)} variant="outline" className="flex-1 border-gray-600 text-gray-300" > Cancel </Button> </> ) : ( <> <Button onClick={() => setShowTokensInput(request.id)} className="flex-1 bg-blue-600 hover:bg-blue-700" > <Check className="w-4 h-4 mr-2" /> Approve </Button> <Button onClick={() => setShowConfirmDialog({ type: "reject", requestId: request.id, }) } disabled={rejecting === request.id} variant="outline" className="flex-1 border-red-600 text-red-400 hover:bg-red-600/10" > {rejecting === request.id ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Rejecting... </> ) : ( <> <X className="w-4 h-4 mr-2" /> Reject </> )} </Button> </> )} </div> </div> </CardContent> </Card> ))} </div> )} </div> {/ Processed Requests /} {processedRequests.length > 0 && ( <div> <h3 className="text-lg font-semibold text-white mb-4">Processed Requests ({processedRequests.length})</h3> <ScrollArea className="h-[300px]"> <div className="space-y-3 pr-4"> {processedRequests.map((request) => ( <Card key={request.id} className="bg-gray-800 border-gray-700"> <CardContent className="p-4"> <div className="flex items-center justify-between"> <div> <p className="text-white font-mono font-bold">{request.redeem_code}</p> <p className="text-gray-400 text-sm">{new Date(request.created_at).toLocaleString()}</p> </div> <div className="flex items-center gap-2"> {request.status === "approved" && ( <div className="text-right"> <p className="text-green-400 text-sm font-semibold">+{request.tokens_amount} Tokens</p> </div> )} <Badge className={request.status === "approved" ? "bg-green-600" : "bg-red-600"}> {request.status.toUpperCase()} </Badge> </div> </div> </CardContent> </Card> ))} </div> </ScrollArea> </div> )} {/ Confirm Dialog /} {showConfirmDialog && ( <AlertDialog open={!!showConfirmDialog} onOpenChange={() => setShowConfirmDialog(null)}> <AlertDialogContent className="bg-gray-900 border-gray-700"> <AlertDialogTitle className="text-white"> {showConfirmDialog.type === "reject" ? "Reject Redeem Request?" : "Approve Redeem Request?"} </AlertDialogTitle> <AlertDialogDescription className="text-gray-400"> {showConfirmDialog.type === "reject" ? "This action cannot be undone. The user will be notified of the rejection." : "The user will receive their Wizard Tokens."} </AlertDialogDescription> <div className="flex gap-3"> <AlertDialogCancel className="border-gray-600">Cancel</AlertDialogCancel> <AlertDialogAction onClick={() => { if (showConfirmDialog.type === "reject") { handleReject(showConfirmDialog.requestId) } }} className={ showConfirmDialog.type === "reject" ? "bg-red-600 hover:bg-red-700" : "bg-green-600 hover:bg-green-700" } > {showConfirmDialog.type === "reject" ? "Reject" : "Approve"} </AlertDialogAction> </div> </AlertDialogContent> </AlertDialog> )} </div> ) } [V0_FILE]typescriptreact:file="components/order-details-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { X, Package, CheckCircle, XCircle, DollarSign, User, Calendar, ShoppingCart, ImageIcon, Eye, EyeOff, Key, Send, MessageSquare, Clock, Gamepad2, } from "lucide-react" import { orderService, type Order } from "@/lib/supabase" import { toast } from "sonner" import { supabase } from "@/lib/supabase" interface OrderDetailsModalProps { isOpen: boolean onClose: () => void order: Order onOrderUpdate: (updatedOrder: Order) => void } export function OrderDetailsModal({ isOpen, onClose, order: initialOrder, onOrderUpdate }: OrderDetailsModalProps) { const [isUpdating, setIsUpdating] = useState(false) const [steamUsername, setSteamUsername] = useState("") const [steamPassword, setSteamPassword] = useState("") const [steamCode, setSteamCode] = useState("") const [showPassword, setShowPassword] = useState(false) const [showImageModal, setShowImageModal] = useState(false) const [isSendingCode, setIsSendingCode] = useState(false) const [gameCredentials, setGameCredentials] = useState< Record<number, { username: string; password: string; code: string }> >({}) const [showPasswords, setShowPasswords] = useState<Record<number, boolean>>({}) const [platformUsername, setPlatformUsername] = useState("") const [platformPassword, setPlatformPassword] = useState("") const [selectedPlatform, setSelectedPlatform] = useState("") const [showPlatformPassword, setShowPlatformPassword] = useState(false) const [platformCode, setPlatformCode] = useState("") const [isSendingPlatformCode, setIsSendingPlatformCode] = useState(false) const [order, setOrder] = useState(initialOrder) const [userInfo, setUserInfo] = useState<{ displayName: string | null username: string | null email: string | null } | null>(null) const [loadingUserInfo, setLoadingUserInfo] = useState(true) useEffect(() => { const fetchUserInfo = async () => { setUserInfo({ displayName: order.user_name || order.customer_name || null, username: null, // No longer needed since we're using order data email: order.user_email || null, }) setLoadingUserInfo(false) } if (isOpen) { fetchUserInfo() } }, [isOpen]) useEffect(() => { if (isOpen) { setOrder(initialOrder) // Clear form fields when switching to a different order setSteamUsername("") setSteamPassword("") setSteamCode("") setPlatformUsername("") setPlatformPassword("") setPlatformCode("") setGameCredentials({}) setShowPasswords({}) } }, [isOpen]) if (!isOpen) return null const handleApprove = async () => { if (!steamUsername.trim() || !steamPassword.trim()) { toast.error("Please provide Steam username and password") return } setIsUpdating(true) try { // Update order with Steam account details await orderService.updateOrderSteamAccount(order.id, { username: steamUsername.trim(), password: steamPassword.trim(), payment_status: "paid", }) // Update order status await orderService.updateOrderStatus(order.id, "approved") const updatedOrder = { ...order, status: "approved" as const, steam_username: steamUsername.trim(), steam_password: steamPassword.trim(), payment_status: "paid" as const, } onOrderUpdate(updatedOrder) toast.success(`Order ${order.tracking_id} approved successfully!`) // Clear form setSteamUsername("") setSteamPassword("") } catch (error) { console.error("Error approving order:", error) toast.error("Failed to approve order. Please try again.") } finally { setIsUpdating(false) } } const handleReject = async () => { setIsUpdating(true) try { await orderService.updateOrderStatus(order.id, "rejected") const updatedOrder = { ...order, status: "rejected" as const } onOrderUpdate(updatedOrder) toast.success(`Order ${order.tracking_id} rejected.`) } catch (error) { console.error("Error rejecting order:", error) toast.error("Failed to reject order. Please try again.") } finally { setIsUpdating(false) } } const handleSendSteamCode = async () => { if (!steamCode.trim()) { toast.error("Please enter a Steam code") return } setIsSendingCode(true) try { // Update order with Steam code and mark as completed await orderService.updateOrderSteamCode(order.id, steamCode.trim()) await orderService.updateOrderStatus(order.id, "completed") const updatedOrder = { ...order, steam_code: steamCode.trim(), status: "completed" as const, updated_at: new Date().toISOString(), } onOrderUpdate(updatedOrder) toast.success(`Steam code sent successfully! Order marked as completed.`) // Clear form setSteamCode("") } catch (error) { console.error("Error sending Steam code:", error) toast.error("Failed to send Steam code. Please try again.") } finally { setIsSendingCode(false) } } const handleApproveGame = async (gameIndex: number) => { const credentials = gameCredentials[gameIndex] const hasCredentials = credentials?.username?.trim() && credentials?.password?.trim() const hasSteamCode = credentials?.code?.trim() if (!hasCredentials && !hasSteamCode) { toast.error("Please provide either Steam username/password OR Steam code for this game") return } setIsUpdating(true) try { const updatedItems = [...(order.items || [])] updatedItems[gameIndex] = { ...updatedItems[gameIndex], steam_username: credentials?.username?.trim() || null, steam_password: credentials?.password?.trim() || null, steam_code: credentials?.code?.trim() || null, approval_status: "approved", approved_at: new Date().toISOString(), } await orderService.updateOrder(order.tracking_id, { items: updatedItems, }) const allApproved = updatedItems.every((item: any) => item.approval_status === "approved") if (allApproved) { const { data: orderData } = await supabase .from("orders") .update({ status: "approved", updated_at: new Date().toISOString() }) .eq("tracking_id", order.tracking_id) .select() .single() } const updatedOrder = { ...order, items: updatedItems, status: allApproved ? ("approved" as const) : order.status, } setOrder(updatedOrder) onOrderUpdate(updatedOrder) toast.success(`Game "${updatedItems[gameIndex].title}" approved successfully!`) setGameCredentials((prev) => { const updated = { ...prev } delete updated[gameIndex] return updated }) } catch (error) { console.error("Error approving game:", error) toast.error("Failed to approve game. Please try again.") } finally { setIsUpdating(false) } } const handleRejectGame = async (gameIndex: number) => { setIsUpdating(true) try { const updatedItems = [...(order.items || [])] updatedItems[gameIndex] = { ...updatedItems[gameIndex], approval_status: "rejected", rejected_at: new Date().toISOString(), } await orderService.updateOrder(order.tracking_id, { items: updatedItems, }) const updatedOrder = { ...order, items: updatedItems, } setOrder(updatedOrder) onOrderUpdate(updatedOrder) toast.success(`Game "${updatedItems[gameIndex].title}" rejected.`) } catch (error) { console.error("Error rejecting game:", error) toast.error("Failed to reject game. Please try again.") } finally { setIsUpdating(false) } } const handleCredentialChange = (gameIndex: number, field: "username" | "password" | "code", value: string) => { setGameCredentials((prev) => ({ ...prev, [gameIndex]: { ...prev[gameIndex], username: prev[gameIndex]?.username || "", password: prev[gameIndex]?.password || "", code: prev[gameIndex]?.code || "", [field]: value, }, })) } const togglePasswordVisibility = (gameIndex: number) => { setShowPasswords((prev) => ({ ...prev, [gameIndex]: !prev[gameIndex], })) } const handleSavePlatformAccount = async () => { if (!platformUsername.trim() || !platformPassword.trim()) { toast.error(`Please provide ${selectedPlatform} username and password`) return } setIsUpdating(true) try { console.log("[v0] Saving platform account:", { orderId: order.id, platform: selectedPlatform, username: platformUsername.trim(), }) const { data, error } = await supabase .from("orders") .update({ delivery_platform: selectedPlatform, delivery_username: platformUsername.trim(), delivery_password: platformPassword.trim(), updated_at: new Date().toISOString(), }) .eq("id", order.id) .select() if (error) { console.error("[v0] Supabase error:", error) throw error } console.log("[v0] Platform account saved successfully:", data) const updatedOrder = { ...order, delivery_platform: selectedPlatform, delivery_username: platformUsername.trim(), delivery_password: platformPassword.trim(), } setOrder(updatedOrder) onOrderUpdate(updatedOrder) toast.success(`${selectedPlatform} account details saved successfully!`) // Clear form setPlatformUsername("") setPlatformPassword("") // setSelectedPlatform("") // REMOVED - keep platform selected to show code section } catch (error) { console.error("[v0] Error saving platform account:", error) const errorMessage = error instanceof Error ? error.message : "Failed to save platform account details" toast.error(errorMessage) } finally { setIsUpdating(false) } } const handleSendPlatformCode = async () => { if (!platformCode.trim()) { toast.error(`Please enter a ${selectedPlatform} code`) return } setIsSendingPlatformCode(true) try { await orderService.updateOrder(order.tracking_id, { delivery_code: platformCode.trim(), status: "completed", }) const updatedOrder = { ...order, delivery_code: platformCode.trim(), status: "completed" as const, updated_at: new Date().toISOString(), } onOrderUpdate(updatedOrder) toast.success(`${selectedPlatform} code sent successfully! Order marked as completed.`) setPlatformCode("") } catch (error) { console.log("[v0] Error sending platform code:", error) toast.error( `Failed to send ${selectedPlatform} code: ${error instanceof Error ? error.message : "Unknown error"}`, ) } finally { setIsSendingPlatformCode(false) } } const getStatusColor = (status: string) => { switch (status) { case "pending": return "bg-yellow-600" case "approved": return "bg-green-600" case "completed": return "bg-blue-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getPaymentStatusColor = (status: string) => { switch (status) { case "pending": return "bg-yellow-600" case "paid": return "bg-green-600" case "refunded": return "bg-red-600" default: return "bg-gray-600" } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString() } return ( <> <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-gray-900 border-gray-700"> <CardHeader> <div className="flex items-center justify-between"> <CardTitle className="text-xl font-bold text-white flex items-center gap-2"> <Package className="w-6 h-6 text-blue-400" /> Order Details </CardTitle> <Button variant="ghost" size="sm" onClick={onClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> </div> </CardHeader> <CardContent className="space-y-6"> {!loadingUserInfo && ( <div className="bg-gray-800 p-6 rounded-lg"> <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <User className="w-5 h-5 text-purple-400" /> User Information </h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <Label className="text-gray-400 text-sm">Customer Name</Label> <p className="text-white font-medium">{order.user_name || "N/A"}</p> </div> <div> <Label className="text-gray-400 text-sm">Payment Method</Label> <p className="text-white font-medium">{order.payment_method || "N/A"}</p> </div> <div className="md:col-span-2"> <Label className="text-gray-400 text-sm">User Email</Label> <p className="text-white font-medium">{order.user_email || "N/A"}</p> </div> {order.payment_screenshot && ( <div className="md:col-span-2"> <Label className="text-gray-400 text-sm">Payment Screenshot</Label> <div className="mt-2"> <a href={order.payment_screenshot} target="_blank" rel="noopener noreferrer" className="inline-block" > <img src={order.payment_screenshot || "/placeholder.svg"} alt="Payment proof" className="max-w-xs rounded-lg border border-gray-700 hover:border-blue-500 transition-colors cursor-pointer" /> </a> </div> </div> )} {order.user_id && ( <div className="md:col-span-2 text-xs text-gray-500"> <span>User ID: {order.user_id}</span> </div> )} </div> </div> )} {order.code_requested && order.code_request_status === "pending" && ( <div className="bg-red-900/30 border border-red-600 p-4 rounded-lg"> <div className="flex items-start gap-3"> <MessageSquare className="w-5 h-5 text-red-400 flex-shrink-0 mt-0.5" /> <div> <p className="text-red-300 font-semibold text-sm">User has requested game credentials</p> <p className="text-red-200 text-xs mt-1"> The customer is waiting for their game code or account details. Please prioritize this order. </p> </div> </div> </div> )} {order.code_request_status === "fulfilled" && ( <div className="bg-green-900/30 border border-green-600 p-4 rounded-lg"> <div className="flex items-start gap-3"> <CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" /> <p className="text-green-300 font-semibold text-sm">Code request has been fulfilled</p> </div> </div> )} {/ Order Information /} <div className="bg-gray-800 p-6 rounded-lg"> <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <User className="w-5 h-5 text-blue-400" /> Order Information </h3> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="space-y-4"> <div> <Label className="text-gray-400 text-sm">Tracking ID</Label> <p className="text-white font-mono text-lg">{order.tracking_id}</p> </div> <div> <Label className="text-gray-400 text-sm">Amount</Label> <p className="text-green-400 font-bold text-xl flex items-center gap-1"> <DollarSign className="w-5 h-5" />₹{order.amount} </p> </div> </div> <div className="space-y-4"> <div> <Label className="text-gray-400 text-sm">Status</Label> <div className="mt-1"> <Badge className={`${getStatusColor(order.status)} text-sm`}>{order.status.toUpperCase()}</Badge> </div> </div> <div> <Label className="text-gray-400 text-sm">Payment</Label> <div className="mt-1"> <Badge className={`${getPaymentStatusColor(order.payment_status || "pending")} text-sm`}> {(order.payment_status || "PENDING").toUpperCase()} </Badge> </div> </div> </div> </div> <div className="mt-4 pt-4 border-t border-gray-700"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm"> <div className="flex items-center gap-2 text-gray-400"> <Calendar className="w-4 h-4" /> <span>Created: {formatDate(order.created_at)}</span> </div> <div className="flex items-center gap-2 text-gray-400"> <Package className="w-4 h-4" /> <span>Updated: {formatDate(order.updated_at)}</span> </div> </div> </div> </div> {/ Customer Comments - Show if available /} {(order as any).additional_comments && ( <div className="bg-blue-900/20 border border-blue-700/50 p-6 rounded-lg"> <h3 className="text-blue-300 font-semibold mb-3 flex items-center gap-2"> <MessageSquare className="w-5 h-5" /> Customer Comments </h3> <div className="bg-gray-800/50 p-4 rounded-lg"> <p className="text-gray-300 whitespace-pre-wrap">{(order as any).additional_comments}</p> </div> </div> )} {/ Payment Screenshot /} {order.payment_screenshot && ( <div className="bg-gray-800 p-6 rounded-lg"> <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <ImageIcon className="w-5 h-5 text-purple-400" /> Payment Screenshot </h3> <div className="relative"> <img src={order.payment_screenshot || "/placeholder.svg"} alt="Payment Screenshot" className="w-full max-w-md h-auto rounded-lg border border-gray-600 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setShowImageModal(true)} /> <Button size="sm" variant="secondary" className="absolute top-2 right-2" onClick={() => setShowImageModal(true)} > <Eye className="w-4 h-4" /> </Button> </div> </div> )} {/ Games in Order /} <div className="bg-gray-800 p-6 rounded-lg"> <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <ShoppingCart className="w-5 h-5 text-green-400" /> Games in Order ({order.items?.length || 0}) </h3> <div className="space-y-6"> {order.items && order.items.length > 0 ? ( order.items.map((item: any, index: number) => { const isApproved = item.approval_status === "approved" const isRejected = item.approval_status === "rejected" const isPending = !isApproved && !isRejected return ( <div key={index} className={`p-4 rounded-lg border-2 ${ isApproved ? "bg-green-900/20 border-green-500" : isRejected ? "bg-red-900/20 border-red-500" : "bg-gray-700 border-gray-600" }`} > {/ Game Info /} <div className="flex items-start justify-between mb-4"> <div className="flex items-center gap-4 flex-1"> <img src={item.image || "/placeholder.svg"} alt={item.title} className="w-20 h-20 object-cover rounded" /> <div> <p className="text-white font-medium text-lg">{item.title}</p> <p className="text-green-400 font-bold text-xl">₹{item.price}</p> {item.quantity && item.quantity > 1 && ( <p className="text-gray-400 text-sm">Quantity: {item.quantity}</p> )} </div> </div> <div> {isApproved && ( <Badge className="bg-green-600 flex items-center gap-1"> <CheckCircle className="w-3 h-3" /> APPROVED </Badge> )} {isRejected && ( <Badge className="bg-red-600 flex items-center gap-1"> <XCircle className="w-3 h-3" /> REJECTED </Badge> )} {isPending && ( <Badge className="bg-yellow-600 flex items-center gap-1"> <Clock className="w-3 h-3" /> PENDING </Badge> )} </div> </div> {/ Show credentials if approved /} {isApproved && item.steam_username && ( <div className="bg-green-900/30 p-4 rounded-lg mb-4"> <h4 className="text-green-300 font-semibold mb-2 text-sm">Steam Account Details</h4> <div className="grid grid-cols-2 gap-3 text-sm"> <div> <Label className="text-green-200">Username</Label> <p className="text-white font-mono">{item.steam_username}</p> </div> <div> <Label className="text-green-200">Password</Label> <p className="text-white font-mono">{item.steam_password}</p> </div> </div> {item.steam_code && ( <div className="mt-2"> <Label className="text-green-200">Steam Code</Label> <p className="text-white font-mono">{item.steam_code}</p> </div> )} {item.approved_at && ( <p className="text-green-300 text-xs mt-2"> Approved: {new Date(item.approved_at).toLocaleString()} </p> )} </div> )} {isApproved && !item.steam_code && ( <div className="bg-blue-900/20 border border-blue-500 p-4 rounded-lg mb-4"> <h4 className="text-blue-300 font-semibold mb-2 text-sm flex items-center gap-2"> <Key className="w-4 h-4" /> Add Steam Activation Code (Optional) </h4> <div className="space-y-3"> <div> <Input value={gameCredentials[index]?.code || ""} onChange={(e) => handleCredentialChange(index, "code", e.target.value)} placeholder="Enter Steam code (e.g., XXXXX-XXXXX-XXXXX)" className="bg-gray-700 border-gray-600 text-white font-mono" /> <p className="text-blue-300 text-xs mt-1"> Add a Steam activation code if you want to provide one to the customer </p> </div> <Button onClick={async () => { const code = gameCredentials[index]?.code?.trim() if (!code) { toast.error("Please enter a Steam code") return } setIsUpdating(true) try { const updatedItems = [...(order.items || [])] updatedItems[index] = { ...updatedItems[index], steam_code: code, } await orderService.updateOrder(order.tracking_id, { items: updatedItems }) const updatedOrder = { ...order, items: updatedItems } setOrder(updatedOrder) onOrderUpdate(updatedOrder) toast.success("Steam code added successfully!") setGameCredentials((prev) => { const updated = { ...prev } if (updated[index]) { updated[index].code = "" } return updated }) } catch (error) { console.error("Error adding code:", error) toast.error("Failed to add Steam code") } finally { setIsUpdating(false) } }} disabled={isUpdating || !gameCredentials[index]?.code?.trim()} className="bg-blue-600 hover:bg-blue-700 w-full" size="sm" > <Send className="w-4 h-4 mr-2" /> Add Steam Code </Button> </div> </div> )} {isPending && ( <div className="space-y-4"> <div className="bg-gray-800 p-4 rounded-lg"> <h4 className="text-white font-semibold mb-3 text-sm">Enter Steam Credentials or Code</h4> <div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div> <Label htmlFor={`username-${index}`} className="text-gray-300 text-sm"> Steam Username (Optional) </Label> <Input id={`username-${index}`} value={gameCredentials[index]?.username || ""} onChange={(e) => handleCredentialChange(index, "username", e.target.value)} placeholder="Enter username" className="bg-gray-700 border-gray-600 text-white mt-1" /> </div> <div> <Label htmlFor={`password-${index}`} className="text-gray-300 text-sm"> Steam Password (Optional) </Label> <div className="relative mt-1"> <Input id={`password-${index}`} type={showPasswords[index] ? "text" : "password"} value={gameCredentials[index]?.password || ""} onChange={(e) => handleCredentialChange(index, "password", e.target.value)} placeholder="Enter password" className="bg-gray-700 border-gray-600 text-white pr-10" /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => togglePasswordVisibility(index)} > {showPasswords[index] ? ( <EyeOff className="h-4 w-4" /> ) : ( <Eye className="h-4 w-4" /> )} </Button> </div> </div> </div> <div className="mt-3"> <Label htmlFor={`code-${index}`} className="text-gray-300 text-sm"> Steam Activation Code (Optional) </Label> <Input id={`code-${index}`} value={gameCredentials[index]?.code || ""} onChange={(e) => handleCredentialChange(index, "code", e.target.value)} placeholder="Enter Steam code (e.g., XXXXX-XXXXX-XXXXX)" className="bg-gray-700 border-gray-600 text-white mt-1 font-mono" /> <p className="text-gray-400 text-xs mt-2"> Provide either credentials (username + password) OR activation code </p> </div> <p className="text-gray-400 text-xs mt-2"> Provide either credentials (username + password) OR activation code </p> </div> <div className="flex gap-2"> <Button onClick={() => handleApproveGame(index)} disabled={ isUpdating || ((!gameCredentials[index]?.username?.trim() || !gameCredentials[index]?.password?.trim()) && !gameCredentials[index]?.code?.trim()) } className="bg-green-600 hover:bg-green-700 flex-1" size="sm" > <CheckCircle className="w-4 h-4 mr-2" /> Approve This Game </Button> <Button onClick={() => handleRejectGame(index)} disabled={isUpdating} variant="destructive" className="flex-1" size="sm" > <XCircle className="w-4 h-4 mr-2" /> Reject </Button> </div> </div> )} {/ Rejection message /} {isRejected && item.rejected_at && ( <div className="bg-red-900/30 p-3 rounded-lg"> <p className="text-red-300 text-sm"> Rejected: {new Date(item.rejected_at).toLocaleString()} </p> </div> )} </div> ) }) ) : ( <p className="text-gray-400">No items found for this order</p> )} </div> </div> {/ Order Summary /} {order.items && order.items.length > 1 && ( <div className="bg-blue-900/20 border border-blue-700/50 p-4 rounded-lg"> <h3 className="text-blue-300 font-semibold mb-2">Order Status Summary</h3> <div className="grid grid-cols-3 gap-4 text-sm"> <div className="text-center"> <div className="text-2xl font-bold text-yellow-400"> {order.items.filter((item: any) => !item.approval_status).length} </div> <div className="text-gray-400">Pending</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-green-400"> {order.items.filter((item: any) => item.approval_status === "approved").length} </div> <div className="text-gray-400">Approved</div> </div> <div className="text-center"> <div className="text-2xl font-bold text-red-400"> {order.items.filter((item: any) => item.approval_status === "rejected").length} </div> <div className="text-gray-400">Rejected</div> </div> </div> </div> )} {/ Actions - Only show for pending orders /} {order.status === "pending" && ( <div className="bg-gray-800 p-6 rounded-lg"> <h3 className="text-lg font-semibold text-white mb-4">Actions</h3> <div className="space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <Label htmlFor="steam-username" className="text-gray-300"> Steam Username </Label> <Input id="steam-username" value={steamUsername} onChange={(e) => setSteamUsername(e.target.value)} placeholder="Enter Steam username" className="bg-gray-700 border-gray-600 text-white mt-1" /> </div> <div> <Label htmlFor="steam-password" className="text-gray-300"> Steam Password </Label> <div className="relative mt-1"> <Input id="steam-password" type={showPassword ? "text" : "password"} value={steamPassword} onChange={(e) => setSteamPassword(e.target.value)} placeholder="Enter Steam password" className="bg-gray-700 border-gray-600 text-white pr-10" /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> </div> </div> </div> <div className="flex gap-3 pt-4"> <Button onClick={handleApprove} disabled={isUpdating || !steamUsername.trim() || !steamPassword.trim()} className="bg-green-600 hover:bg-green-700 flex-1" > <CheckCircle className="w-4 h-4 mr-2" /> {isUpdating ? "Approving..." : "Approve"} </Button> <Button onClick={handleReject} disabled={isUpdating} variant="destructive" className="flex-1"> <XCircle className="w-4 h-4 mr-2" /> {isUpdating ? "Rejecting..." : "Reject"} </Button> </div> </div> </div> )} {/ Status Messages /} {order.status === "approved" && !order.steam_code && ( <div className="bg-green-900/30 border border-green-600 p-4 rounded-lg"> <div className="flex items-center gap-2 text-green-400 mb-2"> <CheckCircle className="w-5 h-5" /> <span className="font-medium">Order Approved - Awaiting Steam Code</span> </div> <p className="text-green-300 text-sm"> Steam account details have been provided. Please add the Steam game code to complete the order. </p> </div> )} {order.status === "completed" && ( <div className="bg-blue-900/30 border border-blue-600 p-4 rounded-lg"> <div className="flex items-center gap-2 text-blue-400 mb-2"> <CheckCircle className="w-5 h-5" /> <span className="font-medium">Order Completed Successfully!</span> </div> <p className="text-blue-300 text-sm"> Steam code has been sent to the customer. Order is now complete. </p> </div> )} {order.status === "rejected" && ( <div className="bg-red-900/30 border border-red-600 p-4 rounded-lg"> <div className="flex items-center gap-2 text-red-400 mb-2"> <XCircle className="w-5 h-5" /> <span className="font-medium">Order Rejected</span> </div> <p className="text-red-300 text-sm">This order has been rejected and the customer has been notified.</p> </div> )} <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Gamepad2 className="w-4 h-4 text-blue-400" /> Provide Account Details for Platforms </h4> <div className="space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="space-y-2"> <Label className="text-gray-300 text-sm">Platform</Label> <Select value={selectedPlatform} onValueChange={setSelectedPlatform}> <SelectTrigger className="bg-gray-900 border-gray-700 text-white"> <SelectValue placeholder="Select a platform" /> </SelectTrigger> <SelectContent className="bg-gray-900 border-gray-700"> <SelectItem value="Steam">Steam</SelectItem> <SelectItem value="Rockstar">Rockstar</SelectItem> <SelectItem value="Ubisoft">Ubisoft</SelectItem> <SelectItem value="EA">EA</SelectItem> <SelectItem value="Epic Games">Epic Games</SelectItem> <SelectItem value="PlayStation">PlayStation</SelectItem> <SelectItem value="Xbox">Xbox</SelectItem> <SelectItem value="Others">Others</SelectItem> </SelectContent> </Select> </div> </div> {selectedPlatform && ( <div className="space-y-4 bg-gray-900/50 p-4 rounded-lg border border-gray-700"> <div className="space-y-2"> <Label className="text-gray-300 text-sm">Username / Email</Label> <Input placeholder="Enter username or email" value={platformUsername} onChange={(e) => setPlatformUsername(e.target.value)} className="bg-gray-900 border-gray-700 text-white" /> </div> <div className="space-y-2"> <Label className="text-gray-300 text-sm">Password</Label> <div className="relative"> <Input type={showPlatformPassword ? "text" : "password"} placeholder="Enter password" value={platformPassword} onChange={(e) => setPlatformPassword(e.target.value)} className="bg-gray-900 border-gray-700 text-white pr-10" /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => setShowPlatformPassword(!showPlatformPassword)} > {showPlatformPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> </div> </div> <Button onClick={handleSavePlatformAccount} disabled={isUpdating || !platformUsername.trim() || !platformPassword.trim()} className="w-full bg-green-600 hover:bg-green-700" > <Key className="w-4 h-4 mr-2" /> Save {selectedPlatform} Account Details </Button> </div> )} {selectedPlatform && (order.status === "approved" || order.status === "completed") && ( <div className="space-y-4 bg-purple-900/30 p-4 rounded-lg border border-purple-700"> <h5 className="text-purple-300 font-semibold text-sm flex items-center gap-2"> <Send className="w-4 h-4" /> Request for {selectedPlatform} Code </h5> <div className="space-y-2"> <Input placeholder={`Enter ${selectedPlatform} code`} value={platformCode} onChange={(e) => setPlatformCode(e.target.value)} className="bg-gray-900 border-gray-700 text-white font-mono" /> </div> <Button onClick={handleSendPlatformCode} disabled={isSendingPlatformCode || !platformCode.trim()} className="w-full bg-purple-600 hover:bg-purple-700" > <Send className="w-4 h-4 mr-2" /> Send {selectedPlatform} Code & Complete Order </Button> </div> )} </div> </div> </CardContent> </Card> </div> {/ Full Screen Image Modal /} {showImageModal && order.payment_screenshot && ( <div className="fixed inset-0 bg-black/95 backdrop-blur-sm z-[60] flex items-center justify-center p-4"> <div className="relative max-w-4xl max-h-[90vh]"> <Button variant="ghost" size="sm" onClick={() => setShowImageModal(false)} className="absolute -top-12 right-0 text-white hover:text-gray-300" > <X className="w-6 h-6" /> </Button> <img src={order.payment_screenshot || "/placeholder.svg"} alt="Payment Screenshot - Full Size" className="max-w-full max-h-[90vh] object-contain rounded-lg" /> </div> </div> )} </> ) } [V0_FILE]typescript:file="lib/supabase.ts" isMerged="true" import { createClient } from "@supabase/supabase-js" // import { cookies } from "next/headers" // import { createServerClient } from "@supabase/ssr" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY // Initialize client with error handling let supabase: any = null if (supabaseUrl && supabaseAnonKey) { supabase = createClient(supabaseUrl, supabaseAnonKey) } else { console.warn("⚠️ Supabase environment variables are missing") } // Export the supabase instance export { supabase } // Types export interface LibraryEntry { id: string user_id: string game_id: string game_title: string game_image: string | null game_username: string | null game_password: string | null purchase_date: string status: string game?: { id: string title: string image: string | null } } export interface Order { id: string tracking_id: string amount: number status: string created_at: string updated_at: string items: any steam_username?: string steam_password?: string steam_code?: string payment_screenshot?: string additional_comments?: string payment_status?: string game_id?: string game_title?: string game_image?: string payment_method?: string is_free?: boolean delivery_platform?: string delivery_username?: string delivery_password?: string delivery_code?: string tokens_processed?: boolean // Added for token processing tracking user_name?: string | null user_email?: string | null customer_name?: string | null user_id?: string | null // Added for user identification code_requested?: boolean code_request_id?: string code_request_status?: "pending" | "fulfilled" | "cancelled" } export interface CodeRequest { id: string order_id: string tracking_id: string game_title: string customer_email: string status: string created_at: string updated_at: string } export interface LibraryCodeRequest { id: string library_id: string user_id: string game_id: string game_title: string customer_email: string status: "pending" | "delivered" | "cancelled" game_code: string | null created_at: string updated_at: string } export interface TrendingGame { id: string title: string image: string | null price: number discount: number | null rating: number | null category: string is_trending: boolean created_at: string } export interface UserActivity { id: string email: string username: string last_seen: string is_active: boolean created_at: string total_orders: number total_spent: number } export interface AccountSubmission { id: string user_id: string | null user_email: string | null temp_id: string | null tracking_id: string | null provider: "rockstar" | "ea" | "ubisoft" | string message: string customer_name: string | null game_title: string | null status: "pending" | "completed" | "approved" | "rejected" account_id: string | null account_password: string | null created_at: string updated_at: string } export interface SupportTicket { id: string tracking_id: string | null name: string | null priority: string | null message: string | null status: "pending" | "resolved" | "closed" user_id: string | null temp_id: string | null created_at: string updated_at: string screenshot_url: string | null } export interface RedeemRequest { id: string user_id: string redeem_code: string status: "pending" | "approved" | "rejected" request_date: string updated_at: string approved_at: string | null approved_by: string | null tokens_amount: number created_at: string } export interface UserWallet { id: string user_id: string wizard_tokens: number total_tokens_earned: number total_tokens_spent: number updated_at: string created_at: string } export interface Review { id: string game_id?: string game_title: string user_id?: string | null user_name: string rating: number comment: string status: "pending" | "approved" | "rejected" helpful_count: number created_at: string } // Helpers function isMissingColumnError(error: unknown, columnName: string) { if (!error || typeof error !== "object") return false const e = error as any const code = e?.code const rawMsg = e?.message const msg = typeof rawMsg === "string" ? rawMsg.toLowerCase() : "" const col = columnName.toLowerCase() if (code === "42703") return true if (msg.includes("could not find") && msg.includes(col) && msg.includes("schema cache")) return true if (msg.includes("column") && msg.includes(col) && (msg.includes("does not exist") || msg.includes("not found"))) { return true } if (msg.includes("schema cache") && msg.includes(col)) return true return false } function clone(obj: any) { return JSON.parse(JSON.stringify(obj)) } async function safeInsertAccountSubmission(payload: any, optionalKeys: string[]) { const attemptPayload = clone(payload) for (let i = 0; i < 5; i++) { const res = await supabase.from("account_submissions").insert([attemptPayload]).select().single() if (!res.error && res.data) return res const err = res.error let stripped = false for (const key of optionalKeys) { if (isMissingColumnError(err, key) && key in attemptPayload) { delete attemptPayload[key] stripped = true } } if (!stripped) throw err } throw new Error("Failed to insert submission after retries") } async function safeUpdateAccountSubmission(id: string, payload: any, optionalKeys: string[]) { const attemptPayload = clone(payload) for (let i = 0; i < 5; i++) { const res = await supabase.from("account_submissions").update(attemptPayload).eq("id", id).select().single() if (!res.error && res.data) return res const err = res.error let stripped = false for (const key of optionalKeys) { if (isMissingColumnError(err, key) && key in attemptPayload) { delete attemptPayload[key] stripped = true } } if (!stripped) throw err } throw new Error("Failed to update submission after retries") } function randomTrackingDigits(length = 5) { let out = "" for (let i = 0; i < length; i++) out += Math.floor(Math.random() 10).toString() return out } async function generateUniqueTrackingId(): Promise<string> { if (!supabase) throw new Error("Supabase not initialized") for (let i = 0; i < 6; i++) { const candidate = `WZ-${randomTrackingDigits(5)}` const { data, error } = await supabase .from("account_submissions") .select("id") .eq("tracking_id", candidate) .limit(1) const exists = Array.isArray(data) && data.length > 0 if (!exists) return candidate if (error && isMissingColumnError(error, "tracking_id")) return candidate } return `WZ-${Date.now().toString().slice(-5)}` } // reviewService for persistent community reviews export const reviewService = { async createReview(reviewData: Partial<Review>): Promise<Review> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("reviews").insert([reviewData]).select().single() if (error) throw new Error(`Failed to create review: ${error.message}`) return data as Review }, async getReviewsByGameTitle(gameTitle: string): Promise<Review[]> { if (!supabase) return [] const { data, error } = await supabase .from("reviews") .select("") .eq("game_title", gameTitle) .eq("status", "approved") .order("created_at", { ascending: false }) if (error) { console.error("Error fetching reviews:", error) return [] } return (data || []) as Review[] }, async getAverageRating(gameTitle: string): Promise<{ average: number; count: number }> { if (!supabase) return { average: 0, count: 0 } const { data, error } = await supabase .from("reviews") .select("rating") .eq("game_title", gameTitle) .eq("status", "approved") if (error || !data) return { average: 0, count: 0 } const count = data.length const average = count > 0 ? data.reduce((sum, r) => sum + r.rating, 0) / count : 0 return { average, count } }, } // Order Service export const orderService = { async createOrder(orderData: Partial<Order>): Promise<Order> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase.from("orders").insert([orderData]).select().single() if (error) throw new Error(`Failed to create order: ${error.message}`) return data as Order } catch (error: any) { console.error("Create order error:", error) throw error } }, async getOrderByTrackingId(trackingId: string): Promise<Order | null> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase.from("orders").select("").eq("tracking_id", trackingId).single() if (error) { if ((error as any).code === "PGRST116") return null throw new Error(`Failed to fetch order: ${error.message}`) } return data as Order } catch (error: any) { console.error("Get order by tracking ID error:", error) throw error } }, async updateOrder(trackingId: string, updates: Partial<Order>): Promise<Order> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase .from("orders") .update({ ...updates, updated_at: new Date().toISOString() }) .eq("tracking_id", trackingId) .select() .single() if (error) throw new Error(`Failed to update order: ${error.message}`) return data as Order } catch (error: any) { console.error("Update order error:", error) throw error } }, async updateOrderStatus(id: string, status: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { console.log(`[v0] Updating order status: id=${id}, status=${status}`) const { error } = await supabase .from("orders") .update({ status, updated_at: new Date().toISOString() }) .eq("id", id) if (error) throw new Error(`Failed to update order status: ${error.message}`) console.log(`[v0] Order status updated successfully`) } catch (error: any) { console.error("Update order status error:", error) throw error } }, async updateOrderSteamAccount( id: string, steamData: { username: string; password: string; payment_status?: string }, ): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { const { error } = await supabase .from("orders") .update({ steam_username: steamData.username, steam_password: steamData.password, payment_status: steamData.payment_status || "paid", updated_at: new Date().toISOString(), }) .eq("id", id) if (error) throw new Error(`Failed to update order Steam account: ${error.message}`) } catch (error: any) { console.error("Update Steam account error:", error) throw error } }, async updateOrderSteamCode(id: string, steamCode: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { const { error } = await supabase .from("orders") .update({ steam_code: steamCode, updated_at: new Date().toISOString() }) .eq("id", id) if (error) throw new Error(`Failed to update order Steam code: ${error.message}`) } catch (error: any) { console.error("Update Steam code error:", error) throw error } }, async getAllOrders(): Promise<Order[]> { if (!supabase) { console.warn("Supabase not initialized, returning empty orders") return [] } const maxRetries = 3 const pageSize = 100 let allOrders: Order[] = [] let page = 0 let hasMore = true for (let attempt = 1; attempt <= maxRetries; attempt++) { try { allOrders = [] page = 0 hasMore = true while (hasMore) { try { const offset = page * pageSize // Query with proper error handling const { data, error } = await supabase .from("orders") .select( "id, tracking_id, amount, status, created_at, updated_at, items, steam_code, payment_status, tokens_processed, user_name, user_email, customer_name, payment_method, user_id", ) .order("created_at", { ascending: false }) .range(offset, offset + pageSize - 1) if (error) { // Handle network/fetch errors gracefully if (error.message?.includes("Failed to fetch") || error.message?.includes("fetch")) { console.warn(`[v0] Network issue on page ${page}, returning partial results...`) hasMore = false break } if (error.message?.includes("aborted")) { console.warn(`[v0] Request aborted on page ${page}, returning partial results...`) hasMore = false break } throw error } if (!data || data.length === 0) { hasMore = false break } allOrders = [...allOrders, ...(data as Order[])] page++ if (page < 5) { await new Promise((resolve) => setTimeout(resolve, 50)) } if (allOrders.length >= 500) { hasMore = false break } } catch (pageError: any) { const errorMsg = pageError?.message || String(pageError) if (errorMsg.includes("aborted") || errorMsg.includes("Failed to fetch")) { console.warn(`[v0] Page fetch error, returning partial results (${allOrders.length} orders)`) hasMore = false break } throw pageError } } if (allOrders.length > 0 || page > 0) { console.log(`[v0] Fetched ${allOrders.length} orders`) return allOrders } } catch (error: any) { const errorMsg = error?.message || String(error) if (errorMsg.includes("Failed to fetch")) { console.warn(`[v0] getAllOrders attempt ${attempt} - network error, returning empty array`) return [] // Return empty instead of retrying on network errors } if (errorMsg.includes("aborted")) { console.log(`[v0] Request aborted, returning ${allOrders.length} orders fetched`) return allOrders } console.error(`[v0] getAllOrders attempt ${attempt} error:`, errorMsg) if (attempt < maxRetries) { const delay = Math.min(500 * Math.pow(2, attempt - 1), 3000) await new Promise((resolve) => setTimeout(resolve, delay)) } } } console.warn(`[v0] getAllOrders completed with ${allOrders.length} orders`) return allOrders }, async getAllFreeGameOrders(): Promise<Order[]> { if (!supabase) throw new Error("Supabase not initialized") try { // Query only free game orders (amount = 0 or tracking_id starts with FREE-) const { data, error } = await supabase .from("orders") .select( ` id, tracking_id, amount, items, created_at, updated_at, customer_name, user_name, user_email, user_id, additional_comments, status, tokens_processed `, ) .or(`amount.eq.0,tracking_id.ilike.FREE-%`) .order("created_at", { ascending: false }) if (error) throw new Error(`Failed to fetch free game orders: ${error.message}`) return (data as Order[]) || [] } catch (error: any) { console.error("Fetch free game orders error:", error) return [] } }, async deleteOrder(trackingId: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { console.log("[v0] Attempting to delete order:", trackingId) const { data, error } = await supabase.from("orders").delete().eq("tracking_id", trackingId).select() if (error) { console.error("[v0] Delete order error:", error) throw new Error(`Failed to delete order: ${error.message}`) } console.log("[v0] Order deleted successfully:", data) } catch (error: any) { console.error("[v0] Delete order error:", error) throw error } }, subscribeToOrders: (callback: (order: Order) => void) => { if (!supabase) { console.warn("Supabase not initialized, cannot subscribe to orders") return () => {} } try { const channel = supabase .channel("orders-changes") .on("postgres_changes", { event: "INSERT", schema: "public", table: "orders" }, (payload: any) => { console.log("📬 New order received:", payload.new.tracking_id) callback(payload.new as Order) }) .on("postgres_changes", { event: "UPDATE", schema: "public", table: "orders" }, (payload: any) => { console.log("📝 Order updated:", payload.new.tracking_id) callback(payload.new as Order) }) .subscribe((status) => { console.log("Subscription status:", status) }) return () => { console.log("Unsubscribing from orders") supabase.removeChannel(channel) } } catch (error) { console.error("Error setting up orders subscription:", error) return () => {} } }, // Logic has been moved to app/actions/order.ts } // Code Request Service export const codeRequestService = { async createCodeRequest(requestData: Partial<CodeRequest>): Promise<CodeRequest> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("code_requests").insert([requestData]).select().single() if (error) throw new Error(`Failed to create code request: ${error.message}`) return data as CodeRequest }, async getAllCodeRequests(): Promise<CodeRequest[]> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("code_requests").select("").order("created_at", { ascending: false }) if (error) throw new Error(`Failed to fetch code requests: ${error.message}`) return (data || []) as CodeRequest[] }, async updateCodeRequestStatus(id: string, status: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase .from("code_requests") .update({ status, updated_at: new Date().toISOString() }) .eq("id", id) if (error) throw new Error(`Failed to update code request: ${error.message}`) }, async deleteCodeRequest(id: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase.from("code_requests").delete().eq("id", id) if (error) throw new Error(`Failed to delete code request: ${error.message}`) }, subscribeToCodeRequests(callback: (request: CodeRequest) => void) { if (!supabase) return () => {} const channel = supabase .channel("code-requests-changes") .on("postgres_changes", { event: "INSERT", schema: "public", table: "code_requests" }, (payload: any) => { const req = payload.new as CodeRequest if (req) callback(req) }) .on("postgres_changes", { event: "UPDATE", schema: "public", table: "code_requests" }, (payload: any) => { const req = payload.new as CodeRequest if (req) callback(req) }) .subscribe() return () => supabase.removeChannel(channel) }, } // Library Service export const libraryService = { async checkGameInLibrary(userId: string, gameId: string) { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("library") .select("id") .eq("user_id", userId) .eq("game_id", gameId) .maybeSingle() if (error) throw error return !!data }, async addToLibrary( userId: string, gameId: string, gameTitle: string, gameImage: string | null, gameUsername?: string | null, gamePassword?: string | null, ) { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("library") .insert([ { user_id: userId, game_id: gameId, game_title: gameTitle, game_image: gameImage, game_username: gameUsername, game_password: gamePassword, status: "active", }, ]) .select() if (error) { if ((error as any).code === "23505" || (error as any).message?.includes("duplicate key")) { throw new Error("DUPLICATE_ENTRY") } throw error } return data }, async loadLibrary(userId: string) { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("library") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) throw error return data || [] }, async removeFromLibrary(userId: string, gameId: string) { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase.from("library").delete().eq("user_id", userId).eq("game_id", gameId) if (error) throw error return true }, } // User Service export const userService = { async getRealAuthenticatedUsers() { if (!supabase) return [] try { const { data: { user: currentUser }, } = await supabase.auth.getUser() let allUsers: any[] = [] try { const { data: adminUsers, error: adminError } = await supabase.auth.admin.listUsers() if (adminError) { if (currentUser) allUsers = [currentUser] } else { allUsers = (adminUsers as any).users || [] } } catch { if (currentUser) allUsers = [currentUser] } const realUsers = allUsers .filter((user) => (user as any).email_confirmed_at || (user as any).id === currentUser?.id) .map((user: any) => { let username = "Unknown User" if (user.user_metadata?.username) username = user.user_metadata.username else if (user.user_metadata?.name) username = user.user_metadata.name else if (user.user_metadata?.full_name) username = user.user_metadata.full_name else if (user.email) username = user.email.split("@")[0] return { id: user.id, email: user.email, username, provider: user.app_metadata?.provider || "email", created_at: user.created_at, last_sign_in_at: user.last_sign_in_at, email_confirmed_at: user.email_confirmed_at, is_current_user: user.id === currentUser?.id, status: user.id === currentUser?.id ? "ONLINE" : "OFFLINE", } }) return realUsers } catch (error) { console.error("Error getting authenticated users:", error) return [] } }, async trackUserLogin(userId: string, email: string) { if (!supabase) return { success: false, error: "Supabase not initialized" } try { const { data, error } = await supabase .from("user_logins") .insert({ user_id: userId, email: email.toLowerCase().trim(), logged_at: new Date().toISOString(), }) .select() .single() if (error) { console.error("[v0] Error tracking user login:", error) return { success: false, error: error.message } } console.log("[v0] User login tracked successfully:", data) return { success: true, data } } catch (error) { console.error("[v0] Exception tracking user login:", error) return { success: false, error: String(error) } } }, async getAllTrackedUserLogins() { if (!supabase) return [] try { // Get unique users with their most recent login const { data, error } = await supabase .from("user_logins") .select("user_id, email, logged_at") .order("logged_at", { ascending: false }) if (error) { console.error("[v0] Error fetching tracked user logins:", error) return [] } // Group by email to get unique users with first and last login times const userMap = new Map< string, { user_id: string email: string first_login: string last_login: string login_count: number } >() for (const login of data || []) { const existing = userMap.get(login.email) if (!existing) { userMap.set(login.email, { user_id: login.user_id, email: login.email, first_login: login.logged_at, last_login: login.logged_at, login_count: 1, }) } else { // Update last_login to the most recent if (new Date(login.logged_at) > new Date(existing.last_login)) { existing.last_login = login.logged_at } // Update first_login to the earliest if (new Date(login.logged_at) < new Date(existing.first_login)) { existing.first_login = login.logged_at } existing.login_count++ } } // Convert map to array and sort by last login (most recent first) const uniqueUsers = Array.from(userMap.values()).sort( (a, b) => new Date(b.last_login).getTime() - new Date(a.last_login).getTime(), ) console.log("[v0] Fetched tracked user logins:", uniqueUsers.length) return uniqueUsers } catch (error) { console.error("[v0] Exception fetching tracked user logins:", error) return [] } }, async getUserActivity(userId: string) { if (!supabase) return { orders: [], library: [], totalOrders: 0, totalLibraryGames: 0 } try { const { data: orders } = await supabase .from("orders") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) const { data: library } = await supabase .from("library") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) return { orders: orders || [], library: library || [], totalOrders: orders?.length || 0, totalLibraryGames: library?.length || 0, } } catch { return { orders: [], library: [], totalOrders: 0, totalLibraryGames: 0 } } }, } // Game Service export const gameService = { async getTrendingGames(): Promise<TrendingGame[]> { if (!supabase) return [] const { data, error } = await supabase .from("games") .select("") .eq("is_trending", true) .order("created_at", { ascending: false }) .limit(12) if (error) return [] return (data || []) as TrendingGame[] }, async getAllGames(): Promise<TrendingGame[]> { if (!supabase) return [] const { data, error } = await supabase.from("games").select("").order("created_at", { ascending: false }) if (error) return [] return (data || []) as TrendingGame[] }, async getGameById(id: string): Promise<TrendingGame | null> { if (!supabase) return null const { data, error } = await supabase.from("games").select("").eq("id", id).single() if (error) return null return data as TrendingGame }, async getGamesByCategory(category: string): Promise<TrendingGame[]> { if (!supabase) return [] const { data, error } = await supabase .from("games") .select("") .eq("category", category) .order("created_at", { ascending: false }) if (error) return [] return (data || []) as TrendingGame[] }, async createGame(gameData: Partial<TrendingGame>): Promise<TrendingGame> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("games").insert([gameData]).select().single() if (error) throw new Error(`Failed to create game: ${error.message}`) return data as TrendingGame }, async updateGame(id: string, updates: Partial<TrendingGame>): Promise<TrendingGame> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("games").update(updates).eq("id", id).select().single() if (error) throw new Error(`Failed to update game: ${error.message}`) return data as TrendingGame }, async deleteGame(id: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase.from("games").delete().eq("id", id) if (error) throw new Error(`Failed to delete game: ${error.message}`) }, } // Realtime helpers export const subscribeToOrders = (callback: (payload: any) => void) => { if (!supabase) return () => {} return supabase .channel("orders") .on("postgres_changes", { event: "", schema: "public", table: "orders" }, callback) .subscribe() } export const subscribeToCodeRequests = (callback: (payload: any) => void) => { if (!supabase) return () => {} return supabase .channel("code_requests") .on("postgres_changes", { event: "", schema: "public", table: "code_requests" }, callback) .subscribe() } // Accounts Service export const accountsService = { async createSubmission(provider: string, message: string, tempId?: string): Promise<AccountSubmission> { if (!supabase) throw new Error("Supabase not initialized") const trackingId = await generateUniqueTrackingId() const payloadWithTemp = { user_id: null as string | null, user_email: null as string | null, temp_id: tempId || null, tracking_id: trackingId, provider, message, customer_name: null as string | null, game_title: null as string | null, status: "pending" as const, } try { const { data: { user }, } = await supabase.auth.getUser() if (user) { ;(payloadWithTemp as any).user_id = user.id ;(payloadWithTemp as any).user_email = (user as any).email ?? null } } catch { // ignore } const optionalKeys = ["customer_name", "game_title", "tracking_id", "temp_id"] const res = await safeInsertAccountSubmission(payloadWithTemp, optionalKeys) return res.data as AccountSubmission }, async submitOrUpdateAccountRequest(params: { provider: string name: string gameTitle?: string | null trackingId?: string | null tempId?: string | null }): Promise<{ submission: AccountSubmission; trackingId: string }> { if (!supabase) throw new Error("Supabase not initialized") const { provider, name, gameTitle, trackingId, tempId } = params if (trackingId) { const existing = await this.getSubmissionByTrackingId(trackingId) if (existing) { const updatePayloadFull: any = { provider: provider || existing.provider, customer_name: name ?? existing.customer_name, game_title: gameTitle ?? existing.game_title, temp_id: tempId ?? existing.temp_id, updated_at: new Date().toISOString(), } const optionalUpdateKeys = ["customer_name", "game_title", "temp_id"] const upd = await safeUpdateAccountSubmission(existing.id, updatePayloadFull, optionalUpdateKeys) return { submission: upd.data as AccountSubmission, trackingId } } } const newTracking = await generateUniqueTrackingId() const message = `New account request from ${name}${gameTitle ? ` for ${gameTitle}` : ""}.` const insertPayloadFull: any = { user_id: null as string | null, user_email: null as string | null, temp_id: tempId || null, tracking_id: newTracking, provider, message, customer_name: name, game_title: gameTitle ?? null, status: "pending" as const, } try { const { data: { user }, } = await supabase.auth.getUser() if (user) { insertPayloadFull.user_id = user.id insertPayloadFull.user_email = (user as any).email ?? null } } catch { // ignore } const optionalInsertKeys = ["customer_name", "game_title", "tracking_id", "temp_id"] const ins = await safeInsertAccountSubmission(insertPayloadFull, optionalInsertKeys) return { submission: ins.data as AccountSubmission, trackingId: newTracking } }, async listForClient(tempId?: string): Promise<AccountSubmission[]> { if (!supabase) return [] try { const { data: { user }, } = await supabase.auth.getUser() if (user) { const { data, error } = await supabase .from("account_submissions") .select("") .eq("user_id", user.id) .order("created_at", { ascending: false }) if (error) throw error return (data ?? []) as AccountSubmission[] } if (tempId) { const { data, error } = await supabase .from("account_submissions") .select("") .eq("temp_id", tempId) .order("created_at", { ascending: false }) if (error) { if (isMissingColumnError(error, "temp_id")) { return [] } throw error } return (data ?? []) as AccountSubmission[] } return [] } catch { return [] } }, async listAllSubmissions(): Promise<AccountSubmission[]> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("account_submissions") .select("") .order("created_at", { ascending: false }) if (error) throw new Error(error.message || "Failed to fetch submissions") return (data ?? []) as AccountSubmission[] }, async saveCredentials(id: string, accountId: string, password: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase .from("account_submissions") .update({ account_id: accountId, account_password: password, status: "completed" }) .eq("id", id) if (error) throw new Error(error.message || "Failed to save credentials") }, subscribeToAll(callback: (submission: AccountSubmission) => void) { if (!supabase) return () => {} const channel = supabase .channel("account-submissions-changes") .on("postgres_changes", { event: "INSERT", schema: "public", table: "account_submissions" }, (payload: any) => { const sub = payload.new as AccountSubmission | null if (sub) callback(sub) }) .on("postgres_changes", { event: "UPDATE", schema: "public", table: "account_submissions" }, (payload: any) => { const sub = payload.new as AccountSubmission | null if (sub) callback(sub) }) .subscribe() return () => supabase.removeChannel(channel) }, subscribeForClient(callback: (submission: AccountSubmission) => void, tempId?: string) { if (!supabase) return () => {} let uid: string | null = null supabase.auth.getUser().then(({ data: { user } }: any) => { uid = user?.id ?? null }) const off = this.subscribeToAll((sub) => { if (!sub) return if ((uid && sub.user_id === uid) || (!uid && tempId && sub.temp_id === tempId)) { callback(sub) } }) return off }, async getSubmissionByTrackingId(trackingId: string): Promise<AccountSubmission | null> { if (!supabase) return null const { data, error } = await supabase .from("account_submissions") .select("") .eq("tracking_id", trackingId) .single() if (error) { if ((error as any).code === "PGRST116") return null if (isMissingColumnError(error, "tracking_id")) return null throw new Error(error.message || "Failed to fetch submission") } return (data as AccountSubmission) || null }, } // Support Ticket Service export const supportTicketService = { async createTicket(params: { name: string trackingId: string priority: string message: string tempId?: string | null screenshotUrl?: string | null }): Promise<SupportTicket> { if (!supabase) throw new Error("Supabase not initialized") const payload: any = { name: params.name, tracking_id: params.trackingId, priority: params.priority, message: params.message, status: "pending", temp_id: params.tempId || null, user_id: null as string | null, screenshot_url: params.screenshotUrl || null, } try { const { data: { user }, } = await supabase.auth.getUser() if (user) { payload.user_id = user.id } } catch { // ignored } const { data, error } = await supabase.from("support_tickets").insert([payload]).select().single() if (error) throw new Error(error.message || "Failed to create support ticket") return data as SupportTicket }, async listAll(): Promise<SupportTicket[]> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("support_tickets").select("").order("created_at", { ascending: false }) if (error) throw new Error(error.message || "Failed to load tickets") return (data || []) as SupportTicket[] }, async listForClient(params: { tempId?: string | null; userId?: string | null }) { if (!supabase) throw new Error("Supabase not initialized") const { tempId, userId } = params if (userId) { const { data, error } = await supabase .from("support_tickets") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) throw new Error(error.message) return (data || []) as SupportTicket[] } if (tempId) { const { data, error } = await supabase .from("support_tickets") .select("") .eq("temp_id", tempId) .order("created_at", { ascending: false }) if (error) throw new Error(error.message) return (data || []) as SupportTicket[] } return [] }, async updateStatus(id: string, status: "pending" | "resolved" | "closed") { if (!supabase) throw new Error("Supabase not initialized") const { error } = await supabase .from("support_tickets") .update({ status, updated_at: new Date().toISOString() }) .eq("id", id) if (error) throw new Error(error.message || "Failed to update ticket") }, subscribeToAll(callback: (ticket: SupportTicket) => void) { if (!supabase) return () => {} try { const channel = supabase .channel("support-tickets-changes") .on("postgres_changes", { event: "INSERT", schema: "public", table: "support_tickets" }, (payload: any) => { const t = payload.new as SupportTicket if (t) callback(t) }) .on("postgres_changes", { event: "UPDATE", schema: "public", table: "support_tickets" }, (payload: any) => { const t = payload.new as SupportTicket if (t) callback(t) }) .subscribe() return () => supabase.removeChannel(channel) } catch (error) { console.error("Error setting up support tickets subscription:", error) return () => {} } }, subscribeToTicket(id: string, callback: (ticket: SupportTicket) => void) { return this.subscribeToAll((t) => { if (t.id === id) callback(t) }) }, } // Dashboard Service export const dashboardService = { async getDashboardMetrics() { if (!supabase) { throw new Error("Supabase not initialized") } try { // Fetch all orders const { data: orders, error: ordersError } = await supabase .from("orders") .select("id, amount, status, created_at, tokens_processed, user_id, code_requested") // Include tokens_processed and user_id for active users calculation .order("created_at", { ascending: false }) if (ordersError) throw new Error(`Failed to fetch orders: ${ordersError.message}`) // Fetch all authenticated users let totalUsers = 0 try { const { data: { users }, error: usersError, } = await supabase.auth.admin.listUsers() if (!usersError && users) { totalUsers = users.filter((u) => (u as any).email_confirmed_at).length } } catch { totalUsers = 0 } // Calculate metrics from orders const totalOrders = orders?.length || 0 const totalRevenue = (orders || []).reduce((sum, order) => sum + (order.amount || 0), 0) const pendingOrders = (orders || []).filter((o) => o.status === "pending").length const completedOrders = (orders || []).filter((o) => o.status === "completed").length const processedTokenOrders = (orders || []).filter((o) => o.tokens_processed).length // Calculate active users (last seen within 5 minutes) - Considering orders with code_requested const fiveMinutesAgo = new Date(Date.now() - 5 60 * 1000) const activeUserIds = new Set<string>() ;(orders || []).forEach((order) => { if (new Date(order.created_at) > fiveMinutesAgo && order.user_id && order.code_requested) { activeUserIds.add(order.user_id) } }) const activeUsers = activeUserIds.size return { totalUsers, totalOrders, totalRevenue, activeUsers, pendingOrders, completedOrders, processedTokenOrders, } } catch (error: any) { console.error("[v0] Error fetching dashboard metrics:", error) throw error } }, } // Library Code Request Service export const libraryCodeRequestService = { async requestGameCode( libraryId: string, userId: string, gameId: string, gameTitle: string, customerEmail: string, ): Promise<LibraryCodeRequest> { if (!supabase) throw new Error("Supabase not initialized") // First, update the order to set code_requested flag const orderUpdateResult = await supabase .from("orders") .update({ code_requested: true, code_request_id: null, // Will be set by the library_code_requests insert code_request_status: "pending", updated_at: new Date().toISOString(), }) .eq("id", libraryId) // Assuming libraryId is actually the orderId here for this update if (orderUpdateResult.error) { console.error("Error updating order for code request:", orderUpdateResult.error) throw new Error("Failed to prepare order for code request.") } const { data, error } = await supabase .from("library_code_requests") .insert([ { library_id: libraryId, user_id: userId, game_id: gameId, game_title: gameTitle, customer_email: customerEmail, status: "pending", }, ]) .select() .single() if (error) { if ((error as any).code === "23505" || (error as any).message?.includes("duplicate")) { throw new Error("CODE_REQUEST_EXISTS") } throw error } // Update the order again with the new request ID and status const finalOrderUpdateResult = await supabase .from("orders") .update({ code_request_id: data.id, code_request_status: "pending", updated_at: new Date().toISOString(), }) .eq("id", libraryId) // Assuming libraryId is the orderId if (finalOrderUpdateResult.error) { console.error("Error finalizing order update for code request:", finalOrderUpdateResult.error) // Consider rolling back the library_code_requests insert if this fails critically } return data as LibraryCodeRequest }, async getCodeRequest(libraryId: string): Promise<LibraryCodeRequest | null> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("library_code_requests") .select("") .eq("library_id", libraryId) .single() if (error && (error as any).code !== "PGRST116") throw error // Ignore "no rows" error return (data || null) as LibraryCodeRequest | null }, async getAllCodeRequests(): Promise<LibraryCodeRequest[]> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase .from("library_code_requests") .select("") .order("created_at", { ascending: false }) if (error) throw error return (data || []) as LibraryCodeRequest[] }, async assignGameCode(requestId: string, gameCode: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") // Check if code is already used const { data: existingCode, error: checkError } = await supabase .from("library_code_requests") .select("id") .eq("game_code", gameCode) .neq("id", requestId) .single() if (checkError && (checkError as any).code !== "PGRST116") throw checkError if (existingCode) throw new Error("CODE_ALREADY_USED") const { data: requestData, error: requestFetchError } = await supabase .from("library_code_requests") .select("library_id, user_id") // Fetch library_id to update the order .eq("id", requestId) .single() if (requestFetchError) throw requestFetchError if (!requestData) throw new Error("Code request not found") const { error: updateError } = await supabase .from("library_code_requests") .update({ status: "delivered", game_code: gameCode, updated_at: new Date().toISOString(), }) .eq("id", requestId) if (updateError) throw updateError // Update the corresponding order's status const { error: orderUpdateError } = await supabase .from("orders") .update({ code_request_status: "fulfilled", updated_at: new Date().toISOString(), }) .eq("id", requestData.library_id) // Use library_id from requestData to update the order if (orderUpdateError) throw orderUpdateError }, async cancelCodeRequest(requestId: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") const { data: requestData, error: requestFetchError } = await supabase .from("library_code_requests") .select("library_id") // Fetch library_id to update the order .eq("id", requestId) .single() if (requestFetchError) throw requestFetchError if (!requestData) throw new Error("Code request not found") const { error } = await supabase .from("library_code_requests") .update({ status: "cancelled", updated_at: new Date().toISOString(), }) .eq("id", requestId) if (error) throw error // Update the corresponding order's status const { error: orderUpdateError } = await supabase .from("orders") .update({ code_request_status: "cancelled", updated_at: new Date().toISOString(), }) .eq("id", requestData.library_id) // Use library_id from requestData to update the order if (orderUpdateError) throw orderUpdateError }, subscribeToCodeRequests(userId: string, callback: (request: LibraryCodeRequest) => void) { if (!supabase) return () => {} const channel = supabase .channel(`library-codes-${userId}`) .on( "postgres_changes", { event: "", schema: "public", table: "library_code_requests", filter: `user_id=eq.${userId}`, }, (payload: any) => { const req = payload.new as LibraryCodeRequest if (req) callback(req) }, ) .subscribe() return () => supabase.removeChannel(channel) }, async getUserCodeRequests(userId: string): Promise<LibraryCodeRequest[]> { if (!supabase) throw new Error("Supabase not initialized") const { data, error } = await supabase.from("library_code_requests").select("").eq("user_id", userId) if (error) throw error return (data || []) as LibraryCodeRequest[] }, } // Redeem Request Service export const redeemRequestService = { async createRedeemRequest(userId: string, redeemCode: string): Promise<RedeemRequest> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase .from("redeem_requests") .insert([ { user_id: userId, redeem_code: redeemCode.trim().toUpperCase(), status: "pending", }, ]) .select() .single() if (error) throw new Error(`Failed to create redeem request: ${error.message}`) return data as RedeemRequest } catch (error: any) { console.error("Create redeem request error:", error) throw error } }, async getUserRedeemRequests(userId: string): Promise<RedeemRequest[]> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase .from("redeem_requests") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) throw error return (data || []) as RedeemRequest[] } catch (error: any) { console.error("Get user redeem requests error:", error) throw error } }, async getAllRedeemRequests(): Promise<RedeemRequest[]> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase .from("redeem_requests") .select("") .order("created_at", { ascending: false }) if (error) throw error return (data || []) as RedeemRequest[] } catch (error: any) { console.error("Get all redeem requests error:", error) throw error } }, async approveRedeemRequest(requestId: string, tokensAmount: number): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { // Get the redeem request const { data: request, error: fetchError } = await supabase .from("redeem_requests") .select("user_id") .eq("id", requestId) .single() if (fetchError) throw fetchError if (!request) throw new Error("Redeem request not found") const userId = request.user_id // Update redeem request status const { error: updateError } = await supabase .from("redeem_requests") .update({ status: "approved", approved_at: new Date().toISOString(), tokens_amount: tokensAmount, updated_at: new Date().toISOString(), }) .eq("id", requestId) if (updateError) throw updateError // Update or create user wallet const { data: existingWallet, error: walletFetchError } = await supabase .from("user_wallets") .select("") .eq("user_id", userId) .single() if (walletFetchError && (walletFetchError as any).code !== "PGRST116") { throw walletFetchError } if (existingWallet) { // Update existing wallet const { error: walletUpdateError } = await supabase .from("user_wallets") .update({ wizard_tokens: existingWallet.wizard_tokens + tokensAmount, total_tokens_earned: existingWallet.total_tokens_earned + tokensAmount, updated_at: new Date().toISOString(), }) .eq("user_id", userId) if (walletUpdateError) throw walletUpdateError } else { // Create new wallet const { error: walletCreateError } = await supabase.from("user_wallets").insert([ { user_id: userId, wizard_tokens: tokensAmount, total_tokens_earned: tokensAmount, total_tokens_spent: 0, }, ]) if (walletCreateError) throw walletCreateError } } catch (error: any) { console.error("Approve redeem request error:", error) throw error } }, async rejectRedeemRequest(requestId: string): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { const { error } = await supabase .from("redeem_requests") .update({ status: "rejected", updated_at: new Date().toISOString(), }) .eq("id", requestId) if (error) throw error } catch (error: any) { console.error("Reject redeem request error:", error) throw error } }, subscribeToRedeemRequests(callback: (request: RedeemRequest) => void) { if (!supabase) return () => {} try { const channel = supabase .channel("redeem-requests-changes") .on("postgres_changes", { event: "", schema: "public", table: "redeem_requests" }, (payload: any) => { callback(payload.new as RedeemRequest) }) .subscribe() return () => supabase.removeChannel(channel) } catch (error) { console.error("Error setting up redeem requests subscription:", error) return () => {} } }, } // User Wallet Service export const userWalletService = { async getOrCreateWallet(userId: string): Promise<UserWallet> { if (!supabase) throw new Error("Supabase not initialized") try { const { data: existingWallet, error: fetchError } = await supabase .from("user_wallets") .select("") .eq("user_id", userId) .single() if (fetchError && (fetchError as any).code !== "PGRST116") { throw fetchError } if (existingWallet) { return existingWallet as UserWallet } // Create new wallet if it doesn't exist const { data: newWallet, error: createError } = await supabase .from("user_wallets") .insert([ { user_id: userId, wizard_tokens: 0, total_tokens_earned: 0, total_tokens_spent: 0, }, ]) .select() .single() if (createError) throw createError return newWallet as UserWallet } catch (error: any) { console.error("Get or create wallet error:", error) throw error } }, async getUserWallet(userId: string): Promise<UserWallet | null> { if (!supabase) throw new Error("Supabase not initialized") try { const { data, error } = await supabase.from("user_wallets").select("").eq("user_id", userId).single() if (error && (error as any).code === "PGRST116") { return null } if (error) throw error return data as UserWallet } catch (error: any) { console.error("Get user wallet error:", error) throw error } }, async deductTokens(userId: string, tokensAmount: number): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { const { error } = await supabase.rpc("deduct_tokens_atomic", { target_user_id: userId, amount_to_deduct: tokensAmount, }) if (error) throw error console.log(`[v0] Atomic deduction of ${tokensAmount} tokens for user ${userId} successful`) } catch (error: any) { console.error("Deduct tokens error:", error) throw error } }, async addTokens(userId: string, tokensAmount: number): Promise<void> { if (!supabase) throw new Error("Supabase not initialized") try { const { error } = await supabase.rpc("add_tokens_atomic", { target_user_id: userId, amount_to_add: tokensAmount, }) if (error) throw error console.log(`[v0] Atomic addition of ${tokensAmount} tokens for user ${userId} successful`) } catch (error: any) { console.error("Add tokens error:", error) throw error } }, } export const userManagementService = { async adjustUserTokens(userId: string, adminId: string, tokenAmount: number, note?: string) { if (!supabase) return null try { // Get current wallet const { data: wallet } = await supabase.from("user_wallets").select("").eq("user_id", userId).single() if (!wallet) return null const newBalance = wallet.wizard_tokens + tokenAmount // Update wallet const { data: updatedWallet, error: updateError } = await supabase .from("user_wallets") .update({ wizard_tokens: newBalance, total_tokens_earned: tokenAmount > 0 ? wallet.total_tokens_earned + tokenAmount : wallet.total_tokens_earned, updated_at: new Date().toISOString(), }) .eq("user_id", userId) .select() .single() if (updateError) throw updateError // Create audit log await supabase.from("user_audit_logs").insert({ user_id: userId, admin_id: adminId, action_type: "TOKEN_ADJUSTMENT", description: `Token adjustment: ${tokenAmount > 0 ? "+" : ""}${tokenAmount} tokens`, token_change: tokenAmount, previous_balance: wallet.wizard_tokens, new_balance: newBalance, note: note || null, }) return updatedWallet } catch (error) { console.error("Error adjusting tokens:", error) return null } }, async getAuditLogs(userId: string) { if (!supabase) return [] try { const { data, error } = await supabase .from("user_audit_logs") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) if (error) throw error return data || [] } catch (error) { console.error("Error fetching audit logs:", error) return [] } }, } [V0_FILE]sql:file="scripts/add-profile-fields-to-auth.sql" isMerged="true" -- Add profile fields to user metadata -- This script ensures the user_metadata fields are available for storing profile data -- Note: Supabase auth.users table automatically has user_metadata JSONB column -- We'll create a public.user_profiles table to track username changes for audit purposes create table if not exists public.user_profiles ( id uuid primary key references auth.users(id) on delete cascade, display_name text, avatar_url text, username_last_changed_at timestamp with time zone, created_at timestamp with time zone default now(), updated_at timestamp with time zone default now() ); alter table public.user_profiles enable row level security; -- RLS Policies for user_profiles table create policy "users_can_view_own_profile" on public.user_profiles for select using (auth.uid() = id); create policy "users_can_update_own_profile" on public.user_profiles for update using (auth.uid() = id); create policy "users_can_insert_own_profile" on public.user_profiles for insert with check (auth.uid() = id); -- Auto-create profile on signup create or replace function public.handle_new_user_profile() returns trigger language plpgsql security definer set search_path = public as $$ begin insert into public.user_profiles (id, display_name) values (new.id, coalesce(new.raw_user_meta_data ->> 'display_name', new.email)) on conflict (id) do nothing; return new; end; $$; drop trigger if exists on_auth_user_created_profile on auth.users; create trigger on_auth_user_created_profile after insert on auth.users for each row execute function public.handle_new_user_profile(); [V0_FILE]sql:file="scripts/create-public-uploads-storage-bucket.sql" isMerged="true" -- Create the public-uploads storage bucket for profile photos -- This bucket will store user profile images with public read access -- Check if bucket exists, if not create it INSERT INTO storage.buckets (id, name, public) VALUES ('public-uploads', 'public-uploads', true) ON CONFLICT (id) DO NOTHING; -- Set up RLS policies for the public-uploads bucket -- Policy 1: Allow authenticated users to upload to their own profile-photos folder CREATE POLICY "Allow authenticated users to upload profile photos" ON storage.objects FOR INSERT WITH CHECK ( bucket_id = 'public-uploads' AND auth.role() = 'authenticated' AND (storage.foldername(name))[1] = 'profile-photos' ); -- Policy 2: Allow authenticated users to update their own profile photos CREATE POLICY "Allow authenticated users to update profile photos" ON storage.objects FOR UPDATE WITH CHECK ( bucket_id = 'public-uploads' AND auth.role() = 'authenticated' AND (storage.foldername(name))[1] = 'profile-photos' ); -- Policy 3: Allow public read access to profile photos CREATE POLICY "Allow public read access to profile photos" ON storage.objects FOR SELECT USING ( bucket_id = 'public-uploads' AND (storage.foldername(name))[1] = 'profile-photos' ); -- Policy 4: Allow authenticated users to delete their own profile photos CREATE POLICY "Allow authenticated users to delete profile photos" ON storage.objects FOR DELETE USING ( bucket_id = 'public-uploads' AND auth.role() = 'authenticated' AND (storage.foldername(name))[1] = 'profile-photos' ); [V0_FILE]typescriptreact:file="components/edit-profile-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { X, Save, ImageIcon, AlertCircle, Loader2 } from "lucide-react" import { toast } from "sonner" import { supabase } from "@/lib/supabase" import type { User } from "@supabase/supabase-js" interface EditProfileModalProps { isOpen: boolean onClose: () => void user: User | null onProfileUpdate?: () => void } export function EditProfileModal({ isOpen, onClose, user, onProfileUpdate }: EditProfileModalProps) { const [displayName, setDisplayName] = useState( user?.user_metadata?.display_name || user?.user_metadata?.username || user?.email?.split("@")[0] || "", ) const [profilePhoto, setProfilePhoto] = useState<File | null>(null) const [previewUrl, setPreviewUrl] = useState<string | null>(user?.user_metadata?.avatar_url || null) const [isSaving, setIsSaving] = useState(false) const [isUploading, setIsUploading] = useState(false) const [canChangeUsername, setCanChangeUsername] = useState(true) const [usernameChangeMessage, setUsernameChangeMessage] = useState("") const [originalDisplayName, setOriginalDisplayName] = useState( user?.user_metadata?.display_name || user?.user_metadata?.username || user?.email?.split("@")[0] || "", ) useEffect(() => { if (user?.user_metadata?.username_last_changed_at) { const lastChanged = new Date(user.user_metadata.username_last_changed_at) const sixtyDaysAgo = new Date(Date.now() - 60 * 24 * 60 * 60 * 1000) if (lastChanged > sixtyDaysAgo) { setCanChangeUsername(false) const daysLeft = Math.ceil((lastChanged.getTime() - sixtyDaysAgo.getTime()) / (24 * 60 * 60 * 1000)) setUsernameChangeMessage(`You can change your username again in ${daysLeft} days.`) } } }, [user]) if (!isOpen || !user) return null const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0] if (!file) return // Validate file type if (!file.type.startsWith("image/")) { toast.error("Please select an image file (JPG or PNG)") return } // Validate file size (5MB max) if (file.size > 5 * 1024 * 1024) { toast.error("Image size must be less than 5MB") return } setProfilePhoto(file) const reader = new FileReader() reader.onloadend = () => { setPreviewUrl(reader.result as string) } reader.readAsDataURL(file) } const uploadProfilePhoto = async (): Promise<string | null> => { if (!profilePhoto) { return user.user_metadata?.avatar_url || null } setIsUploading(true) try { // Convert file to base64 data URL for immediate display const reader = new FileReader() return new Promise((resolve, reject) => { reader.onload = () => { const dataUrl = reader.result as string resolve(dataUrl) } reader.onerror = () => { reject(new Error("Failed to read file")) } reader.readAsDataURL(profilePhoto) }) } finally { setIsUploading(false) } } const handleSave = async (e: React.FormEvent) => { e.preventDefault() if (!displayName.trim()) { toast.error("Please enter a display name") return } const usernameChanged = displayName !== originalDisplayName if (usernameChanged && !canChangeUsername) { toast.error("You can only change your username once every 60 days") return } setIsSaving(true) try { let photoUrl = user.user_metadata?.avatar_url || null if (profilePhoto) { photoUrl = await uploadProfilePhoto() } const updateData: any = { display_name: displayName, avatar_url: photoUrl, } if (usernameChanged) { updateData.username_last_changed_at = new Date().toISOString() } const { error: updateError } = await supabase.auth.updateUser({ data: updateData, }) if (updateError) throw updateError try { await supabase.from("user_profiles").upsert({ id: user.id, display_name: displayName, avatar_url: photoUrl, username_last_changed_at: usernameChanged ? new Date().toISOString() : undefined, updated_at: new Date().toISOString(), }) } catch (profileError) { // Log but don't fail the whole operation console.error("[v0] Profile table update error:", profileError) } toast.success("Profile updated successfully!") onProfileUpdate?.() onClose() } catch (error: any) { console.error("Error updating profile:", error) toast.error(error.message || "Failed to update profile. Please try again.") } finally { setIsSaving(false) } } const handleCancel = () => { setDisplayName(originalDisplayName) setProfilePhoto(null) setPreviewUrl(user.user_metadata?.avatar_url || null) onClose() } const isDisplayNameChanged = displayName !== originalDisplayName return ( <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"> <div className="w-full max-w-md bg-gradient-to-br from-[#1a1d21] to-[#0E1012] border border-white/10 rounded-lg shadow-2xl"> {/* Header /} <div className="flex items-center justify-between p-6 border-b border-white/10"> <h2 className="text-xl font-bold text-white">Edit Profile</h2> <button onClick={handleCancel} className="text-gray-400 hover:text-white transition-colors"> <X className="w-5 h-5" /> </button> </div> {/ Content /} <form onSubmit={handleSave} className="p-6 space-y-6"> {/ Profile Photo /} <div className="space-y-3"> <Label className="text-white font-medium">Profile Photo</Label> <div className="flex items-center gap-4"> {previewUrl ? ( <img src={previewUrl || "/placeholder.svg"} alt="Profile preview" className="w-16 h-16 rounded-full object-cover border border-white/20" /> ) : ( <div className="w-16 h-16 rounded-full bg-white/10 border border-white/20 flex items-center justify-center"> <ImageIcon className="w-6 h-6 text-gray-500" /> </div> )} <div className="flex-1"> <input type="file" accept="image/jpeg,image/png" onChange={handlePhotoChange} className="hidden" id="profile-photo" /> <label htmlFor="profile-photo" className="inline-block px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm rounded-lg cursor-pointer transition-colors" > Choose Image </label> <p className="text-xs text-gray-400 mt-2">JPG or PNG, max 5MB</p> </div> </div> </div> {/ Display Name /} <div className="space-y-3"> <Label htmlFor="display-name" className="text-white font-medium"> Display Name </Label> <Input id="display-name" type="text" value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Enter your display name" className="bg-gray-800/50 border-white/10 text-white placeholder-gray-500" /> {isDisplayNameChanged && !canChangeUsername && ( <div className="flex items-start gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"> <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" /> <p className="text-xs text-red-400">{usernameChangeMessage}</p> </div> )} </div> {/ Buttons /} <div className="flex gap-3 pt-4"> <Button type="button" onClick={handleCancel} variant="outline" className="flex-1 border-white/10 text-white hover:bg-white/5 bg-transparent" > Cancel </Button> <Button type="submit" disabled={isSaving || isUploading || (isDisplayNameChanged && !canChangeUsername)} className="flex-1 bg-blue-600 hover:bg-blue-700 gap-2 disabled:opacity-50 disabled:cursor-not-allowed" > {isSaving || isUploading ? ( <> <Loader2 className="w-4 h-4 animate-spin" /> Saving... </> ) : ( <> <Save className="w-4 h-4" /> Save Changes </> )} </Button> </div> </form> </div> </div> ) } [V0_FILE]typescriptreact:file="components/change-password-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { X, Eye, EyeOff, Loader2 } from "lucide-react" import { toast } from "sonner" import { supabase } from "@/lib/supabase" import { canChangePassword } from "@/lib/email-utils" interface ChangePasswordModalProps { isOpen: boolean onClose: () => void user?: any } export function ChangePasswordModal({ isOpen, onClose, user }: ChangePasswordModalProps) { const [currentPassword, setCurrentPassword] = useState("") const [newPassword, setNewPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [showCurrentPassword, setShowCurrentPassword] = useState(false) const [showNewPassword, setShowNewPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [passwordChangeCheck, setPasswordChangeCheck] = useState<{ allowed: boolean message?: string }>({ allowed: true }) useEffect(() => { if (isOpen && user) { const check = canChangePassword(user.user_metadata?.last_password_change) setPasswordChangeCheck(check) } }, [isOpen, user]) if (!isOpen) return null const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!passwordChangeCheck.allowed) { toast.error(passwordChangeCheck.message || "You cannot change your password at this time") return } if (!currentPassword || !newPassword || !confirmPassword) { toast.error("Please fill in all fields") return } if (newPassword !== confirmPassword) { toast.error("New passwords do not match") return } if (newPassword.length < 6) { toast.error("Password must be at least 6 characters long") return } if (currentPassword === newPassword) { toast.error("New password must be different from current password") return } setIsLoading(true) try { const { error } = await supabase.auth.updateUser({ password: newPassword, }) if (error) { if (error.message.includes("requires")) { toast.error("Please sign out and sign back in to change your password") return } toast.error(error.message || "Failed to change password") return } const { error: updateError } = await supabase.auth.updateUser({ data: { last_password_change: new Date().toISOString() }, }) if (updateError) { console.error("Failed to update password change timestamp:", updateError) } toast.success("Password changed successfully!") setCurrentPassword("") setNewPassword("") setConfirmPassword("") onClose() } catch (error) { console.error("Password change error:", error) toast.error("An unexpected error occurred") } finally { setIsLoading(false) } } const handleClose = () => { setCurrentPassword("") setNewPassword("") setConfirmPassword("") setShowCurrentPassword(false) setShowNewPassword(false) setShowConfirmPassword(false) onClose() } return ( <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="w-full max-w-md bg-[#1a1d21] border border-white/10 rounded-xl shadow-xl"> <div className="flex items-center justify-between p-6 border-b border-white/10"> <h2 className="text-xl font-bold text-white">Change Password</h2> <Button variant="ghost" size="sm" onClick={handleClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> </div> <form onSubmit={handleSubmit} className="p-6 space-y-4"> {!passwordChangeCheck.allowed && ( <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg"> <p className="text-red-300 text-sm">{passwordChangeCheck.message}</p> </div> )} <div className="space-y-2"> <Label htmlFor="current-password" className="text-gray-300"> Current Password </Label> <div className="relative"> <Input id="current-password" type={showCurrentPassword ? "text" : "password"} placeholder="Enter your current password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} className="bg-black/20 border-white/10 text-white placeholder:text-gray-600 focus:border-white/20 focus:ring-0 pr-10" disabled={isLoading || !passwordChangeCheck.allowed} /> <Button type="button" variant="ghost" size="sm" className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white" onClick={() => setShowCurrentPassword(!showCurrentPassword)} disabled={!passwordChangeCheck.allowed} > {showCurrentPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> </div> </div> <div className="space-y-2"> <Label htmlFor="new-password" className="text-gray-300"> New Password </Label> <div className="relative"> <Input id="new-password" type={showNewPassword ? "text" : "password"} placeholder="Enter your new password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} className="bg-black/20 border-white/10 text-white placeholder:text-gray-600 focus:border-white/20 focus:ring-0 pr-10" disabled={isLoading || !passwordChangeCheck.allowed} /> <Button type="button" variant="ghost" size="sm" className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white" onClick={() => setShowNewPassword(!showNewPassword)} disabled={!passwordChangeCheck.allowed} > {showNewPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> </div> </div> <div className="space-y-2"> <Label htmlFor="confirm-password" className="text-gray-300"> Confirm Password </Label> <div className="relative"> <Input id="confirm-password" type={showConfirmPassword ? "text" : "password"} placeholder="Confirm your new password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="bg-black/20 border-white/10 text-white placeholder:text-gray-600 focus:border-white/20 focus:ring-0 pr-10" disabled={isLoading || !passwordChangeCheck.allowed} /> <Button type="button" variant="ghost" size="sm" className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white" onClick={() => setShowConfirmPassword(!showConfirmPassword)} disabled={!passwordChangeCheck.allowed} > {showConfirmPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> </div> </div> <div className="flex gap-3 pt-4"> <Button type="button" variant="outline" onClick={handleClose} className="flex-1 border-white/10 text-white hover:bg-white/5 bg-transparent" disabled={isLoading} > Cancel </Button> <Button type="submit" className="flex-1 bg-red-600 hover:bg-red-700 text-white disabled:opacity-50 disabled:cursor-not-allowed" disabled={isLoading || !passwordChangeCheck.allowed} > {isLoading ? ( <> <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Updating... </> ) : ( "Update Password" )} </Button> </div> </form> </div> </div> ) } [V0_FILE]typescriptreact:file="components/change-email-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { X, Loader2, Mail } from "lucide-react" import { toast } from "sonner" import { supabase } from "@/lib/supabase" import { maskEmail, canChangeEmail } from "@/lib/email-utils" interface ChangeEmailModalProps { isOpen: boolean onClose: () => void currentEmail?: string user?: any } export function ChangeEmailModal({ isOpen, onClose, currentEmail, user }: ChangeEmailModalProps) { const [newEmail, setNewEmail] = useState("") const [isLoading, setIsLoading] = useState(false) const [verificationSent, setVerificationSent] = useState(false) const [emailChangeCheck, setEmailChangeCheck] = useState<{ allowed: boolean message?: string }>({ allowed: true }) useEffect(() => { if (isOpen && user) { const check = canChangeEmail(user.user_metadata?.last_email_change) setEmailChangeCheck(check) } }, [isOpen, user]) if (!isOpen) return null const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!emailChangeCheck.allowed) { toast.error(emailChangeCheck.message || "You cannot change your email at this time") return } if (!newEmail) { toast.error("Please enter a new email address") return } if (newEmail === currentEmail) { toast.error("New email must be different from current email") return } // Basic email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(newEmail)) { toast.error("Please enter a valid email address") return } setIsLoading(true) try { const { error } = await supabase.auth.updateUser({ email: newEmail.toLowerCase().trim(), }) if (error) { toast.error(error.message || "Failed to update email") return } const { error: updateError } = await supabase.auth.updateUser({ data: { last_email_change: new Date().toISOString() }, }) if (updateError) { console.error("Failed to update email change timestamp:", updateError) } setVerificationSent(true) toast.success("Verification email sent to your new email address") toast.info("Please check your email to confirm the change", { duration: 5000, }) // Reset form after 2 seconds setTimeout(() => { setNewEmail("") setVerificationSent(false) onClose() }, 2000) } catch (error) { console.error("Email change error:", error) toast.error("An unexpected error occurred") } finally { setIsLoading(false) } } const handleClose = () => { setNewEmail("") setVerificationSent(false) onClose() } return ( <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="w-full max-w-md bg-[#1a1d21] border border-white/10 rounded-xl shadow-xl"> <div className="flex items-center justify-between p-6 border-b border-white/10"> <h2 className="text-xl font-bold text-white">Change Email</h2> <Button variant="ghost" size="sm" onClick={handleClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> </div> <form onSubmit={handleSubmit} className="p-6 space-y-4"> {!emailChangeCheck.allowed && ( <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg"> <p className="text-red-300 text-sm">{emailChangeCheck.message}</p> </div> )} <div className="space-y-2"> <Label className="text-gray-300">Current Email</Label> <div className="flex items-center gap-2 p-3 bg-black/20 rounded-lg border border-white/10"> <Mail className="w-4 h-4 text-gray-500" /> <p className="text-white font-mono text-sm flex-1">{maskEmail(currentEmail)}</p> </div> </div> <div className="space-y-2"> <Label htmlFor="new-email" className="text-gray-300"> New Email Address </Label> <Input id="new-email" type="email" placeholder="Enter your new email address" value={newEmail} onChange={(e) => setNewEmail(e.target.value.toLowerCase().trim())} className="bg-black/20 border-white/10 text-white placeholder:text-gray-600 focus:border-white/20 focus:ring-0" disabled={isLoading || verificationSent || !emailChangeCheck.allowed} /> </div> {verificationSent && ( <div className="p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg"> <p className="text-blue-300 text-sm"> Verification email sent! Please check your inbox and confirm the change. </p> </div> )} <div className="flex gap-3 pt-4"> <Button type="button" variant="outline" onClick={handleClose} className="flex-1 border-white/10 text-white hover:bg-white/5 bg-transparent" disabled={isLoading} > Cancel </Button> <Button type="submit" className="flex-1 bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50 disabled:cursor-not-allowed" disabled={isLoading || verificationSent || !emailChangeCheck.allowed} > {isLoading ? ( <> <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Sending... </> ) : verificationSent ? ( "Email Sent" ) : ( "Send Verification" )} </Button> </div> </form> </div> </div> ) } [V0_FILE]typescriptreact:file="components/logout-all-devices-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { X, Loader2, AlertTriangle } from "lucide-react" import { toast } from "sonner" import { supabase } from "@/lib/supabase" interface LogoutAllDevicesModalProps { isOpen: boolean onClose: () => void } export function LogoutAllDevicesModal({ isOpen, onClose }: LogoutAllDevicesModalProps) { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const [confirmed, setConfirmed] = useState(false) if (!isOpen) return null const handleLogoutAllDevices = async () => { if (!confirmed) { toast.error("Please confirm the action") return } setIsLoading(true) try { // Supabase automatically invalidates all sessions when you sign out const { error } = await supabase.auth.signOut({ scope: "global" }) if (error) { toast.error(error.message || "Failed to logout from all devices") return } toast.success("Successfully logged out from all devices") setTimeout(() => { onClose() router.push("/auth") }, 1000) } catch (error) { console.error("Logout all devices error:", error) toast.error("An unexpected error occurred") } finally { setIsLoading(false) } } const handleClose = () => { setConfirmed(false) onClose() } return ( <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="w-full max-w-md bg-[#1a1d21] border border-white/10 rounded-xl shadow-xl"> <div className="flex items-center justify-between p-6 border-b border-white/10"> <h2 className="text-xl font-bold text-white">Logout All Devices</h2> <Button variant="ghost" size="sm" onClick={handleClose} className="text-gray-400 hover:text-white"> <X className="w-5 h-5" /> </Button> </div> <div className="p-6 space-y-4"> <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg flex gap-3"> <AlertTriangle className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" /> <div> <p className="text-white font-semibold text-sm mb-1">Are you sure?</p> <p className="text-yellow-200/80 text-sm"> This will sign you out from all your devices and active sessions. You'll need to log in again. </p> </div> </div> <label className="flex items-center gap-3 p-3 bg-black/20 rounded-lg border border-white/10 cursor-pointer hover:bg-black/30 transition-colors"> <input type="checkbox" checked={confirmed} onChange={(e) => setConfirmed(e.target.checked)} className="w-4 h-4 rounded accent-red-600" disabled={isLoading} /> <span className="text-gray-300 text-sm">I understand and want to logout from all devices</span> </label> <div className="flex gap-3 pt-2"> <Button type="button" variant="outline" onClick={handleClose} className="flex-1 border-white/10 text-white hover:bg-white/5 bg-transparent" disabled={isLoading} > Cancel </Button> <Button onClick={handleLogoutAllDevices} className="flex-1 bg-red-600 hover:bg-red-700 text-white disabled:opacity-50 disabled:cursor-not-allowed" disabled={isLoading || !confirmed} > {isLoading ? ( <> <Loader2 className="mr-2 w-4 h-4 animate-spin" /> Logging out... </> ) : ( "Logout All Devices" )} </Button> </div> </div> </div> </div> ) } [V0_FILE]typescript:file="lib/email-utils.ts" isMerged="true" export function maskEmail(email: string | undefined): string { if (!email) return "@" const [localPart, domain] = email.split("@") if (!localPart || !domain) return "@" if (localPart.length <= 3) { return `${localPart}@${domain}` } const maskedLocal = localPart.slice(0, 3) + "" return `${maskedLocal}@${domain}` } // Helper function to check if password change is allowed (30 days) export function canChangePassword(lastPasswordChangeDate: string | null): { allowed: boolean daysUntilAllowed?: number message?: string } { if (!lastPasswordChangeDate) { return { allowed: true } } const lastChange = new Date(lastPasswordChangeDate) const now = new Date() const thirtyDaysInMs = 30 24 * 60 * 60 * 1000 const timeSinceChange = now.getTime() - lastChange.getTime() if (timeSinceChange < thirtyDaysInMs) { const daysRemaining = Math.ceil((thirtyDaysInMs - timeSinceChange) / (24 * 60 * 60 * 1000)) return { allowed: false, daysUntilAllowed: daysRemaining, message: `You can change your password again after ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}.`, } } return { allowed: true } } // Helper function to check if email change is allowed (60 days) export function canChangeEmail(lastEmailChangeDate: string | null): { allowed: boolean daysUntilAllowed?: number message?: string } { if (!lastEmailChangeDate) { return { allowed: true } } const lastChange = new Date(lastEmailChangeDate) const now = new Date() const sixtyDaysInMs = 60 * 24 * 60 * 60 * 1000 const timeSinceChange = now.getTime() - lastChange.getTime() if (timeSinceChange < sixtyDaysInMs) { const daysRemaining = Math.ceil((sixtyDaysInMs - timeSinceChange) / (24 * 60 * 60 * 1000)) return { allowed: false, daysUntilAllowed: daysRemaining, message: `You can change your email again after ${daysRemaining} day${daysRemaining !== 1 ? "s" : ""}.`, } } return { allowed: true } } [V0_FILE]typescript:file="app/actions/order.ts" isMerged="true" "use server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Server action to create an order using service role key * This bypasses RLS restrictions and ensures reliable order creation */ export async function createOrderAction(orderData: any) { const cookieStore = await cookies() const supabaseAdmin = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) try { const { data, error } = await supabaseAdmin .from("orders") .insert([ { ...orderData, created_at: new Date().toISOString(), updated_at: new Date().toISOString(), }, ]) .select() .single() if (error) { console.error("[v0] Create order error:", error) throw new Error(`Failed to create order: ${error.message}`) } if (!data) throw new Error("Order creation returned no data") console.log("[v0] Order created successfully:", data.id) return { success: true, data } } catch (error: any) { console.error("[v0] createOrderAction error:", error) return { success: false, error: error.message } } } /** * Server action to approve an order and process related tokens. * This replaces the server-side logic previously mixed into the client-side lib/supabase.ts / export async function approveOrderWithTokensAction( orderId: string, userId: string, paymentMethod: string, tokensAmount: number, // Renamed from totalPrice to tokensAmount for clarity ) { const cookieStore = await cookies() const supabaseAdmin = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) try { // Fetch current order to check if already processed const { data: order, error: fetchError } = await supabaseAdmin .from("orders") .select("tokens_processed, payment_method, amount") .eq("id", orderId) .single() if (fetchError) throw new Error(`Failed to fetch order: ${fetchError.message}`) if (!order) throw new Error("Order not found") // Prevent double processing if (order.tokens_processed) { console.log(`[v0] Order ${orderId} already processed, skipping token operations`) return { success: true, message: "Already processed" } } // Determine payment method from order const method = order.payment_method || paymentMethod // This ensures we deduct exactly what the user spent, not a calculated value const tokensToDeduct = tokensAmount if (method === "WIZARD_TOKENS") { console.log(`[v0] Deducting ${tokensToDeduct} tokens for order ${orderId}`) const { error: deductError } = await supabaseAdmin.rpc("deduct_tokens_atomic", { target_user_id: userId, amount_to_deduct: tokensToDeduct, }) if (deductError) throw new Error(`Failed to deduct tokens: ${deductError.message}`) } else if (method === "UPI" || method === "PayPal") { console.log(`[v0] Adding reward tokens for order ${orderId}`) const earnedTokens = Math.floor((order.amount || tokensAmount) / 10) const { error: addError } = await supabaseAdmin.rpc("add_tokens_atomic", { target_user_id: userId, amount_to_add: earnedTokens, }) if (addError) throw new Error(`Failed to add reward tokens: ${addError.message}`) } const { error: updateError } = await supabaseAdmin .from("orders") .update({ tokens_processed: true, updated_at: new Date().toISOString() }) .eq("id", orderId) if (updateError) throw new Error(`Failed to mark tokens as processed: ${updateError.message}`) return { success: true } } catch (error: any) { console.error("[v0] approveOrderWithTokensAction error:", error) return { success: false, error: error.message } } } export async function getOrderByTrackingIdAction(trackingId: string) { const cookieStore = await cookies() const supabaseAdmin = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) try { const { data, error } = await supabaseAdmin.from("orders").select("").eq("tracking_id", trackingId).single() if (error) { if ((error as any).code === "PGRST116") { return { success: false, data: null, message: "Order not found" } } throw new Error(`Failed to fetch order: ${error.message}`) } return { success: true, data, message: null } } catch (error: any) { if (error?.name === "AbortError") { console.warn("[v0] Request aborted for tracking ID:", trackingId, error.message) return { success: false, data: null, message: "Request was cancelled. Please try again." } } console.error("[v0] getOrderByTrackingIdAction error:", error?.message || error) return { success: false, data: null, message: error?.message || "Failed to fetch order" } } } [V0_FILE]typescriptreact:file="components/order-tracker.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Label } from "@/components/ui/label" import { X } from "lucide-react" import { toast } from "sonner" import { supabase, type Order, libraryService } from "@/lib/supabase" import { Package2, Clock, CheckCircle, XCircle, Copy, Gift, CreditCard, User, Key, Eye, EyeOff, MessageSquare, Check, Send, BookOpen, } from "lucide-react" import { getOrderByTrackingIdAction } from "@/app/actions/order" interface OrderTrackerProps { isOpen: boolean onClose: () => void } export function OrderTracker({ isOpen, onClose }: OrderTrackerProps) { const [trackingId, setTrackingId] = useState("") const [order, setOrder] = useState<Order | null>(null) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [showPassword, setShowPassword] = useState(false) const [showSteamCode, setShowSteamCode] = useState(false) const [copiedField, setCopiedField] = useState<string | null>(null) const [isRequestingCode, setIsRequestingCode] = useState(false) const [isAddingToLibrary, setIsAddingToLibrary] = useState(false) const [user, setUser] = useState<any>(null) const [isRefreshing, setIsRefreshing] = useState(false) const [showPlatformPassword, setShowPlatformPassword] = useState(false) const [showCode, setShowCode] = useState(false) const [showPlatformCode, setShowPlatformCode] = useState(false) // Added state for platform code visibility const hasAutoSearched = useRef(false) useEffect(() => { const getUser = async () => { const { data: { user }, } = await supabase.auth.getUser() setUser(user) } getUser() }, []) useEffect(() => { if (isOpen && !hasAutoSearched.current) { const urlParams = new URLSearchParams(window.location.search) const trackParam = urlParams.get("track") if (trackParam && trackParam !== "true") { setTrackingId(trackParam) handleSearch(trackParam) hasAutoSearched.current = true } } if (!isOpen) { hasAutoSearched.current = false } }, [isOpen]) const handleSearch = async (searchId?: string) => { const searchTrackingId = searchId || trackingId.trim() if (!searchTrackingId) { setError("Please enter a tracking ID") return } setLoading(true) setError("") setOrder(null) try { console.log("[v0] Searching for tracking ID:", searchTrackingId) const result = await getOrderByTrackingIdAction(searchTrackingId) if (result.success && result.data) { console.log("[v0] Found order:", result.data) setOrder(result.data as Order) toast.success("Order found!") } else { setError(result.message || "Order not found. Please check your tracking ID and try again.") } } catch (err: any) { console.error("[v0] Search error:", err) if (err?.name === "AbortError") { setError("Request was cancelled. Please try again.") } else { setError(err?.message || "An unexpected error occurred. Please try again.") } } finally { setLoading(false) } } const handleCopy = async (text: string, field: string) => { try { await navigator.clipboard.writeText(text) setCopiedField(field) toast.success(`${field} copied to clipboard!`) setTimeout(() => setCopiedField(null), 2000) } catch (error) { console.error("Failed to copy:", error) toast.error("Failed to copy to clipboard") } } const handleRequestCode = async () => { if (!order) return setIsRequestingCode(true) try { await fetch("/api/request-code", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ order_id: order.id, tracking_id: order.tracking_id, customer_message: "Code request from customer", status: "pending", }), }) toast.success("Code request sent successfully! Admin will respond soon.") } catch (error) { console.error("Error requesting code:", error) toast.error("Failed to send code request. Please try again.") } finally { setIsRequestingCode(false) } } const handleRequestPlatformCode = async () => { if (!order || !order.delivery_platform) return setIsRequestingCode(true) try { await fetch("/api/request-code", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ order_id: order.id, tracking_id: order.tracking_id, customer_message: `Requesting ${order.delivery_platform} code`, status: "pending", }), }) toast.success(`${order.delivery_platform} code request sent! Admin will respond soon.`) } catch (error) { console.error(`Error requesting ${order.delivery_platform} code:`, error) toast.error(`Failed to request ${order.delivery_platform} code. Please try again.`) } finally { setIsRequestingCode(false) } } const handleAddToLibrary = async () => { // Step 1: Check if user is authenticated if (!user) { toast.error("Please log in to add games to your library") return } // Step 2: Check if order exists and has items if (!order) { toast.error("Order not found") return } if (!order.items || order.items.length === 0) { toast.error("No games found in this order") return } // Step 3: Verify order status if (order.status !== "completed" && order.status !== "approved") { toast.error("Order must be approved or completed to add to library") return } setIsAddingToLibrary(true) let successCount = 0 let failureCount = 0 try { // Step 4: Add each approved game to library using user.id for (const item of order.items) { try { const gameId = item.id || item.game_id || "1" const gameTitle = item.title || item.game_title || "Game" const gameImage = item.image || item.game_image || null // Verify game exists in library first const exists = await libraryService.checkGameInLibrary(user.id, gameId) if (exists) { console.log("[v0] Game already in library:", gameTitle) failureCount++ continue } // Add to library using user.id (NOT email) await libraryService.addToLibrary( user.id, // MUST use user.id, not email gameId, gameTitle, gameImage, order.steam_username, order.steam_password, ) successCount++ console.log("[v0] Game added to library:", gameTitle, "for user:", user.id) } catch (itemError: any) { console.error("[v0] Error adding individual game:", itemError) failureCount++ } } // Step 5: Show appropriate success/error message if (successCount > 0) { toast.success(`${successCount} game(s) added to your library successfully!`) } if (failureCount > 0 && successCount === 0) { toast.error("Failed to add games to library. Please try again.") } else if (failureCount > 0) { toast.warning(`${failureCount} game(s) could not be added (may already be in library)`) } } catch (error: any) { console.error("[v0] Error adding to library:", error) toast.error("Failed to add games to library. Please try again.") } finally { setIsAddingToLibrary(false) } } const handleRefresh = async () => { if (!order?.tracking_id) return setIsRefreshing(true) try { const result = await getOrderByTrackingIdAction(order.tracking_id) if (result.success && result.data) { setOrder(result.data as Order) toast.success("Order details refreshed!") } else { toast.error(result.message || "Failed to refresh order details") } } catch (err: any) { console.error("[v0] Refresh error:", err) if (err?.name === "AbortError") { toast.error("Request was cancelled. Please try again.") } else { toast.error(err?.message || "Failed to refresh order details") } } finally { setIsRefreshing(false) } } const getStatusColor = (status: string) => { switch (status.toLowerCase()) { case "pending": return "bg-yellow-600" case "approved": return "bg-green-600" case "completed": return "bg-blue-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getStatusIcon = (status: string) => { switch (status.toLowerCase()) { case "pending": return <Clock className="w-4 h-4" /> case "approved": return <CheckCircle className="w-4 h-4" /> case "completed": return <Key className="w-4 h-4" /> case "rejected": return <XCircle className="w-4 h-4" /> default: return <Package2 className="w-4 h-4" /> } } const isFreeOrder = (order: Order) => { return order.amount === 0 || order.tracking_id.startsWith("FREE-") } const getStatusMessage = (order: Order) => { const isFree = isFreeOrder(order) const status = order.status.toLowerCase() if (isFree) { switch (status) { case "pending": return "Your free game request is being reviewed by our admin team." case "approved": return "Your free game request has been approved and is being processed." case "completed": return "Free Game Delivered - Your Steam code is ready!" case "rejected": return "Your free game request was rejected. Please contact support for details." default: return "Free game request status unknown." } } else { switch (status) { case "pending": return "Payment verification in progress. We'll update you soon." case "approved": return "Payment verified! Your account details are being prepared." case "completed": return "Order Complete - Your account details are ready!" case "rejected": return "Payment verification failed. Please contact support." default: return "Order status unknown." } } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString() } if (!isOpen) return null return ( <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center"> <div className="w-[95%] max-w-7xl h-[95vh] overflow-y-auto bg-gradient-to-b from-slate-900 to-slate-800 border border-slate-700 rounded-lg shadow-2xl flex flex-col"> {/* Header /} <div className="sticky top-0 bg-gradient-to-b from-slate-900 to-slate-800 border-b border-slate-700 p-6 flex items-center justify-between"> <div className="flex items-center gap-3"> <Package2 className="w-6 h-6 text-blue-400" /> <h2 className="text-2xl font-bold text-white">Order Tracker</h2> </div> <div className="flex items-center gap-2"> {order && (order.status === "approved" || order.status === "completed") && ( <button onClick={handleAddToLibrary} disabled={isAddingToLibrary} className="px-3 py-1 text-sm font-medium text-green-400 hover:text-green-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1" > <BookOpen className="w-4 h-4" /> {isAddingToLibrary ? "Adding..." : "Add to Library"} </button> )} {order && ( <button onClick={handleRefresh} disabled={isRefreshing} className="px-3 py-1 text-sm font-medium text-blue-400 hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > {isRefreshing ? "Refreshing..." : "Refresh"} </button> )} <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors p-2"> <X className="w-5 h-5" /> </button> </div> </div> {/ Content /} <div className="flex-1 overflow-y-auto p-6"> {/ Search Section /} <div className="space-y-4"> <div className="flex gap-2"> <Input placeholder="Enter tracking ID (e.g., WGS-123456-7890 or FREE-123456-ABCD)" value={trackingId} onChange={(e) => setTrackingId(e.target.value)} className="bg-gray-800 border-gray-700 text-white placeholder-gray-400" onKeyPress={(e) => e.key === "Enter" && handleSearch()} /> <Button onClick={() => handleSearch()} disabled={loading} className="bg-blue-600 hover:bg-blue-700"> <Clock className="w-4 h-4 mr-2" /> {loading ? "Searching..." : "Track"} </Button> </div> {error && ( <div className="bg-red-900/50 border border-red-700 rounded-lg p-3"> <p className="text-red-300 text-sm">{error}</p> </div> )} </div> {/ Order Details /} {order && ( <div className="space-y-6"> <Separator className="bg-gray-700" /> {/ Order Header /} <div className="flex items-start justify-between"> <div> <h3 className="text-lg font-semibold text-white mb-2 flex items-center gap-2"> {isFreeOrder(order) ? ( <> <Gift className="w-5 h-5 text-green-400" /> Free Game Request Status </> ) : ( <> <CreditCard className="w-5 h-5 text-blue-400" /> Order Status </> )} </h3> <div className="flex items-center gap-2 mb-2"> <span className="text-gray-400">Tracking ID:</span> <code className="bg-gray-800 px-2 py-1 rounded text-blue-300 font-mono text-sm"> {order.tracking_id} </code> <Button variant="ghost" size="sm" onClick={() => handleCopy(order.tracking_id, "Tracking ID")} className="text-gray-400 hover:text-white p-1 h-auto" > {copiedField === "Tracking ID" ? ( <Check className="w-3 h-3 text-green-500" /> ) : ( <Copy className="w-3 h-3" /> )} </Button> </div> <p className="text-gray-400 text-sm"> {isFreeOrder(order) ? "Requested" : "Ordered"} on {formatDate(order.created_at)} </p> </div> <Badge className={`${getStatusColor(order.status)} text-white flex items-center gap-1`}> {getStatusIcon(order.status)} {order.status.toUpperCase()} </Badge> </div> {/ Platform Account Details section /} {(order.status === "approved" || order.status === "completed") && (order.delivery_platform || order.delivery_username) && ( <div className="bg-amber-900/30 border border-amber-700 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <User className="w-4 h-4 text-amber-400" /> {order.delivery_platform || "Platform"} Account Details </h4> <div className="grid grid-cols-2 gap-4 mb-4"> {/ Platform Username /} {order.delivery_username && ( <div> <Label className="text-amber-200 text-sm block mb-2"> {order.delivery_platform || "Account"} Username/ID </Label> <div className="flex items-center gap-2"> <Input value={order.delivery_username} readOnly className="bg-gray-800 border-gray-600 text-white font-mono flex-1" /> <Button size="sm" variant="ghost" onClick={() => handleCopy(order.delivery_username!, "Platform Username")} className="text-gray-400 hover:text-white flex-shrink-0" > {copiedField === "Platform Username" ? ( <Check className="w-3 h-3 text-green-500" /> ) : ( <Copy className="w-3 h-3" /> )} </Button> </div> </div> )} {/ Platform Password /} {order.delivery_password && ( <div> <Label className="text-amber-200 text-sm block mb-2"> {order.delivery_platform || "Account"} Password </Label> <div className="flex items-center gap-2"> <Input type={showPlatformPassword ? "text" : "password"} value={order.delivery_password} readOnly className="bg-gray-800 border-gray-600 text-white font-mono flex-1" /> <Button size="sm" variant="ghost" onClick={() => setShowPlatformPassword(!showPlatformPassword)} className="text-gray-400 hover:text-white flex-shrink-0" > {showPlatformPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" variant="ghost" onClick={() => handleCopy(order.delivery_password!, "Platform Password")} className="text-gray-400 hover:text-white flex-shrink-0" > {copiedField === "Platform Password" ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> )} </div> <div className="bg-amber-800/30 rounded-lg p-3"> <p className="text-amber-200 text-sm"> <strong>Important:</strong> Use these credentials to log into{" "} {order.delivery_platform || "your platform"} and access your game. Keep these details safe and don't share them with anyone. </p> </div> </div> )} {order.steam_code && ( <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4 mb-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Key className="w-4 h-4 text-blue-400" /> Steam Activation Code </h4> <div className="space-y-3"> <div className="flex items-center gap-2"> <Input type={showSteamCode ? "text" : "password"} value={order.steam_code || ""} readOnly className="bg-gray-800/50 border-blue-600 text-blue-100 font-mono" /> <Button size="sm" variant="ghost" onClick={() => setShowSteamCode(!showSteamCode)} className="text-gray-400 hover:text-gray-300" > {showSteamCode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" onClick={() => handleCopy(order.steam_code || "", "Steam Code")} className="text-gray-400 hover:text-gray-300" > {copiedField === "Steam Code" ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> <div className="bg-blue-800/30 rounded-lg p-3"> <p className="text-blue-200 text-xs"> <strong>Important:</strong> This is your Steam activation code. Use it to claim your game on Steam. Keep it safe and don't share it with anyone. </p> </div> </div> </div> )} {order.delivery_code && order.delivery_platform && ( <div className="bg-orange-900/30 border border-orange-600 rounded-lg p-4 mb-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Key className="w-4 h-4 text-orange-400" /> {order.delivery_platform} Activation Code </h4> <div className="space-y-3"> <div className="flex items-center gap-2"> <Input type={showPlatformCode ? "text" : "password"} value={order.delivery_code || ""} readOnly className="bg-gray-800/50 border-orange-600 text-orange-100 font-mono" /> <Button size="sm" variant="ghost" onClick={() => setShowPlatformCode(!showPlatformCode)} className="text-orange-400 hover:text-orange-300" > {showPlatformCode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" onClick={() => handleCopy(order.delivery_code || "", `${order.delivery_platform} Code`)} className="text-orange-400 hover:text-orange-300" > {copiedField === `${order.delivery_platform} Code` ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> <div className="bg-orange-800/30 rounded-lg p-3"> <p className="text-orange-200 text-xs"> <strong>Important:</strong> This is your {order.delivery_platform} activation code. Use it to claim your game. Keep it safe and don't share it with anyone. </p> </div> </div> </div> )} {/ Order Items /} <div className="space-y-3"> <h3 className="font-semibold text-white flex items-center gap-2 mb-3"> <Package2 className="w-5 h-5 text-blue-400" /> Order Items </h3> {order.items.map((item: any, index: number) => { const hasCredentials = item.steam_username || item.steam_password const hasSteamCode = item.steam_code const isApproved = item.approval_status === "approved" || item.approved === true || item.status === "approved" return ( <div key={index} className={`rounded-lg p-4 ${ isApproved ? "bg-green-900/20 border border-green-700" : "bg-gray-800/50 border border-gray-700" }`} > <div className="flex items-start gap-3"> <img src={item.image || "/placeholder.svg"} alt={item.title} className="w-16 h-16 rounded object-cover" /> <div className="flex-1"> <h4 className="font-medium text-white">{item.title}</h4> <p className="text-sm text-gray-400">{item.platform || "Digital Game"}</p> <p className="text-blue-400 font-semibold mt-1">₹{item.price}</p> {item.quantity > 1 && <p className="text-sm text-gray-400">Qty: {item.quantity}</p>} {isApproved ? ( <div className="flex items-center gap-1 mt-2"> <Check className="w-4 h-4 text-green-500" /> <span className="text-sm text-green-400">Approved</span> </div> ) : ( <div className="flex items-center gap-1 mt-2"> <Clock className="w-4 h-4 text-yellow-500" /> <span className="text-sm text-yellow-400">Pending Approval</span> </div> )} </div> </div> {isApproved && hasCredentials && ( <div className="mt-4 p-4 bg-green-900/30 border border-green-700 rounded-lg"> <h5 className="text-sm font-semibold text-green-200 mb-4">Steam Account Details</h5> <div className="grid grid-cols-3 gap-4 mb-4"> {/ Steam Username /} {item.steam_username && ( <div> <Label className="text-green-200 text-xs block mb-2">Steam Username</Label> <div className="flex items-center gap-2"> <Input value={item.steam_username} readOnly className="bg-gray-800 border-gray-600 text-white font-mono text-sm flex-1" /> <Button size="sm" variant="ghost" onClick={() => handleCopy(item.steam_username, "Username")} className="text-gray-400 hover:text-white flex-shrink-0" > {copiedField === "Username" ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> )} {/ Steam Password /} {item.steam_password && ( <div> <Label className="text-green-200 text-xs block mb-2">Steam Password</Label> <div className="flex items-center gap-2"> <Input type={showPassword ? "text" : "password"} value={item.steam_password} readOnly className="bg-gray-800 border-gray-600 text-white font-mono text-sm flex-1" /> <Button size="sm" variant="ghost" onClick={() => setShowPassword(!showPassword)} className="text-gray-400 hover:text-white flex-shrink-0" > {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> <Button size="sm" variant="ghost" onClick={() => handleCopy(item.steam_password, "Password")} className="text-gray-400 hover:text-white flex-shrink-0" > {copiedField === "Password" ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> )} {/ Steam Activation Code /} {item.steam_code && ( <div> <Label className="text-green-200 text-xs block mb-2">Steam Activation Code</Label> <div className="flex items-center gap-2"> <Input type={showSteamCode ? "text" : "password"} value={item.steam_code} readOnly className="bg-gray-800 border-gray-600 text-white font-mono text-sm flex-1" /> <Button size="sm" variant="ghost" onClick={() => setShowSteamCode(!showSteamCode)} className="text-gray-400 hover:text-white flex-shrink-0" > {showSteamCode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" variant="ghost" onClick={() => handleCopy(item.steam_code, "Code")} className="text-gray-400 hover:text-white flex-shrink-0" > {copiedField === "Code" ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> )} </div> <p className="text-green-200 text-xs mb-4"> <strong>Important:</strong> Use these credentials to log into Steam and access your game. Keep these details safe and don't share them with anyone. </p> {hasCredentials && !hasSteamCode && ( <div> <Button onClick={handleRequestCode} disabled={isRequestingCode} className="bg-blue-600 hover:bg-blue-700 w-full" size="sm" > <Send className="w-4 h-4 mr-2" /> {isRequestingCode ? "Requesting..." : "Request Steam Code"} </Button> </div> )} </div> )} </div> ) })} </div> {/ Status Message /} <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4"> <p className="text-blue-200">{getStatusMessage(order)}</p> </div> {/ Customer Comments (for free games) /} {isFreeOrder(order) && (order as any).additional_comments && ( <div className="bg-gray-800/50 rounded-lg p-4"> <h4 className="font-semibold text-white mb-2 flex items-center gap-2"> <MessageSquare className="w-4 h-4 text-blue-400" /> Your Comments </h4> <p className="text-gray-300 text-sm">{(order as any).additional_comments}</p> </div> )} {/ Removed Payment Screenshot section /} {order.status === "approved" && !order.steam_code && !order.delivery_code && ( <div className="bg-purple-900/30 border border-purple-700 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <MessageSquare className="w-4 h-4 text-purple-400" /> {order.delivery_platform ? `Request Your ${order.delivery_platform} Code` : "Request Your Steam Code"} </h4> <div className="space-y-4"> <p className="text-purple-200 text-sm"> Your order has been approved! You can now request your{" "} {order.delivery_platform ? order.delivery_platform : "Steam"} game code from our admin team. </p> <Button onClick={order.delivery_platform ? handleRequestPlatformCode : handleRequestCode} disabled={isRequestingCode} className="bg-purple-600 hover:bg-purple-700 w-full" size="sm" > <Send className="w-4 h-4 mr-2" /> {isRequestingCode ? "Requesting..." : "Request Code"} </Button> </div> </div> )} </div> )} </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true" import { Instagram, Send } from "lucide-react" import Link from "next/link" export function SiteFooter() { return ( <footer className="bg-[#0E1012] border-t border-white/10"> <div className="max-w-7xl mx-auto px-4 md:px-8 py-12"> {/ Main Footer Content /} <div className="grid grid-cols-1 md:grid-cols-5 gap-8 mb-8"> {/ Brand Section /} <div className="md:col-span-1"> <div className="flex items-center gap-2 mb-4"> <div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center"> <div className="w-5 h-5 bg-gradient-to-br from-blue-400 to-purple-500 rounded-md" /> </div> <span className="text-white font-bold text-lg">Wizard Games</span> </div> <p className="text-gray-400 text-sm">Bringing magic to modern game shopping.</p> </div> {/ Store Column /} <div> <h3 className="text-white font-semibold text-sm uppercase tracking-wider mb-4">Store</h3> <ul className="space-y-2"> <li> <Link href="/discover" className="text-gray-400 hover:text-white text-sm transition-colors"> Discover </Link> </li> <li> <Link href="/browse" className="text-gray-400 hover:text-white text-sm transition-colors"> Browse </Link> </li> <li> <Link href="/free-games" className="text-gray-400 hover:text-white text-sm transition-colors"> Free Games </Link> </li> <li> <Link href="/wishlist" className="text-gray-400 hover:text-white text-sm transition-colors"> Wishlist </Link> </li> <li> <Link href="/cart" className="text-gray-400 hover:text-white text-sm transition-colors"> Cart </Link> </li> <li> <Link href="/library" className="text-gray-400 hover:text-white text-sm transition-colors"> Library </Link> </li> </ul> </div> {/ Support Column /} <div> <h3 className="text-white font-semibold text-sm uppercase tracking-wider mb-4">Support</h3> <ul className="space-y-2"> <li> <Link href="/support" className="text-gray-400 hover:text-white text-sm transition-colors"> Support Center </Link> </li> <li> <Link href="/help" className="text-gray-400 hover:text-white text-sm transition-colors"> Help Center </Link> </li> <li> <Link href="/contact" className="text-gray-400 hover:text-white text-sm transition-colors"> Contact Us </Link> </li> <li> <Link href="/track-order" className="text-gray-400 hover:text-white text-sm transition-colors"> Order Tracking </Link> </li> <li> <Link href="/refunds" className="text-gray-400 hover:text-white text-sm transition-colors"> Refund Policy </Link> </li> </ul> </div> {/ Company Column /} <div> <h3 className="text-white font-semibold text-sm uppercase tracking-wider mb-4">Company</h3> <ul className="space-y-2"> <li> <Link href="/about" className="text-gray-400 hover:text-white text-sm transition-colors"> About Us </Link> </li> <li> <Link href="/careers" className="text-gray-400 hover:text-white text-sm transition-colors"> Careers </Link> </li> <li> <Link href="/privacy" className="text-gray-400 hover:text-white text-sm transition-colors"> Privacy Policy </Link> </li> <li> <Link href="/terms" className="text-gray-400 hover:text-white text-sm transition-colors"> Terms of Service </Link> </li> </ul> </div> {/ Follow Us Column /} <div> <h3 className="text-white font-semibold text-sm uppercase tracking-wider mb-4">Follow Us</h3> <div className="flex gap-4"> <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center text-white transition-colors" aria-label="Instagram" > <Instagram className="w-5 h-5" /> </a> <a href="https://telegram.com" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white/10 hover:bg-white/20 rounded-lg flex items-center justify-center text-white transition-colors" aria-label="Telegram" > <Send className="w-5 h-5" /> </a> </div> </div> </div> {/ Copyright /} <div className="border-t border-white/10 pt-8"> <p className="text-gray-500 text-sm text-center">© 2026 Wizard Games Store. All rights reserved.</p> </div> </div> </footer> ) } [V0_FILE]typescriptreact:file="components/account-overview-cards.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Shield, Zap, Package, Heart, Eye, EyeOff } from "lucide-react" import type { User as SupabaseUser } from "@supabase/supabase-js" interface AccountOverviewCardsProps { user: SupabaseUser | null wizardTokens: number totalGamesOwned: number lastGame: string | null totalOrders: number onViewTokenHistory: () => void onViewOrders: () => void onViewLibrary: () => void onManageSecurity: () => void } const maskEmail = (email: string) => { if (!email) return "" const [name, domain] = email.split("@") if (!name || !domain) return email return `${name.charAt(0)}${"".repeat(name.length - 2)}${name.charAt(name.length - 1)}@${domain}` } const formatDate = (date: string) => { return new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } export function AccountOverviewCards({ user, wizardTokens, totalGamesOwned, lastGame, totalOrders, onViewTokenHistory, onViewOrders, onViewLibrary, onManageSecurity, }: AccountOverviewCardsProps) { const cardBgClass = "bg-gradient-to-br from-[#1a1d21] to-[#0E1012]" return ( <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {/* Profile Summary Card /} <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Shield className="w-5 h-5 text-white/60" /> </div> Profile Summary </h3> <div className="space-y-3"> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Username</span> <span className="text-white font-semibold text-sm">{user?.user_metadata?.display_name || "User"}</span> </div> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Email</span> <span className="text-white font-semibold text-sm">{maskEmail(user?.email || "")}</span> </div> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Member Since</span> <span className="text-white font-semibold text-sm">{formatDate(user?.created_at || "")}</span> </div> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Account Status</span> <Badge className="bg-green-600 text-white border-0">Active</Badge> </div> </div> </div> </div> {/ Security Status Card /} <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Shield className="w-5 h-5 text-white/60" /> </div> Security Status </h3> <div className="space-y-3"> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Email Verified</span> <Eye className="w-4 h-4 text-green-500" /> </div> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Password Strength</span> <Badge className="bg-white/10 text-white border-0 text-xs">Strong</Badge> </div> <div className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"> <span className="text-gray-400 text-sm">Two-Factor Auth</span> <EyeOff className="w-4 h-4 text-gray-500" /> </div> <Button onClick={onManageSecurity} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 mt-2" > Manage Security </Button> </div> </div> </div> <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Shield className="w-5 h-5 text-white/60" /> </div> Two-Factor Authentication </h3> <div className="space-y-3"> <p className="text-gray-400 text-sm">Extra security for your account</p> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Status</p> <p className="text-white font-semibold text-sm">Disabled</p> </div> </div> </div> </div> {/ Wallet/Tokens Summary Card /} <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Zap className="w-5 h-5 text-white/60" /> </div> Wizard Tokens </h3> <div className="space-y-3"> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Current Balance</p> <p className="text-3xl font-black text-white">{wizardTokens.toLocaleString()}</p> </div> <div className="grid grid-cols-2 gap-2"> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs mb-1">Tokens Used</p> <p className="text-white font-semibold">175</p> </div> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs mb-1">Active Discounts</p> <p className="text-white font-semibold">3</p> </div> </div> <Button onClick={onViewTokenHistory} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200" > View Token History </Button> </div> </div> </div> {/ Orders Snapshot Card /} <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Package className="w-5 h-5 text-white/60" /> </div> Orders Snapshot </h3> <div className="space-y-3"> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Total Orders</p> <p className="text-3xl font-black text-white">{totalOrders}</p> </div> <div className="grid grid-cols-2 gap-2"> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs mb-1">Last Purchase</p> <p className="text-white font-semibold text-sm">5 days ago</p> </div> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs mb-1">Pending Orders</p> <Badge className="bg-white/10 text-white border-0 text-xs">1</Badge> </div> </div> <Button onClick={onViewOrders} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200" > View Orders </Button> </div> </div> </div> {/ Library Summary Card /} <div className={`${cardBgClass} border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300 shadow-sm`} > <div className="space-y-4"> <h3 className="text-lg font-bold text-white flex items-center gap-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Heart className="w-5 h-5 text-white/60" /> </div> Library Summary </h3> <div className="space-y-3"> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Games Owned</p> <p className="text-3xl font-black text-white">{totalGamesOwned}</p> </div> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Recently Added</p> <p className="text-white font-semibold text-sm truncate">{lastGame || "No games yet"}</p> </div> <Button onClick={onViewLibrary} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200" > Go to Library </Button> </div> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="app/account/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { supabase } from "@/lib/supabase" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { LogOut, User, Mail, Heart, Package, ArrowRight, Zap, Shield, Key, Lock } from "lucide-react" import { toast } from "sonner" import type { User as SupabaseUser } from "@supabase/supabase-js" import { canChangePassword, canChangeEmail } from "@/lib/email-utils" import AccountLayout from "@/components/account-layout" import { EditProfileModal } from "@/components/edit-profile-modal" import { ChangePasswordModal } from "@/components/change-password-modal" import { ChangeEmailModal } from "@/components/change-email-modal" import { LogoutAllDevicesModal } from "@/components/logout-all-devices-modal" import { AccountOverviewCards } from "@/components/account-overview-cards" interface TokenActivity { id: string type: "earned" | "spent" amount: number description: string created_at: string } interface UserOrder { id: string tracking_id: string status: string created_at: string } export default function AccountPage() { const router = useRouter() const [user, setUser] = useState<SupabaseUser | null>(null) const [loading, setLoading] = useState(true) const [username, setUsername] = useState("") const [avatarUrl, setAvatarUrl] = useState<string | null>(null) const [wizardTokens, setWizardTokens] = useState(0) const [totalGamesOwned, setTotalGamesOwned] = useState(0) const [lastGame, setLastGame] = useState<string | null>(null) const [totalOrders, setTotalOrders] = useState(0) const [orders, setOrders] = useState<UserOrder[]>([]) const [lastOrderStatus, setLastOrderStatus] = useState<string | null>(null) const [tokenActivity, setTokenActivity] = useState<TokenActivity[]>([]) const [editProfileOpen, setEditProfileOpen] = useState(false) const [changePasswordOpen, setChangePasswordOpen] = useState(false) const [changeEmailOpen, setChangeEmailOpen] = useState(false) const [logoutAllDevicesOpen, setLogoutAllDevicesOpen] = useState(false) const [activeSection, setActiveSection] = useState("overview") const [canChangePasswordState, setCanChangePasswordState] = useState(true) const [canChangeEmailState, setCanChangeEmailState] = useState(true) const [passwordCooldownMessage, setPasswordCooldownMessage] = useState("") const [emailCooldownMessage, setEmailCooldownMessage] = useState("") useEffect(() => { if (user) { const passwordCheck = canChangePassword(user.user_metadata?.last_password_change) setCanChangePasswordState(passwordCheck.allowed) setPasswordCooldownMessage(passwordCheck.message || "") const emailCheck = canChangeEmail(user.user_metadata?.last_email_change) setCanChangeEmailState(emailCheck.allowed) setEmailCooldownMessage(emailCheck.message || "") } }, [user]) useEffect(() => { // This ensures we don't redirect while auth is still loading let unsubscribe: (() => void) | null = null const checkAuth = async () => { try { // First, try to get the session (faster) const { data: { session }, } = await supabase.auth.getSession() if (session?.user) { setUser(session.user) const displayName = session.user.user_metadata?.display_name || session.user.user_metadata?.username || session.user.email?.split("@")[0] || "User" setUsername(displayName) setAvatarUrl(session.user.user_metadata?.avatar_url || null) await fetchUserData(session.user.id) setLoading(false) return } // If no session, wait for auth state to fully initialize const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (event, session) => { if (event === "INITIAL_SESSION") { // Initial auth check complete if (session?.user) { setUser(session.user) const displayName = session.user.user_metadata?.display_name || session.user.user_metadata?.username || session.user.email?.split("@")[0] || "User" setUsername(displayName) setAvatarUrl(session.user.user_metadata?.avatar_url || null) await fetchUserData(session.user.id) } else { // Auth confirmed null - NOW redirect router.push("/auth?redirect=/account") } setLoading(false) } else if (event === "SIGNED_IN" && session?.user) { setUser(session.user) const displayName = session.user.user_metadata?.display_name || session.user.user_metadata?.username || session.user.email?.split("@")[0] || "User" setUsername(displayName) setAvatarUrl(session.user.user_metadata?.avatar_url || null) await fetchUserData(session.user.id) } else if (event === "SIGNED_OUT") { setUser(null) router.push("/auth?redirect=/account") } else if (event === "USER_UPDATED" && session?.user) { setUser(session.user) const displayName = session.user.user_metadata?.display_name || session.user.user_metadata?.username || session.user.email?.split("@")[0] || "User" setUsername(displayName) setAvatarUrl(session.user.user_metadata?.avatar_url || null) } }) unsubscribe = () => subscription.unsubscribe() } catch (error) { console.error("Error checking auth:", error) setLoading(false) router.push("/auth") } } checkAuth() return () => { if (unsubscribe) { unsubscribe() } } }, [router]) const handleProfileUpdate = async () => { try { const { data: { user: updatedUser }, } = await supabase.auth.getUser() if (updatedUser) { setUser(updatedUser) const displayName = updatedUser.user_metadata?.display_name || updatedUser.user_metadata?.username || updatedUser.email?.split("@")[0] || "User" setUsername(displayName) setAvatarUrl(updatedUser.user_metadata?.avatar_url || null) await new Promise((resolve) => setTimeout(resolve, 100)) } } catch (error) { console.error("Error refreshing user data:", error) } } const fetchUserData = async (userId: string) => { try { // Fetch wallet data const { data: walletData } = await supabase .from("user_wallets") .select("wizard_tokens") .eq("user_id", userId) .single() if (walletData) { setWizardTokens(walletData.wizard_tokens || 0) } // Fetch library data const { data: libraryData } = await supabase .from("library") .select("game_title, created_at") .eq("user_id", userId) .order("created_at", { ascending: false }) if (libraryData && libraryData.length > 0) { setTotalGamesOwned(libraryData.length) setLastGame(libraryData[0].game_title) } const { data: ordersData } = await supabase .from("orders") .select("id, tracking_id, status, created_at") .eq("user_id", userId) .order("created_at", { ascending: false }) if (ordersData && ordersData.length > 0) { setTotalOrders(ordersData.length) setOrders(ordersData as UserOrder[]) setLastOrderStatus(ordersData[0].status) } // Fetch token activity (mock data for now) const mockActivity: TokenActivity[] = [ { id: "1", type: "earned", amount: 500, description: "Sign-up bonus", created_at: new Date(Date.now() - 7 24 * 60 * 60 * 1000).toISOString(), }, { id: "2", type: "spent", amount: 100, description: "Game discount", created_at: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), }, { id: "3", type: "earned", amount: 50, description: "Referral bonus", created_at: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), }, { id: "4", type: "spent", amount: 75, description: "Game discount", created_at: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), }, { id: "5", type: "earned", amount: 25, description: "Loyalty reward", created_at: new Date().toISOString(), }, ] setTokenActivity(mockActivity) } catch (error) { console.error("Error fetching user data:", error) } } const handleLogout = async () => { try { await supabase.auth.signOut() toast.success("Logged out successfully") router.push("/") } catch (error) { console.error("Logout error:", error) toast.error("Failed to logout") } } const handleAddTokens = () => { router.push("/redeem") } const handleTrackingIdClick = (trackingId: string) => { router.push(`/track-order?trackingId=${trackingId}`) } const formatDate = (date: string) => { return new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } const getStatusBadgeColor = (status: string | null) => { if (!status) return "secondary" const statusLower = status.toLowerCase() if (statusLower.includes("completed")) return "default" if (statusLower.includes("pending")) return "secondary" if (statusLower.includes("processing")) return "secondary" return "default" } const handleViewTokenHistory = () => { setActiveSection("tokens") } const handleViewOrders = () => { setActiveSection("orders") } const handleViewLibrary = () => { router.push("/library") } const handleManageSecurity = () => { setActiveSection("security") } const handleEnable2FA = () => { setActiveSection("two-factor") } if (loading) { return ( <div className="min-h-screen bg-gradient-to-br from-[#0E1012] via-[#1a1d21] to-[#0E1012] p-4 md:p-8"> <div className="max-w-6xl mx-auto"> <div className="h-8 w-48 bg-white/10 rounded-lg animate-pulse mb-8" /> <div className="grid gap-6"> {[1, 2, 3, 4, 5, 6].map((i) => ( <div key={i} className="h-64 bg-white/5 rounded-xl animate-pulse" /> ))} </div> </div> </div> ) } if (!user) { return null } return ( <> <AccountLayout user={user} username={username} avatarUrl={avatarUrl} activeSection={activeSection} onSectionChange={setActiveSection} canChangePassword={canChangePasswordState} canChangeEmail={canChangeEmailState} > {/* Account Overview Section /} {activeSection === "overview" && user && ( <div className="space-y-6"> <div className="border-b border-white/10 pb-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div> <div className="flex items-center gap-3"> <div className="w-12 h-12 bg-white/10 rounded-lg flex items-center justify-center"> <User className="w-6 h-6 text-white/70" /> </div> <div> <h2 className="text-2xl font-bold text-white">Account Overview</h2> <p className="text-gray-500 text-sm">Manage your account information and settings</p> </div> </div> </div> <Button onClick={() => setEditProfileOpen(true)} className="bg-white/10 hover:bg-white/20 text-white font-semibold gap-2 rounded-lg transition-all duration-200 hover:scale-105 whitespace-nowrap" > Edit Profile </Button> </div> <AccountOverviewCards user={user} wizardTokens={wizardTokens} totalGamesOwned={totalGamesOwned} lastGame={lastGame} totalOrders={totalOrders} onViewTokenHistory={handleViewTokenHistory} onViewOrders={handleViewOrders} onViewLibrary={handleViewLibrary} onManageSecurity={handleManageSecurity} onEnable2FA={handleEnable2FA} /> </div> )} {/ Wizard Tokens Section /} {activeSection === "tokens" && ( <Card className="bg-white/8 border border-white/10 shadow-xl hover:shadow-2xl hover:border-white/20 hover:bg-white/10 transition-all duration-300 overflow-hidden"> <CardHeader className="pb-1"> <div className="flex items-center gap-3"> <div className="w-12 h-12 bg-white/10 rounded-lg flex items-center justify-center"> <Zap className="w-6 h-6 text-white/60" /> </div> <div> <CardTitle className="text-white text-lg">Wizard Tokens</CardTitle> <CardDescription className="text-gray-400 text-xs">Your gaming currency</CardDescription> </div> </div> </CardHeader> <CardContent className="space-y-4 pt-2"> <div className="p-3 bg-white/5 border border-white/10 rounded-lg"> <p className="text-gray-400 text-xs mb-1 uppercase tracking-wider">Current Balance</p> <p className="text-3xl font-black text-white">{wizardTokens.toLocaleString()}</p> </div> <Button onClick={handleAddTokens} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg" > <Zap className="w-4 h-4 mr-2" /> Add Tokens </Button> {tokenActivity.length > 0 && ( <div className="space-y-2 pt-2"> <p className="text-gray-400 text-xs uppercase tracking-widest font-bold">Recent Activity</p> <div className="space-y-2 max-h-48 overflow-y-auto no-scrollbar"> {tokenActivity.slice(0, 5).map((activity) => ( <div key={activity.id} className="flex items-center justify-between p-3 bg-white/5 border border-white/10 rounded-lg hover:bg-white/8 transition-all duration-200" > <div className="flex items-center gap-2 flex-1 min-w-0"> {activity.type === "earned" ? ( <Zap className="w-4 h-4 text-green-400 flex-shrink-0" /> ) : ( <Zap className="w-4 h-4 text-red-400 flex-shrink-0" /> )} <span className="text-gray-400 text-xs truncate">{activity.description}</span> </div> <span className={`text-xs font-bold flex-shrink-0 ${ activity.type === "earned" ? "text-green-400" : "text-red-400" }`} > {activity.type === "earned" ? "+" : "-"} {activity.amount} </span> </div> ))} </div> </div> )} </CardContent> </Card> )} {/ My Games Section /} {activeSection === "games" && ( <Card className="bg-white/8 border border-white/10 shadow-xl hover:shadow-2xl hover:border-white/20 hover:bg-white/10 transition-all duration-300 overflow-hidden"> <CardHeader className="pb-3"> <div className="flex items-center gap-3"> <div className="w-12 h-12 bg-white/10 rounded-lg flex items-center justify-center"> <Heart className="w-6 h-6 text-white/60" /> </div> <div> <CardTitle className="text-white text-lg">My Games</CardTitle> <CardDescription className="text-gray-400 text-xs">Your game library</CardDescription> </div> </div> </CardHeader> <CardContent className="space-y-4"> <div className="p-3 bg-white/5 border border-white/10 rounded-lg"> <p className="text-gray-400 text-xs mb-2 uppercase tracking-wider">Total Games Owned</p> <p className="text-3xl font-black text-white">{totalGamesOwned}</p> </div> {lastGame && ( <div className="p-4 bg-white/5 border border-white/10 rounded-lg"> <p className="text-gray-400 text-xs uppercase tracking-widest font-bold mb-2">Last Added</p> <p className="text-white font-semibold truncate">{lastGame}</p> </div> )} <Button onClick={handleViewLibrary} className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg" > Go to Library <ArrowRight className="w-4 h-4 ml-2" /> </Button> </CardContent> </Card> )} {/ Orders & Tracking Section /} {activeSection === "orders" && ( <Card className="bg-gradient-to-br from-white/8 to-white/4 border border-white/10 shadow-xl hover:shadow-2xl hover:border-white/20 hover:bg-white/10 transition-all duration-300 backdrop-blur-xl group overflow-hidden"> <div className="absolute inset-0 bg-gradient-to-br from-blue-500/0 via-transparent to-white/0 group-hover:from-blue-500/10 transition-all duration-300 pointer-events-none" /> <CardHeader className="relative z-10 pb-2"> <div className="flex items-center gap-3"> <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300"> <Package className="w-6 h-6 text-blue-400" /> </div> <div> <CardTitle className="text-white text-lg">Orders & Tracking</CardTitle> <CardDescription className="text-gray-400 text-xs">Order history</CardDescription> </div> </div> </CardHeader> <CardContent className="relative z-10 space-y-4 pt-2"> <div className="p-3 bg-white/5 border border-white/10 rounded-lg"> <p className="text-gray-400 text-xs mb-1 uppercase tracking-wider">Total Orders</p> <p className="text-4xl font-black text-white">{totalOrders}</p> </div> {orders.length > 0 ? ( <div className="space-y-2 max-h-64 overflow-y-auto no-scrollbar"> <p className="text-gray-400 text-xs uppercase tracking-widest font-bold mb-2">Recent Orders</p> {orders.slice(0, 5).map((order) => ( <button key={order.id} onClick={() => handleTrackingIdClick(order.tracking_id)} className="w-full p-3 bg-white/5 border border-white/10 hover:bg-white/10 hover:border-white/20 rounded-lg text-left transition-all duration-200 hover:scale-105 hover:shadow-lg" > <div className="flex items-center justify-between gap-2 mb-1"> <code className="text-xs font-mono text-white/70 truncate">{order.tracking_id}</code> <Badge className={getStatusBadgeColor(order.status)}>{order.status}</Badge> </div> <p className="text-xs text-gray-500">{formatDate(order.created_at)}</p> </button> ))} </div> ) : ( <div className="p-4 bg-white/5 border border-white/10 rounded-lg"> <p className="text-gray-400 text-sm">No orders yet</p> </div> )} <Button className="w-full bg-white/10 hover:bg-white/20 gap-2 rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg"> View All Orders <ArrowRight className="w-4 h-4 ml-2" /> </Button> </CardContent> </Card> )} {/ Orders Snapshot Section /} {activeSection === "orders-snapshot" && ( <div className="space-y-4"> <div className="border-b border-white/10 pb-4"> <div className="flex items-center gap-3 mb-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Package className="w-5 h-5 text-white/70" /> </div> <div> <h2 className="text-xl font-bold text-white">Orders Snapshot</h2> <p className="text-gray-500 text-xs">Quick overview of your recent orders</p> </div> </div> </div> <div className="border border-white/10 rounded-xl p-6 bg-gradient-to-br from-[#1a1d21] to-[#0E1012] hover:border-white/20 transition-all duration-300 shadow-sm"> <div className="space-y-4"> <div className="p-4 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-2">Total Orders</p> <p className="text-4xl font-black text-white">{totalOrders}</p> </div> <Button onClick={() => setActiveSection("orders")} className="w-full bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg transition-all duration-200" > View All Orders <ArrowRight className="w-4 h-4 ml-2" /> </Button> </div> </div> </div> )} {/ Library Summary Section /} {activeSection === "library-summary" && ( <div className="space-y-4"> <div className="border-b border-white/10 pb-4"> <div className="flex items-center gap-3 mb-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Heart className="w-5 h-5 text-white/70" /> </div> <div> <h2 className="text-xl font-bold text-white">Library Summary</h2> <p className="text-gray-500 text-xs">Quick overview of your game library</p> </div> </div> </div> <div className="border border-white/10 rounded-xl p-6 bg-gradient-to-br from-[#1a1d21] to-[#0E1012] hover:border-white/20 transition-all duration-300 shadow-sm"> <div className="space-y-4"> <div className="p-4 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-2">Total Games Owned</p> <p className="text-4xl font-black text-white">{totalGamesOwned}</p> </div> {lastGame && ( <div className="p-4 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-2">Recently Added</p> <p className="text-white font-semibold text-sm truncate">{lastGame}</p> </div> )} <Button onClick={handleViewLibrary} className="w-full bg-white/10 hover:bg-white/20 text-white font-semibold rounded-lg transition-all duration-200" > Go to Library <ArrowRight className="w-4 h-4 ml-2" /> </Button> </div> </div> </div> )} {/ Security Settings Section /} {activeSection === "security" && ( <div className="space-y-4"> {/ Section Header /} <div className="border-b border-white/10 pb-4"> <div className="flex items-center gap-3 mb-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Shield className="w-5 h-5 text-white/70" /> </div> <div> <h2 className="text-xl font-bold text-white">Password & Security</h2> <p className="text-gray-500 text-xs">Manage your account security</p> </div> </div> </div> <div className="grid grid-cols-2 gap-6"> {/ Row 1: Change Password and Change Email /} <div className="border border-white/10 rounded-lg p-4 hover:bg-white/5 transition-all duration-200 hover:border-white/20"> <p className="text-white font-medium text-sm mb-1">Change Password</p> <p className="text-gray-500 text-xs mb-3">Update your password to keep your account secure.</p> {!canChangePasswordState && <p className="text-amber-300 text-xs mb-3">{passwordCooldownMessage}</p>} <Button onClick={() => setChangePasswordOpen(true)} variant="outline" className="w-full border-white/20 text-white hover:bg-white/10 hover:border-white/40 bg-white/5 rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!canChangePasswordState} > <Key className="w-4 h-4 mr-1" /> Update </Button> </div> <div className="border border-white/10 rounded-lg p-4 hover:bg-white/5 transition-all duration-200 hover:border-white/20"> <p className="text-white font-medium text-sm mb-1">Change Email</p> <p className="text-gray-500 text-xs mb-3">Change the email address linked to your Wizard account.</p> {!canChangeEmailState && <p className="text-amber-300 text-xs mb-3">{emailCooldownMessage}</p>} <Button onClick={() => setChangeEmailOpen(true)} variant="outline" className="w-full border-white/20 text-white hover:bg-white/10 hover:border-white/40 bg-white/5 rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled={!canChangeEmailState} > <Mail className="w-4 h-4 mr-1" /> Update </Button> </div> {/ Row 2: Logout All Devices (left only) /} <div className="border border-white/10 rounded-lg p-4 hover:bg-white/5 transition-all duration-200 hover:border-white/20"> <p className="text-white font-medium text-sm mb-1">Logout All Devices</p> <p className="text-gray-500 text-xs mb-3"> Sign out from all devices where your account is currently logged in. </p> <Button onClick={() => setLogoutAllDevicesOpen(true)} variant="outline" className="w-full border-white/20 text-white hover:bg-white/10 hover:border-white/40 bg-white/5 rounded-lg transition-all duration-200 hover:scale-105" > <LogOut className="w-4 h-4 mr-1" /> Execute </Button> </div> <button onClick={() => setActiveSection("two-factor")} className="border border-white/10 rounded-lg p-4 hover:bg-white/5 transition-all duration-200 hover:border-white/20 text-left" > <p className="text-white font-medium text-sm mb-1">Two-Factor Authentication</p> <p className="text-gray-500 text-xs mb-3">Add extra protection to your account</p> <div className="p-3 bg-white/5 rounded-lg border border-white/10"> <p className="text-gray-400 text-xs uppercase tracking-wider mb-1">Status</p> <p className="text-white font-semibold text-sm">Disabled</p> </div> </button> </div> </div> )} {/ Two-Factor Authentication Section /} {activeSection === "two-factor" && ( <div className="space-y-4"> {/ Section Header /} <div className="border-b border-white/10 pb-4"> <div className="flex items-center gap-3 mb-2"> <div className="w-10 h-10 bg-white/10 rounded-lg flex items-center justify-center"> <Lock className="w-5 h-5 text-white/70" /> </div> <div> <h2 className="text-xl font-bold text-white">Two-Factor Authentication</h2> <p className="text-gray-500 text-xs">Add extra protection to your account</p> </div> </div> </div> {/ 2FA Card /} <div className="border border-white/10 rounded-xl p-6 bg-gradient-to-br from-[#1a1d21] to-[#0E1012] hover:border-white/20 transition-all duration-300 shadow-sm"> <div className="space-y-4"> {/ Status Section /} <div className="space-y-2"> <p className="text-gray-400 text-xs uppercase tracking-wider font-bold">Status</p> <div className="p-4 bg-white/5 rounded-lg border border-white/10"> <p className="text-white font-semibold text-sm">Disabled</p> </div> </div> {/ Description /} <div className="space-y-2"> <p className="text-gray-400 text-xs uppercase tracking-wider font-bold">Description</p> <p className="text-gray-400 text-sm leading-relaxed"> Enhance your account security by enabling two-factor authentication. You'll need to enter a code from your authenticator app when logging in. This adds an extra layer of protection to your account. </p> </div> {/ Enable 2FA Button /} <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg transition-all duration-200 hover:scale-105 hover:shadow-lg"> <Lock className="w-4 h-4 mr-2" /> Enable 2FA </Button> </div> </div> </div> )} </AccountLayout> {/ Added missing modal renders /} <EditProfileModal isOpen={editProfileOpen} onClose={() => setEditProfileOpen(false)} user={user} onProfileUpdate={handleProfileUpdate} /> <ChangePasswordModal isOpen={changePasswordOpen} onClose={() => setChangePasswordOpen(false)} user={user} /> <ChangeEmailModal isOpen={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} currentEmail={user?.email} user={user} /> <LogoutAllDevicesModal isOpen={logoutAllDevicesOpen} onClose={() => setLogoutAllDevicesOpen(false)} /> </> ) } [V0_FILE]typescriptreact:file="components/user-dropdown.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { supabase } from "@/lib/supabase" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { LogOut, User, Heart, Package, Shield } from "lucide-react" import { toast } from "sonner" import type { User as SupabaseUser } from "@supabase/supabase-js" interface UserDropdownProps { user: SupabaseUser | null username: string avatarUrl: string | null onSectionChange: (section: string) => void } export function UserDropdown({ user, username, avatarUrl, onSectionChange }: UserDropdownProps) { const router = useRouter() const [open, setOpen] = useState(false) const handleLogout = async () => { try { await supabase.auth.signOut() toast.success("Logged out successfully") router.push("/") } catch (error) { console.error("Logout error:", error) toast.error("Failed to logout") } } const handleNavigate = (section: string) => { onSectionChange(section) setOpen(false) } return ( <DropdownMenu open={open} onOpenChange={setOpen}> <DropdownMenuTrigger asChild> <Button variant="ghost" className="gap-2 h-auto p-2 hover:bg-white/10 rounded-lg transition-colors"> <Avatar className="w-8 h-8 border border-white/20"> <AvatarImage src={avatarUrl || "/placeholder.svg"} alt={username} /> <AvatarFallback className="bg-gradient-to-br from-blue-600 to-purple-600 text-white text-xs font-bold"> {username.charAt(0).toUpperCase()} </AvatarFallback> </Avatar> <span className="text-xs sm:text-sm font-medium text-white truncate">{username}</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end" className="w-56 bg-[#1a1d21] border border-white/10 rounded-lg"> <div className="px-2 py-1.5"> <p className="text-xs text-gray-400 truncate">{user?.email}</p> </div> <DropdownMenuSeparator className="bg-white/10" /> <DropdownMenuItem onClick={() => handleNavigate("overview")} className="gap-2 cursor-pointer"> <User className="w-4 h-4 text-blue-400" /> <span>My Account</span> </DropdownMenuItem> <DropdownMenuItem onClick={() => handleNavigate("games")} className="gap-2 cursor-pointer"> <Heart className="w-4 h-4 text-blue-400" /> <span>My Games</span> </DropdownMenuItem> <DropdownMenuItem onClick={() => handleNavigate("orders")} className="gap-2 cursor-pointer"> <Package className="w-4 h-4 text-blue-400" /> <span>Orders & Tracking</span> </DropdownMenuItem> <DropdownMenuItem onClick={() => handleNavigate("security")} className="gap-2 cursor-pointer"> <Shield className="w-4 h-4 text-blue-400" /> <span>Password & Security</span> </DropdownMenuItem> <DropdownMenuSeparator className="bg-white/10" /> <DropdownMenuItem onClick={handleLogout} className="gap-2 cursor-pointer text-red-400 hover:text-red-300 hover:bg-red-600/10" > <LogOut className="w-4 h-4" /> <span>Sign Out</span> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) } [V0_FILE]typescriptreact:file="components/account-layout.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ArrowLeft, Menu, X } from "lucide-react" import { AccountSidebar } from "@/components/account-sidebar" import { UserDropdown } from "@/components/user-dropdown" import { SiteFooter } from "@/components/site-footer" import type { User as SupabaseUser } from "@supabase/supabase-js" interface AccountLayoutProps { user: SupabaseUser | null username: string avatarUrl: string | null activeSection: string onSectionChange: (section: string) => void canChangePassword: boolean canChangeEmail: boolean children: React.ReactNode } export default function AccountLayout({ user, username, avatarUrl, activeSection, onSectionChange, canChangePassword, canChangeEmail, children, }: AccountLayoutProps) { const router = useRouter() const [sidebarOpen, setSidebarOpen] = useState(false) const handleSectionChange = (section: string) => { onSectionChange(section) setSidebarOpen(false) } return ( <div className="flex flex-col min-h-screen bg-gradient-[radial-gradient(circle_at_top,#1a1a1a_0%,#0e0e0e_40%,#000000_100%)] text-white" style={{backgroundImage: 'radial-gradient(circle at top, #1a1a1a 0%, #0e0e0e 40%, #000000 100%)'}}> {/ Navigation Header /} <div className="border-b border-white/10 bg-[#1a1d21]/30 backdrop-blur-sm relative z-40 flex-shrink-0"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between"> <div className="flex items-center gap-2"> <Button onClick={() => setSidebarOpen(!sidebarOpen)} variant="ghost" size="sm" className="md:hidden text-gray-400 hover:text-white" > {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />} </Button> <Button onClick={() => router.push("/")} variant="ghost" size="sm" className="text-gray-400 hover:text-white gap-2" > <ArrowLeft className="w-4 h-4" />← Back to Home </Button> </div> <UserDropdown user={user} username={username} avatarUrl={avatarUrl} onSectionChange={onSectionChange} /> </div> </div> {sidebarOpen && ( <div className="fixed inset-0 bg-black/50 md:hidden z-20" onClick={() => setSidebarOpen(false)} /> )} <div className="flex flex-1 relative"> <div className={`fixed md:static inset-y-16 left-0 z-30 transition-transform duration-300 transform md:transform-none ${ sidebarOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0" } md:z-auto`} > <AccountSidebar activeSection={activeSection} onSectionChange={handleSectionChange} user={user} canChangePassword={canChangePassword} canChangeEmail={canChangeEmail} /> </div> {/ Main Content - flex-1 ensures it takes remaining space /} <div className="flex-1 flex flex-col w-full"> <div className="flex-1"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <div className="space-y-8">{children}</div> </div> </div> </div> </div> <SiteFooter /> </div> ) } [V0_FILE]typescriptreact:file="app/support/forgot-access/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ArrowLeft, KeyRound, Lock, ShieldAlert, AlertTriangle } from "lucide-react" type IssueType = "forgot-email" | "forgot-password" | "account-locked" | "suspicious-activity" | null export default function ForgotAccessPage() { const router = useRouter() const [selectedIssue, setSelectedIssue] = useState<IssueType>(null) const issues = [ { id: "forgot-email", title: "Forgot Registered Email", description: "Can't remember the email address linked to your account", icon: KeyRound, color: "from-blue-600 to-cyan-600", }, { id: "forgot-password", title: "Forgot Password", description: "Need to reset or recover your account password", icon: Lock, color: "from-purple-600 to-pink-600", }, { id: "account-locked", title: "Account Locked", description: "Your account has been temporarily locked for security", icon: ShieldAlert, color: "from-orange-600 to-red-600", }, { id: "suspicious-activity", title: "Suspicious Activity", description: "Unusual account access or unauthorized changes", icon: AlertTriangle, color: "from-red-600 to-pink-600", }, ] const getGuidanceText = (issue: IssueType) => { switch (issue) { case "forgot-email": return "We'll help you recover your account using your account details. You'll need to verify your identity before we can show you the registered email." case "forgot-password": return "We'll send a password reset link to your registered email address. Check your inbox and follow the instructions to create a new password." case "account-locked": return "Your account is temporarily locked due to multiple failed login attempts. This is a security measure. We'll help you regain access after you verify your identity." case "suspicious-activity": return "We'll guide you through a security review process to verify that you are the legitimate account owner. This may take a few minutes." default: return "" } } const handleContactSupport = () => { // Navigate to support form with the issue type router.push(`/support/contact?issue=${selectedIssue}`) } if (selectedIssue) { return ( <div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900"> <header className="backdrop-blur-sm sticky top-0 z-50 border-b border-gray-800"> <div className="container mx-auto px-4 sm:px-6 py-4"> <Button variant="ghost" size="sm" onClick={() => setSelectedIssue(null)} className="text-gray-400 hover:text-white" > <ArrowLeft className="w-4 h-4 mr-2" /> Back to Options </Button> </div> </header> <main className="container mx-auto px-4 sm:px-6 py-12"> <div className="max-w-2xl mx-auto"> {/ Issue Details Card /} <Card className="bg-gray-800 border-gray-700 mb-8"> <CardHeader> <CardTitle className="text-white text-2xl"> {issues.find((i) => i.id === selectedIssue)?.title} </CardTitle> </CardHeader> <CardContent className="space-y-6"> {/ Guidance Text /} <div className="bg-gray-900/50 rounded-lg p-6 border border-gray-700"> <p className="text-gray-300 leading-relaxed">{getGuidanceText(selectedIssue)}</p> </div> {/ What Happens Next /} <div className="bg-blue-900/20 border border-blue-500/30 rounded-lg p-6"> <h3 className="text-white font-semibold mb-4">What Happens Next</h3> <ol className="space-y-3 text-gray-300"> <li className="flex gap-3"> <span className="text-blue-400 font-semibold min-w-fit">1.</span> <span>You'll provide some account information to verify your identity</span> </li> <li className="flex gap-3"> <span className="text-blue-400 font-semibold min-w-fit">2.</span> <span>Our support team will review your request within 24 hours</span> </li> <li className="flex gap-3"> <span className="text-blue-400 font-semibold min-w-fit">3.</span> <span>You'll receive a confirmation email with next steps</span> </li> </ol> </div> {/ Help Text /} <div className="bg-gray-900/50 rounded-lg p-4"> <p className="text-gray-400 text-sm"> 💡 <strong>Tip:</strong> Have your account details, order history, or any verification documents ready to speed up the process. </p> </div> {/ Action Buttons /} <div className="flex gap-3 pt-4"> <Button variant="outline" onClick={() => setSelectedIssue(null)} className="flex-1 border-gray-600 text-gray-300 hover:text-white bg-transparent" > Cancel </Button> <Button onClick={handleContactSupport} className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"> Contact Support </Button> </div> </CardContent> </Card> </div> </main> </div> ) } return ( <div className="min-h-screen bg-gradient-to-b from-gray-900 via-black to-gray-900"> {/ Header /} <header className="backdrop-blur-sm sticky top-0 z-50 border-b border-gray-800"> <div className="container mx-auto px-4 sm:px-6 py-4"> <Button variant="ghost" size="sm" onClick={() => router.push("/support")} className="text-gray-400 hover:text-white" > <ArrowLeft className="w-4 h-4 mr-2" /> Back to Support </Button> </div> </header> {/ Main Content /} <main className="container mx-auto px-4 sm:px-6 py-12"> <div className="max-w-4xl mx-auto"> {/ Title Section /} <div className="text-center mb-12"> <h1 className="text-4xl font-bold text-white mb-4">Account Access Help</h1> <p className="text-gray-400 text-lg"> Select the issue you're experiencing below. We'll guide you through the process step by step. </p> </div> {/ Issues Grid /} <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {issues.map((issue) => { const IconComponent = issue.icon return ( <button key={issue.id} onClick={() => setSelectedIssue(issue.id as IssueType)} className="group relative overflow-hidden rounded-xl transition-all duration-300 hover:-translate-y-1" > {/ Gradient Background Effect /} <div className={`absolute inset-0 bg-gradient-to-r ${issue.color} opacity-0 group-hover:opacity-20 blur-xl transition duration-300 pointer-events-none`} /> {/ Card Content /} <Card className="relative bg-gray-800/60 border-gray-700/60 group-hover:border-gray-600 transition-all cursor-pointer h-full"> <CardContent className="p-6 flex flex-col h-full"> {/ Icon /} <div className={`inline-flex items-center justify-center h-12 w-12 rounded-lg bg-gradient-to-br ${issue.color} text-white mb-4`} > <IconComponent className="w-6 h-6" /> </div> {/ Title and Description /} <h3 className="text-lg font-semibold text-white mb-2 group-hover:text-gray-100 transition text-left"> {issue.title} </h3> <p className="text-gray-400 text-sm group-hover:text-gray-300 transition flex-1 text-left mb-4"> {issue.description} </p> {/ Arrow Indicator /} <div className="text-gray-500 group-hover:text-gray-300 transition"> <ArrowLeft className="w-4 h-4 rotate-180" /> </div> </CardContent> </Card> </button> ) })} </div> {/ Info Box /} <div className="mt-12 bg-gray-800/50 border border-gray-700/50 rounded-lg p-6 text-center"> <p className="text-gray-400"> Can't find your issue?{" "} <a href="/support" className="text-blue-400 hover:text-blue-300 transition"> Browse all support categories </a> </p> </div> </div> </main> </div> ) } [V0_FILE]typescriptreact:file="app/support/order/page.tsx" isMerged="true" "use client" import type React from "react" import { useRouter } from "next/navigation" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { supabase } from "@/lib/supabase" import { toast, Toaster } from "sonner" import { ShoppingCart } from "lucide-react" export default function OrderIssuePage() { const router = useRouter() const [formData, setFormData] = useState({ name: "", email: "", orderNumber: "", issueType: "not-launching", description: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (value: string) => { setFormData((prev) => ({ ...prev, issueType: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.name || !formData.email || !formData.description) { toast.error("Please fill in all required fields") return } setIsSubmitting(true) try { const { error } = await supabase.from("support_tickets").insert([ { name: formData.name, email: formData.email, order_number: formData.orderNumber || null, issue_type: formData.issueType, message: formData.description, category: "order", status: "pending", priority: "normal", }, ]) if (error) throw error toast.success("Your order issue has been submitted! Our team will assist you shortly.") // Reset form setFormData({ name: "", email: "", orderNumber: "", issueType: "not-launching", description: "", }) // Navigate back after delay setTimeout(() => router.push("/support"), 2000) } catch (err: any) { console.error("Submit failed:", err) toast.error(err.message || "Failed to submit. Please try again.") } finally { setIsSubmitting(false) } } return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> <Toaster position="top-right" /> {/ Back Button /} <button onClick={() => router.back()} className="fixed top-4 left-4 z-50 flex items-center gap-2 text-slate-400 hover:text-slate-200 transition" > <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> </svg> <span className="text-sm">Back</span> </button> <div className="container mx-auto px-4 py-12 max-w-2xl"> {/ Header /} <div className="text-center mb-12"> <div className="flex justify-center mb-6"> <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/30"> <ShoppingCart className="h-8 w-8 text-white" /> </div> </div> <h1 className="text-4xl font-bold text-slate-100 mb-4">Purchase or Order Issue</h1> <p className="text-slate-400 text-lg"> Tell us about your order or purchase issue. This includes game-related problems like not launching, technical errors, or delivery issues. </p> </div> {/ Form Card /} <Card className="bg-gradient-to-br from-slate-800/40 to-slate-900/40 border-slate-700/30"> <CardHeader> <CardTitle>Submit Your Issue</CardTitle> <CardDescription>Fill in the details below and we'll help resolve your issue</CardDescription> </CardHeader> <CardContent> <form onSubmit={handleSubmit} className="space-y-6"> {/ Name /} <div> <label className="block text-slate-300 font-medium mb-2">Full Name </label> <Input type="text" name="name" value={formData.name} onChange={handleInputChange} placeholder="Enter your full name" className="bg-slate-800/50 border-slate-700 text-slate-100 placeholder-slate-500" /> </div> {/* Email /} <div> <label className="block text-slate-300 font-medium mb-2">Email Address </label> <Input type="email" name="email" value={formData.email} onChange={handleInputChange} placeholder="Enter your email" className="bg-slate-800/50 border-slate-700 text-slate-100 placeholder-slate-500" /> </div> {/* Order Number /} <div> <label className="block text-slate-300 font-medium mb-2">Order Number (Optional)</label> <Input type="text" name="orderNumber" value={formData.orderNumber} onChange={handleInputChange} placeholder="E.g., ORD-123456" className="bg-slate-800/50 border-slate-700 text-slate-100 placeholder-slate-500" /> </div> {/ Issue Type /} <div> <label className="block text-slate-300 font-medium mb-2">Issue Type </label> <Select value={formData.issueType} onValueChange={handleSelectChange}> <SelectTrigger className="bg-slate-800/50 border-slate-700 text-slate-100"> <SelectValue /> </SelectTrigger> <SelectContent className="bg-slate-800 border-slate-700"> <SelectItem value="not-launching">Game Not Launching</SelectItem> <SelectItem value="technical-error">Technical Error</SelectItem> <SelectItem value="crash">Game Crashing</SelectItem> <SelectItem value="performance">Performance Issues</SelectItem> <SelectItem value="delivery">Delivery/Access Issue</SelectItem> <SelectItem value="refund">Refund Request</SelectItem> <SelectItem value="other">Other</SelectItem> </SelectContent> </Select> </div> {/* Description /} <div> <label className="block text-slate-300 font-medium mb-2">Description </label> <Textarea name="description" value={formData.description} onChange={handleInputChange} placeholder="Please describe your issue in detail. Include any error messages or steps to reproduce the problem." rows={6} className="bg-slate-800/50 border-slate-700 text-slate-100 placeholder-slate-500 resize-none" /> </div> {/* Submit Button /} <Button type="submit" disabled={isSubmitting} className="w-full bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-semibold py-3 rounded-lg transition-all disabled:opacity-50" > {isSubmitting ? "Submitting..." : "Submit Issue"} </Button> </form> </CardContent> </Card> {/ Info Box /} <div className="mt-8 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg"> <p className="text-slate-300 text-sm"> <strong>What happens next?</strong> Our support team will review your submission and reach out to you via email within 24-48 hours with assistance. </p> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="app/discover/loading.tsx" isMerged="true" export default function DiscoverLoading() { return null } [V0_FILE]typescriptreact:file="app/support/order-issues/page.tsx" isMerged="true" "use client" import React from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { ArrowLeft, Package, CreditCard, AlertCircle, RotateCcw } from "lucide-react" interface IssueOption { id: string icon: React.ReactNode title: string issues: string[] route: string } const issueOptions: IssueOption[] = [ { id: "tracking", icon: <Package className="w-8 h-8" />, title: "Tracking ID Problem", issues: ["Order not found", "Tracking ID not working", "Status not updating"], route: "/support/tracking", }, { id: "payment", icon: <CreditCard className="w-8 h-8" />, title: "Payment Issue", issues: ["Payment deducted", "Token issue", "Pending payment"], route: "/support/order", }, { id: "delivery", icon: <AlertCircle className="w-8 h-8" />, title: "Game Not Received", issues: ["Game missing", "Wrong game delivered", "Delivery delay"], route: "/support/game-delivery", }, { id: "refund", icon: <RotateCcw className="w-8 h-8" />, title: "Refund Request", issues: ["Refund eligibility", "Refund status"], route: "/support/refund", }, ] export default function OrderIssuesPage() { const router = useRouter() return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> {/ Back Button /} <div className="max-w-6xl mx-auto px-4 pt-8"> <button onClick={() => router.push("/support")} className="flex items-center gap-2 text-slate-400 hover:text-slate-200 transition mb-12" > <ArrowLeft className="w-4 h-4" /> Back to Support </button> </div> {/ Header Section /} <div className="max-w-6xl mx-auto px-4 text-center mb-16"> <h1 className="text-4xl sm:text-5xl font-bold text-white mb-4 text-balance">Order & Purchase Issues</h1> <p className="text-slate-400 text-lg max-w-2xl mx-auto text-balance"> Choose the issue you're facing so we can help you faster. </p> </div> {/ Issues Grid /} <div className="max-w-6xl mx-auto px-4 pb-16"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {issueOptions.map((option) => ( <div key={option.id} className="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:-translate-y-1" > {/ Gradient Overlay on Hover /} <div className="absolute inset-0 bg-gradient-to-r from-blue-500/50 via-cyan-500/30 to-blue-500/50 opacity-0 group-hover:opacity-100 blur-xl transition duration-300 pointer-events-none" /> {/ Card Content /} <div className="relative bg-white rounded-2xl p-8 shadow-lg group-hover:shadow-xl group-hover:shadow-cyan-500/20 transition-all duration-300"> {/ Icon /} <div className="mb-6 inline-flex p-4 bg-slate-100 rounded-xl group-hover:bg-blue-100 transition-colors"> <div className="text-slate-900 group-hover:text-blue-600 transition-colors">{option.icon}</div> </div> {/ Title /} <h3 className="text-xl font-bold text-slate-900 mb-4">{option.title}</h3> {/ Issue List /} <ul className="space-y-2 mb-8"> {option.issues.map((issue, idx) => ( <li key={idx} className="flex items-start gap-3 text-slate-600"> <span className="text-blue-500 font-bold mt-0.5">•</span> <span>{issue}</span> </li> ))} </ul> {/ Continue Button /} <Button onClick={() => router.push(option.route)} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition-all" > Continue </Button> </div> </div> ))} </div> </div> </div> ) } [V0_FILE]typescriptreact:file="app/support/game-delivery/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import type React from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { toast } from "sonner" import { Loader2, ArrowLeft, Package } from "lucide-react" import { supportTicketService } from "@/lib/supabase" function getOrCreateGuestTempId(): string { try { const key = "wg_guest_support_temp_id" const existing = localStorage.getItem(key) if (existing) return existing const id = typeof crypto !== "undefined" && "randomUUID" in crypto ? (crypto.randomUUID() as string) : `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` localStorage.setItem(key, id) return id } catch { return `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` } } export default function GameDeliveryPage() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const [tempId, setTempId] = useState<string | null>(null) const [formData, setFormData] = useState({ name: "", email: "", trackingId: "", issueType: "game-missing", message: "", }) useEffect(() => { const id = getOrCreateGuestTempId() setTempId(id) }, []) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => { setFormData((prev) => ({ ...prev, issueType: e.target.value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.name.trim()) { toast.error("Please enter your name") return } if (!formData.email.trim()) { toast.error("Please enter your email") return } if (!formData.trackingId.trim()) { toast.error("Please enter your tracking ID") return } if (!formData.message.trim()) { toast.error("Please describe your issue") return } setIsSubmitting(true) try { await supportTicketService.createTicket({ name: formData.name.trim(), trackingId: formData.trackingId.trim(), priority: "Game Delivery", message: `Email: ${formData.email.trim()}\nIssue Type: ${formData.issueType}\n\n${formData.message.trim()}`, tempId: tempId || undefined, }) toast.success("Your issue has been submitted successfully!") setTimeout(() => { router.push("/support") }, 1000) } catch (err) { console.error("Submission error:", err) toast.error("Failed to submit your issue. Please try again.") } finally { setIsSubmitting(false) } } return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> <div className="max-w-3xl mx-auto px-4 py-16"> {/ Back Button /} <button onClick={() => router.push("/support/order-issues")} className="flex items-center gap-2 text-slate-400 hover:text-slate-200 mb-8 transition" > <ArrowLeft className="w-4 h-4" /> Back to Issues </button> {/ Header /} <div className="text-center mb-12"> <div className="flex justify-center mb-6"> <div className="h-16 w-16 rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/30"> <Package className="h-8 w-8 text-white" /> </div> </div> <h1 className="text-4xl font-bold text-slate-100 mb-4">Game Not Received</h1> <p className="text-slate-400 text-lg"> Tell us about your game delivery issue. We'll help you resolve it as quickly as possible. </p> </div> {/ Form Card /} <form onSubmit={handleSubmit} className="bg-white rounded-2xl p-8 shadow-2xl space-y-6"> {/ Name Field /} <div> <label className="block text-sm font-medium text-slate-800 mb-2"> Name <span className="text-red-500"></span> </label> <Input type="text" name="name" value={formData.name} onChange={handleInputChange} placeholder="Your full name" className="bg-slate-50 border border-slate-300 text-slate-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Email Field /} <div> <label className="block text-sm font-medium text-slate-800 mb-2"> Email <span className="text-red-500"></span> </label> <Input type="email" name="email" value={formData.email} onChange={handleInputChange} placeholder="your.email@example.com" className="bg-slate-50 border border-slate-300 text-slate-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Tracking ID Field /} <div> <label className="block text-sm font-medium text-slate-800 mb-2"> Tracking ID <span className="text-red-500"></span> </label> <Input type="text" name="trackingId" value={formData.trackingId} onChange={handleInputChange} placeholder="Your order or tracking ID" className="bg-slate-50 border border-slate-300 text-slate-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Issue Type Dropdown /} <div> <label className="block text-sm font-medium text-slate-800 mb-2"> Issue Type <span className="text-red-500"></span> </label> <select name="issueType" value={formData.issueType} onChange={handleSelectChange} className="w-full bg-slate-50 border border-slate-300 text-slate-900 rounded-lg p-3 focus:border-blue-500 focus:ring-blue-500" > <option value="game-missing">Game Missing</option> <option value="wrong-game">Wrong Game Delivered</option> <option value="delivery-delay">Delivery Delay</option> </select> </div> {/* Message Field /} <div> <label className="block text-sm font-medium text-slate-800 mb-2"> Message / Details <span className="text-red-500"></span> </label> <Textarea name="message" value={formData.message} onChange={handleInputChange} placeholder="Please describe your delivery issue in detail..." className="bg-slate-50 border border-slate-300 text-slate-900 rounded-lg p-3 w-full h-40 resize-none focus:outline-none focus:border-blue-500 focus:ring-blue-500 transition" /> </div> {/* Button Group /} <div className="flex gap-3 pt-4"> <Button type="button" onClick={() => router.push("/support/order-issues")} className="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-900 font-medium rounded-lg" > Back </Button> <Button type="submit" disabled={isSubmitting} className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-6 rounded-lg transition-all" > {isSubmitting ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Submitting... </> ) : ( "Submit Your Issue" )} </Button> </div> </form> {/ Info Box /} <div className="mt-8 p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg"> <p className="text-slate-300 text-sm"> <strong>What happens next?</strong> Our support team will review your submission and contact you within 24-48 hours to resolve your delivery issue. </p> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="app/support/submit/page.tsx" isMerged="true" 'use client'; import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import React from "react" import { Button } from "@/components/ui/button" import { useState } from "react" import { useRouter } from "next/navigation" import { useSearchParams } from "next/navigation" import { Suspense } from 'react' import { SubmitIssueClient } from './client' import { AlertCircle, ChevronLeft, CheckCircle2 } from 'lucide-react' import { toast } from 'react-toastify' import { issueConfigs, IssueType } from '@/config/issueConfigs' export default function SubmitIssuePage() { const searchParams = useSearchParams() const router = useRouter() const type = (searchParams.get('type') || 'tracking') as IssueType const config = issueConfigs[type] const [isSubmitting, setIsSubmitting] = useState(false) const [formData, setFormData] = useState({ name: '', email: '', tracking_id: '', order_id: '', amount: '', game_name: '', reason: '', message: '', }) const Loading = () => null const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setFormData(prev => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)) toast.success('Issue submitted successfully! We will contact you soon.') setFormData({ name: '', email: '', tracking_id: '', order_id: '', amount: '', game_name: '', reason: '', message: '', }) setTimeout(() => router.push('/support'), 1000) } catch (error) { toast.error('Failed to submit issue. Please try again.') } finally { setIsSubmitting(false) } } if (!config) { return ( <div className="min-h-screen bg-gradient-to-b from-gray-800 to-gray-900 flex items-center justify-center"> <div className="text-center"> <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-4" /> <h1 className="text-white text-xl font-bold mb-2">Invalid Issue Type</h1> <p className="text-gray-400 mb-6">Please select a valid issue type.</p> <Button onClick={() => router.back()} className="bg-blue-600 hover:bg-blue-700"> Go Back </Button> </div> </div> ) } return ( <Suspense fallback={<Loading />}> <div className="min-h-screen bg-gradient-to-b from-gray-800 to-gray-900"> {/ Header Section /} <div className="relative bg-gradient-to-b from-gray-800 to-gray-900 py-8 sm:py-12 px-4 lg:px-0"> <div className="max-w-2xl mx-auto"> {/ Back Button /} <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4 mr-2" /> Back </Button> {/ Title and Subtitle /} <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">{config.title}</h1> <p className="text-gray-400 text-base sm:text-lg">{config.description}</p> </div> </div> {/ Form Section /} <div className="max-w-2xl mx-auto px-4 lg:px-0 py-8"> <div className="bg-gray-800 border border-gray-700 rounded-lg p-6 sm:p-8"> <form onSubmit={handleSubmit} className="space-y-6"> {/ Name Field /} <div> <label className="block text-white font-medium mb-2">Full Name</label> <Input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Enter your full name" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Email Field /} <div> <label className="block text-white font-medium mb-2">Email Address</label> <Input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Enter your email" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Conditional Fields Based on Issue Type /} {config.fields.includes('tracking_id') && ( <div> <label className="block text-white font-medium mb-2">Tracking ID</label> <Input type="text" name="tracking_id" value={formData.tracking_id} onChange={handleChange} placeholder="Enter your tracking ID" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('order_id') && ( <div> <label className="block text-white font-medium mb-2">Order ID</label> <Input type="text" name="order_id" value={formData.order_id} onChange={handleChange} placeholder="Enter your order ID" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('amount') && ( <div> <label className="block text-white font-medium mb-2">Amount Charged (₹)</label> <Input type="number" name="amount" value={formData.amount} onChange={handleChange} placeholder="Enter amount" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('game_name') && ( <div> <label className="block text-white font-medium mb-2">Game Name</label> <Input type="text" name="game_name" value={formData.game_name} onChange={handleChange} placeholder="Enter game name" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('reason') && ( <div> <label className="block text-white font-medium mb-2">Reason for Refund</label> <Input type="text" name="reason" value={formData.reason} onChange={handleChange} placeholder="Enter reason" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {/ Message Field /} <div> <label className="block text-white font-medium mb-2">Additional Details</label> <Textarea name="message" value={formData.message} onChange={handleChange} placeholder="Describe your issue in detail..." required rows={5} className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Submit Button /} <Button type="submit" disabled={isSubmitting} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold h-11 transition-all duration-200" > {isSubmitting ? 'Submitting...' : 'Submit Issue'} </Button> </form> </div> {/ Info Box /} <div className="mt-6 p-4 sm:p-5 bg-gray-800 border border-gray-700 rounded-lg flex gap-3"> <CheckCircle2 className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" /> <p className="text-gray-400 text-sm sm:text-base"> We typically respond to support requests within 24-48 hours. You'll receive updates via email. </p> </div> </div> </div> </Suspense> ) } [V0_FILE]typescriptreact:file="app/support/submit/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/support/submit/client.tsx" isMerged="true" 'use client' import React from "react" import { useState } from 'react' import { useSearchParams, useRouter } from 'next/navigation' import { ChevronLeft, AlertCircle, CheckCircle2 } from 'lucide-react' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' import { toast } from 'sonner' type IssueType = 'tracking' | 'payment' | 'game-not-received' | 'refund' const issueConfigs = { tracking: { title: 'Tracking ID Problem', description: 'Help us locate your order', fields: ['name', 'email', 'tracking_id', 'order_id', 'message'], }, payment: { title: 'Payment Issue', description: 'Report payment-related problems', fields: ['name', 'email', 'order_id', 'amount', 'message'], }, 'game-not-received': { title: 'Game Not Received', description: 'Report missing game delivery', fields: ['name', 'email', 'order_id', 'game_name', 'message'], }, refund: { title: 'Refund Request', description: 'Request a refund for your purchase', fields: ['name', 'email', 'order_id', 'reason', 'message'], }, } export function SubmitIssueClient() { const searchParams = useSearchParams() const router = useRouter() const type = (searchParams.get('type') || 'tracking') as IssueType const config = issueConfigs[type] const [isSubmitting, setIsSubmitting] = useState(false) const [formData, setFormData] = useState({ name: '', email: '', tracking_id: '', order_id: '', amount: '', game_name: '', reason: '', message: '', }) if (!config) { return ( <div className="min-h-screen bg-gradient-to-b from-gray-800 to-gray-900 flex items-center justify-center"> <div className="text-center"> <AlertCircle className="w-12 h-12 text-red-400 mx-auto mb-4" /> <h1 className="text-white text-xl font-bold mb-2">Invalid Issue Type</h1> <p className="text-gray-400 mb-6">Please select a valid issue type.</p> <Button onClick={() => router.back()} className="bg-blue-600 hover:bg-blue-700"> Go Back </Button> </div> </div> ) } const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setFormData(prev => ({ ...prev, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)) toast.success('Issue submitted successfully! We will contact you soon.') setFormData({ name: '', email: '', tracking_id: '', order_id: '', amount: '', game_name: '', reason: '', message: '', }) setTimeout(() => router.push('/support'), 1000) } catch (error) { toast.error('Failed to submit issue. Please try again.') } finally { setIsSubmitting(false) } } return ( <div className="min-h-screen bg-gradient-to-b from-gray-800 to-gray-900"> {/ Header Section /} <div className="relative bg-gradient-to-b from-gray-800 to-gray-900 py-8 sm:py-12 px-4 lg:px-0"> <div className="max-w-2xl mx-auto"> {/ Back Button /} <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4 mr-2" /> Back </Button> {/ Title and Subtitle /} <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">{config.title}</h1> <p className="text-gray-400 text-base sm:text-lg">{config.description}</p> </div> </div> {/ Form Section /} <div className="max-w-2xl mx-auto px-4 lg:px-0 py-8"> <div className="bg-gray-800 border border-gray-700 rounded-lg p-6 sm:p-8"> <form onSubmit={handleSubmit} className="space-y-6"> {/ Name Field /} <div> <label className="block text-white font-medium mb-2">Full Name</label> <Input type="text" name="name" value={formData.name} onChange={handleChange} placeholder="Enter your full name" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Email Field /} <div> <label className="block text-white font-medium mb-2">Email Address</label> <Input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Enter your email" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Conditional Fields Based on Issue Type /} {config.fields.includes('tracking_id') && ( <div> <label className="block text-white font-medium mb-2">Tracking ID</label> <Input type="text" name="tracking_id" value={formData.tracking_id} onChange={handleChange} placeholder="Enter your tracking ID" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('order_id') && ( <div> <label className="block text-white font-medium mb-2">Order ID</label> <Input type="text" name="order_id" value={formData.order_id} onChange={handleChange} placeholder="Enter your order ID" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('amount') && ( <div> <label className="block text-white font-medium mb-2">Amount Charged (₹)</label> <Input type="number" name="amount" value={formData.amount} onChange={handleChange} placeholder="Enter amount" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('game_name') && ( <div> <label className="block text-white font-medium mb-2">Game Name</label> <Input type="text" name="game_name" value={formData.game_name} onChange={handleChange} placeholder="Enter game name" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {config.fields.includes('reason') && ( <div> <label className="block text-white font-medium mb-2">Reason for Refund</label> <Input type="text" name="reason" value={formData.reason} onChange={handleChange} placeholder="Enter reason" required className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> )} {/ Message Field /} <div> <label className="block text-white font-medium mb-2">Additional Details</label> <Textarea name="message" value={formData.message} onChange={handleChange} placeholder="Describe your issue in detail..." required rows={5} className="bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> {/ Submit Button /} <Button type="submit" disabled={isSubmitting} className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold h-11 transition-all duration-200" > {isSubmitting ? 'Submitting...' : 'Submit Issue'} </Button> </form> </div> {/ Info Box /} <div className="mt-6 p-4 sm:p-5 bg-gray-800 border border-gray-700 rounded-lg flex gap-3"> <CheckCircle2 className="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5" /> <p className="text-gray-400 text-sm sm:text-base"> We typically respond to support requests within 24-48 hours. You'll receive updates via email. </p> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="config/issueConfigs.tsx" isMerged="true" export type IssueType = 'tracking' | 'payment' | 'game-not-received' | 'refund' export const issueConfigs: Record<IssueType, { title: string description: string fields: string[] }> = { tracking: { title: 'Tracking ID Problem', description: 'Help us locate your order', fields: ['name', 'email', 'tracking_id', 'order_id', 'message'], }, payment: { title: 'Payment Issue', description: 'Report payment-related problems', fields: ['name', 'email', 'order_id', 'amount', 'message'], }, 'game-not-received': { title: 'Game Not Received', description: 'Report missing game delivery', fields: ['name', 'email', 'order_id', 'game_name', 'message'], }, refund: { title: 'Refund Request', description: 'Request a refund for your purchase', fields: ['name', 'email', 'order_id', 'reason', 'message'], }, } [V0_FILE]typescriptreact:file="app/support/page.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useMemo, useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calendar, Clock, ExternalLink, CreditCard, HelpCircle, Users, KeyRound, ShoppingCart, Hash, } from "lucide-react" import { Toaster, toast } from "sonner" import { accountsService, type AccountSubmission, supabase } from "@/lib/supabase" interface NewsArticle { id: string title: string excerpt: string content: string date: string category: string image: string author: string readTime: string tags: string[] } type IssueType = "Refund" | "Replacement" | "Other" interface SupportFormState { name: string message: string priority: IssueType } function getOrCreateTempId(): string { if (typeof window === "undefined") return "" const key = "wg_temp_id" let id = window.localStorage.getItem(key) if (!id) { id = (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `wg_${Math.random().toString(36).slice(2)}_${Date.now()}`) || `wg_${Math.random().toString(36).slice(2)}_${Date.now()}` window.localStorage.setItem(key, id) } return id } async function fileToBase64(file: File): Promise<string> { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = () => resolve(reader.result as string) reader.onerror = reject reader.readAsDataURL(file) }) } export default function SupportPage() { const router = useRouter() const search = useSearchParams() const initialTab = search.get("tab") || "latest" const [activeTab, setActiveTab] = useState(initialTab) const [supportForm, setSupportForm] = useState<SupportFormState>({ name: "", message: "", priority: "Refund", }) // Step-based Support flow const [supportStep, setSupportStep] = useState<"select" | "refund">("select") const [selectedIssue, setSelectedIssue] = useState<string | null>(null) // Refund form state const [refundTrackingId, setRefundTrackingId] = useState<string>("") const [screenshotFile, setScreenshotFile] = useState<File | null>(null) const [screenshotPreview, setScreenshotPreview] = useState<string | null>(null) const [isSubmitting, setIsSubmitting] = useState(false) // Guest temp id state const [tempId, setTempId] = useState<string>("") const [mySubs, setMySubs] = useState<AccountSubmission[]>([]) // Track My Account states const [trackIdInput, setTrackIdInput] = useState("") const [trackLoading, setTrackLoading] = useState(false) const [trackError, setTrackError] = useState<string | null>(null) const [trackedSubmission, setTrackedSubmission] = useState<AccountSubmission | null>(null) const [showTrackedPassword, setShowTrackedPassword] = useState(false) const [searchQuery, setSearchQuery] = useState("") useEffect(() => { setTempId(getOrCreateTempId()) }, []) // Load my submissions and subscribe for real-time useEffect(() => { if (!tempId) return let unsub: (() => void) | undefined const load = async () => { try { const items = await accountsService.listForClient(tempId) setMySubs(items) } catch (err) { console.warn("Failed to load submissions", err) } unsub = accountsService.subscribeForClient((sub) => { setMySubs((prev) => { const idx = prev.findIndex((p) => p.id === sub.id) if (idx >= 0) { const clone = [...prev] clone[idx] = sub return clone } return [sub, ...prev] }) }, tempId) } void load() return () => unsub?.() }, [tempId]) const newsArticles: NewsArticle[] = useMemo( () => [ { id: "1", title: "Cyberpunk 2077: Phantom Liberty Expansion Now Available", excerpt: "Experience the ultimate spy-thriller expansion with new characters, storylines, and gameplay mechanics.", content: "The highly anticipated Phantom Liberty expansion for Cyberpunk 2077 is now available...", date: "2024-01-15", category: "Game Updates", image: "https://www.cdprojekt.com/en/wp-content/uploads-en/2022/02/cyberpunk2077-02.png", author: "Gaming Team", readTime: "5 min read", tags: ["Cyberpunk 2077", "Expansion", "RPG"], }, { id: "2", title: "Winter Sale: Up to 80% Off on Top Games", excerpt: "Don't miss our biggest sale of the year with incredible discounts on AAA titles and indie gems.", content: "Our Winter Sale is here with massive discounts across our entire catalog...", date: "2024-01-12", category: "Sales & Promotions", image: "https://img.freepik.com/free-vector/realistic-winter-sale-banner-template_52683-100252.jpg", author: "Store Team", readTime: "3 min read", tags: ["Sale", "Discount", "Promotion"], }, { id: "3", title: "The Witcher 3: Next-Gen Update Performance Analysis", excerpt: "Detailed breakdown of the performance improvements and visual enhancements in the latest update.", content: "The Witcher 3's next-gen update brings significant improvements...", date: "2024-01-10", category: "Game Reviews", image: "https://cdn1.epicgames.com/offer/14ee004dadc142faaaece5a6270fb628/EGS_TheWitcher3WildHuntCompleteEdition_CDPROJEKTRED_S1_2560x1440-82eb5cf8f725e329d3194920c0c0b64f?resize=1&w=480&h=270&quality=medium", author: "Tech Team", readTime: "8 min read", tags: ["The Witcher 3", "Update", "Performance"], }, { id: "4", title: "New Payment Methods Now Supported", excerpt: "We've added support for more payment options including digital wallets and regional payment methods.", content: "To make purchasing games even easier, we've expanded our payment options...", date: "2024-01-08", category: "Platform Updates", image: "https://blog.razorpay.in/wp-content/uploads/2024/02/upi-image.webp", author: "Platform Team", readTime: "2 min read", tags: ["Payment", "Update", "Platform"], }, ], [], ) const handleSupportSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!supportForm.name.trim() || !supportForm.message.trim()) { toast.error("Please fill in all required fields") return } setIsSubmitting(true) try { let screenshotDataUrl: string | null = null if (screenshotFile) { screenshotDataUrl = await fileToBase64(screenshotFile) } const payload = { name: supportForm.name || null, message: supportForm.message || null, tracking_id: refundTrackingId || null, priority: supportForm.priority, status: "pending", temp_id: tempId || null, screenshot_url: screenshotDataUrl, } const { error } = await supabase.from("support_tickets").insert([payload]) if (error) throw error toast.success("Support ticket submitted successfully! We'll review it shortly.") // Reset UI setSupportForm({ name: "", message: "", priority: "Refund" }) setRefundTrackingId("") setScreenshotFile(null) if (screenshotPreview) { URL.revokeObjectURL(screenshotPreview) } setScreenshotPreview(null) setSupportStep("select") setSelectedIssue(null) } catch (err: any) { console.error("Submit support ticket failed:", err) toast.error(err.message || "Failed to submit ticket. Please try again.") } finally { setIsSubmitting(false) } } const handleGoBack = () => { window.location.href = "/" } const openProviderPage = (provider: "rockstar" | "ea" | "ubisoft") => { router.push(`/news/accounts/${provider}`) } const providerLabel = (p: string) => p === "rockstar" ? "Rockstar" : p === "ea" ? "EA" : p === "ubisoft" ? "Ubisoft" : p const handleTrackLookup = async () => { const id = trackIdInput.trim() if (!id) { setTrackError("Please enter a Tracking ID") setTrackedSubmission(null) return } setTrackLoading(true) setTrackError(null) setTrackedSubmission(null) setShowTrackedPassword(false) try { const sub = await accountsService.getSubmissionByTrackingId(id) if (!sub) { setTrackError("Tracking ID not found.") return } setTrackedSubmission(sub) } catch (e) { console.error(e) setTrackError("An unexpected error occurred. Please try again.") } finally { setTrackLoading(false) } } const issueOptions: { key: string; label: string; icon: React.ComponentType<{ className?: string }> }[] = [ { key: "forgot", label: "Forgot Email / Password", icon: KeyRound }, { key: "refund", label: "Refund or Replacement", icon: CreditCard }, { key: "order", label: "Purchase or Order Issue", icon: ShoppingCart }, { key: "creds", label: "Login Credentials Not Received", icon: KeyRound }, { key: "tracking", label: "Tracking ID Problem", icon: Hash }, { key: "other", label: "Other Issue", icon: HelpCircle }, ] const handleIssueClick = (key: string) => { const issue = issueOptions.find((o) => o.key === key) setSelectedIssue(issue?.label ?? null) if (key === "refund") { router.push("/support/refund") } else if (key === "forgot") { router.push("/support/forgot-access") } else if (key === "order") { router.push("/support/purchase-options") } else if (key === "tracking") { router.push("/support/tracking-options") } else { toast.info("This flow will be available soon. For refunds, choose Refund or Replacement.") } } function onScreenshotSelect(files: FileList | null) { if (!files || files.length === 0) return const file = files[0] if (!file.type.startsWith("image/")) return setScreenshotFile(file) const url = URL.createObjectURL(file) setScreenshotPreview((prev) => { if (prev) URL.revokeObjectURL(prev) return url }) } function onRefundPaste(e: React.ClipboardEvent<HTMLDivElement | HTMLFormElement>) { const items = e.clipboardData?.items if (!items) return for (const item of items) { if (item.type.startsWith("image/")) { const file = item.getAsFile() if (file) { setScreenshotFile(file) const url = URL.createObjectURL(file) setScreenshotPreview((prev) => { if (prev) URL.revokeObjectURL(prev) return url }) break } } } } const filteredIssues = issueOptions.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())) return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> <Toaster position="top-right" /> {/ Back to Home Button /} <button onClick={() => router.push("/")} className="fixed top-4 left-4 z-50 flex items-center gap-2 text-slate-400 hover:text-slate-200 transition" title="Back to Home" > <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> </svg> <span className="text-sm">Home</span> </button> <section className="relative min-h-[600px] flex flex-col items-center justify-center px-4 pt-12 pb-20 overflow-hidden" style={{ backgroundImage: `url('/images/support-hero.avif')`, backgroundSize: "cover", backgroundPosition: "center", backgroundAttachment: "fixed", }} > <div className="absolute inset-0 bg-black/60" /> <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#121212]/30 to-[#121212]" /> <div className="relative z-10 text-center max-w-3xl mx-auto"> <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-slate-100 via-blue-200 to-slate-100 bg-clip-text text-transparent mb-6"> Wizard Games Support </h1> <p className="text-slate-300 text-xl mb-12">How can we help you today?</p> <div className="relative mx-auto max-w-2xl"> <div className="relative group"> <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-500 rounded-full opacity-0 group-hover:opacity-100 blur transition duration-300" /> <div className="relative bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 rounded-full px-6 py-4 flex items-center gap-3 hover:border-blue-500/50 transition"> <svg className="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> <input type="text" placeholder="Search for help topics..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="flex-1 bg-transparent text-slate-100 placeholder-slate-500 outline-none text-lg" /> </div> </div> </div> </div> </section> {/ Browse Help Categories Section /} <section className="bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f] px-4 py-16"> <div className="max-w-6xl mx-auto"> <h2 className="text-center text-2xl md:text-3xl font-bold text-slate-100 mb-12">Browse Help Categories</h2> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-16"> {filteredIssues.length > 0 ? ( filteredIssues.map(({ key, label, icon: Icon }) => ( <button key={key} type="button" onClick={() => handleIssueClick(key)} className="group relative overflow-hidden rounded-2xl transition-all duration-300 hover:-translate-y-1" > <div className="absolute inset-0 bg-gradient-to-r from-blue-500/50 via-cyan-500/30 to-blue-500/50 opacity-0 group-hover:opacity-100 blur-xl transition duration-300 pointer-events-none" /> <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none" /> <div className="relative bg-gradient-to-br from-slate-800/60 to-slate-900/40 backdrop-blur-sm border border-slate-700/40 group-hover:border-cyan-400/60 rounded-2xl p-8 text-center transition-all duration-300 flex flex-col items-center gap-4 hover:shadow-lg hover:shadow-cyan-500/20"> <div className="h-16 w-16 rounded-xl bg-white border border-white/40 flex items-center justify-center shadow-lg shadow-white/20 group-hover:shadow-xl group-hover:shadow-white/30 transition-all"> <Icon className="h-8 w-8 text-slate-900" /> </div> {/ Only show title, no subtitle /} <h3 className="text-lg font-semibold text-slate-100 group-hover:text-slate-50 transition"> {label} </h3> </div> </button> )) ) : ( <div className="col-span-full text-center py-12"> <p className="text-slate-400 text-lg">No results found for "{searchQuery}"</p> </div> )} </div> </div> </section> {/ Refund Form Section /} {/ Removed inline refund form section as per update /} <main className="container mx-auto px-4 sm:px-6 py-12"> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <TabsList className="grid w-full grid-cols-2 bg-slate-800/40 border border-slate-700/30 rounded-lg p-1 mb-12"> <TabsTrigger value="latest" className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-blue-500 data-[state=active]:to-cyan-500 data-[state=active]:text-white rounded transition-all" > <Calendar className="w-4 h-4 mr-2" /> <span className="hidden sm:inline">Latest Updates</span> </TabsTrigger> <TabsTrigger value="accounts" className="data-[state=active]:bg-gradient-to-r data-[state=active]:from-blue-500 data-[state=active]:to-cyan-500 data-[state=active]:text-white rounded transition-all" > <Users className="w-4 h-4 mr-2" /> <span className="hidden sm:inline">Accounts</span> </TabsTrigger> </TabsList> {/ Latest Updates Tab /} <TabsContent value="latest" className="space-y-8"> <div className="text-center mb-12"> <h2 className="text-4xl font-bold bg-gradient-to-r from-slate-100 to-slate-400 bg-clip-text text-transparent mb-4"> Latest Gaming News </h2> <p className="text-slate-400 max-w-2xl mx-auto text-lg"> Stay up to date with the latest game releases, updates, and platform announcements. </p> </div> {/ Featured Article /} <Card className="bg-gradient-to-br from-slate-800/40 to-slate-900/40 border-slate-700/30 overflow-hidden hover:border-blue-400/30 transition-all duration-300"> <div className="md:flex"> <div className="md:w-1/2 relative overflow-hidden"> <img src={newsArticles[0].image || "/placeholder.svg?height=300&width=600&query=news-featured-image"} alt={newsArticles[0].title} className="w-full h-64 md:h-full object-cover hover:scale-105 transition-transform duration-500" /> <div className="absolute inset-0 bg-gradient-to-r from-slate-950 to-transparent" /> </div> <div className="md:w-1/2 p-8 flex flex-col justify-center"> <Badge className="bg-blue-500/80 text-white w-fit mb-4 font-medium">{newsArticles[0].category}</Badge> <h3 className="text-3xl font-bold text-slate-100 mb-4">{newsArticles[0].title}</h3> <p className="text-slate-300 mb-6 text-lg leading-relaxed">{newsArticles[0].excerpt}</p> <div className="flex items-center gap-6 text-sm text-slate-400 mb-6"> <span className="flex items-center gap-2"> <Calendar className="w-4 h-4 text-blue-400" /> {new Date(newsArticles[0].date).toLocaleDateString()} </span> <span className="flex items-center gap-2"> <Clock className="w-4 h-4 text-blue-400" /> {newsArticles[0].readTime} </span> </div> <Button className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-semibold w-fit"> Read Full Article <ExternalLink className="w-4 h-4 ml-2" /> </Button> </div> </div> </Card> {/ News Grid /} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {newsArticles.slice(1).map((article) => ( <Card key={article.id} className="bg-gradient-to-br from-slate-800/40 to-slate-900/40 border-slate-700/30 hover:border-blue-400/30 transition-all duration-300 overflow-hidden group" > <div className="aspect-video relative overflow-hidden"> <img src={article.image || "/placeholder.svg?height=300&width=600&query=news-card-image"} alt={article.title} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /> <div className="absolute inset-0 bg-gradient-to-t from-slate-950 to-transparent" /> <Badge className="absolute top-3 left-3 bg-blue-500/80 text-white">{article.category}</Badge> </div> <CardContent className="p-6"> <h3 className="text-lg font-bold text-slate-100 mb-3 line-clamp-2">{article.title}</h3> <p className="text-slate-400 text-sm mb-4 line-clamp-2">{article.excerpt}</p> <div className="flex items-center gap-4 text-xs text-slate-500 mb-4"> <span className="flex items-center gap-1"> <Calendar className="w-3 h-3" /> {new Date(article.date).toLocaleDateString()} </span> <span>{article.readTime}</span> </div> <Button size="sm" className="w-full bg-slate-700/50 hover:bg-slate-600/50 text-slate-100 border border-slate-600/30 transition-colors" > Read More </Button> </CardContent> </Card> ))} </div> </TabsContent> {/ Accounts Tab /} <TabsContent value="accounts" className="space-y-8"> <div className="text-center mb-12"> <h2 className="text-4xl font-bold bg-gradient-to-r from-slate-100 to-slate-400 bg-clip-text text-transparent mb-4"> Account Management </h2> <p className="text-slate-400 text-lg">Add or track gaming accounts from publishers</p> </div> {/ Track Account Card /} <Card className="bg-gradient-to-br from-slate-800/40 to-slate-900/40 border-slate-700/30"> <CardHeader className="border-b border-slate-700/30"> <CardTitle className="text-slate-100">Track Your Request</CardTitle> <CardDescription className="text-slate-400"> Enter your Tracking ID to view status and credentials </CardDescription> </CardHeader> <CardContent className="pt-6 space-y-4"> <div className="flex flex-col sm:flex-row gap-3"> <Input placeholder="Enter your Tracking ID (e.g., WZ-12345)" value={trackIdInput} onChange={(e) => setTrackIdInput(e.target.value)} className="bg-slate-900/50 border border-slate-700/50 text-slate-100 flex-1 rounded-lg focus-visible:ring-2 focus-visible:ring-blue-400/50 placeholder:text-slate-600" onKeyDown={(e) => { if (e.key === "Enter") handleTrackLookup() }} /> <Button onClick={handleTrackLookup} disabled={trackLoading} className="bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white font-semibold" > {trackLoading ? "Loading..." : "Search"} </Button> </div> {trackError && ( <div className="bg-red-500/10 border border-red-400/30 rounded-lg p-4"> <p className="text-red-300 text-sm">{trackError}</p> </div> )} {trackedSubmission && ( <div className="rounded-lg border border-blue-400/30 bg-blue-500/5 p-4 space-y-4"> <div className="flex items-center justify-between"> <div className="text-sm text-slate-300"> <div className="flex items-center gap-2"> <span className="text-slate-500">Tracking ID:</span> <code className="bg-slate-900/50 px-2.5 py-1 rounded text-blue-300 font-mono text-xs"> {trackedSubmission.tracking_id || "—"} </code> </div> </div> <Badge className="bg-green-500/80 text-white"> {(trackedSubmission.status || "pending").toUpperCase()} </Badge> </div> </div> )} </CardContent> </Card> {/ Publisher Accounts Grid /} <div> <h3 className="text-xl font-bold text-slate-100 mb-6">Add Account Credentials</h3> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"> {[ { provider: "rockstar" as const, name: "Rockstar", color: "from-red-500 to-orange-500", icon: "🎮" }, { provider: "ea" as const, name: "EA / Origin", color: "from-blue-600 to-blue-400", icon: "⚡" }, { provider: "ubisoft" as const, name: "Ubisoft", color: "from-indigo-500 to-purple-500", icon: "🔐" }, ].map(({ provider, name, color, icon }) => ( <button key={provider} onClick={() => openProviderPage(provider)} className="group relative overflow-hidden rounded-xl bg-gradient-to-br from-slate-800/40 to-slate-900/40 border border-slate-700/30 p-6 text-left transition-all duration-300 hover:border-blue-400/50 hover:shadow-lg hover:shadow-blue-500/10 focus:outline-none focus:ring-2 focus:ring-blue-400/50" > <div className={`absolute inset-0 bg-gradient-to-br ${color} opacity-0 group-hover:opacity-5 transition-opacity`} /> <div className="relative flex items-center gap-4"> <div className={`h-14 w-14 rounded-xl bg-gradient-to-br ${color} flex items-center justify-center text-2xl shadow-lg`} > {icon} </div> <div> <p className="text-slate-100 font-bold group-hover:text-white transition-colors">{name}</p> <p className="text-xs text-slate-500">Add credentials</p> </div> </div> </button> ))} </div> </div> {/ Your Credentials /} <Card className="bg-gradient-to-br from-slate-800/40 to-slate-900/40 border-slate-700/30"> <CardHeader className="border-b border-slate-700/30"> <CardTitle className="text-slate-100">Your Submitted Credentials</CardTitle> <CardDescription className="text-slate-400">Credentials appear here once approved</CardDescription> </CardHeader> <CardContent className="pt-6"> {mySubs.length === 0 ? ( <p className="text-slate-500 text-sm">No submissions yet</p> ) : ( <div className="space-y-4"> {mySubs.map((s) => ( <div key={s.id} className="rounded-lg border border-slate-700/30 bg-slate-900/30 p-4 space-y-3 hover:border-blue-400/30 transition" > <div className="flex items-center justify-between"> <span className="text-slate-200 font-semibold">{providerLabel(s.provider)}</span> <Badge className={s.status === "completed" ? "bg-green-500/80" : "bg-yellow-500/80"}> {s.status.toUpperCase()} </Badge> </div> {s.status === "completed" && ( <div className="grid sm:grid-cols-2 gap-3"> <div className="bg-slate-900/50 border border-blue-400/20 rounded p-3"> <p className="text-xs text-slate-500 mb-1">Account ID</p> <p className="text-slate-100 font-mono text-sm break-all">{s.account_id}</p> </div> <div className="bg-slate-900/50 border border-blue-400/20 rounded p-3"> <p className="text-xs text-slate-500 mb-1">Password</p> <p className="text-slate-100 font-mono text-sm break-all">{s.account_password}</p> </div> </div> )} </div> ))} </div> )} </CardContent> </Card> </TabsContent> </Tabs> </main> {/ Footer /} <footer className="border-t border-slate-700/30 bg-slate-950/80 backdrop-blur-xl mt-16"> <div className="container mx-auto px-4 sm:px-6 py-12"> <div className="text-center text-slate-400"> <p className="text-sm mb-4"> © {new Date().getFullYear()} Wizard Games Store. Your trusted gaming destination. </p> </div> </div> </footer> </div> ) } [V0_FILE]typescriptreact:file="app/support/tracking/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toast } from "sonner" import { Loader2, ArrowLeft } from "lucide-react" import { supportTicketService } from "@/lib/supabase" function getOrCreateGuestTempId(): string { try { const key = "wg_guest_support_temp_id" const existing = localStorage.getItem(key) if (existing) return existing const id = typeof crypto !== "undefined" && "randomUUID" in crypto ? (crypto.randomUUID() as string) : `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` localStorage.setItem(key, id) return id } catch { return `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` } } export default function TrackingIssueSubmitPage() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const [tempId, setTempId] = useState<string | null>(null) const [formData, setFormData] = useState({ username: "", email: "", trackingId: "", message: "", }) useEffect(() => { const id = getOrCreateGuestTempId() setTempId(id) }, []) const handleSubmit = async () => { if (!formData.username.trim()) { toast.error("Please enter your username") return } if (!formData.email.trim()) { toast.error("Please enter your email") return } if (!formData.trackingId.trim()) { toast.error("Please enter your tracking ID") return } if (!formData.message.trim()) { toast.error("Please describe your issue") return } setIsSubmitting(true) try { await supportTicketService.createTicket({ name: formData.username.trim(), priority: "Tracking Issue", message: `Email: ${formData.email.trim()}\nTracking ID: ${formData.trackingId.trim()}\n\n${formData.message.trim()}`, tempId: tempId || undefined, }) toast.success("Your issue has been submitted successfully!") setTimeout(() => { router.push("/support") }, 1000) } catch (err) { console.error("Issue submission error:", err) toast.error("Failed to submit your issue. Please try again.") } finally { setIsSubmitting(false) } } return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> <div className="max-w-3xl mx-auto px-4 py-16"> <button onClick={() => router.push("/support")} className="flex items-center gap-2 text-gray-400 hover:text-white mb-8 transition" > <ArrowLeft className="w-4 h-4" /> Back to Support </button> <div className="bg-white rounded-lg p-8 shadow-lg"> <h2 className="text-2xl font-bold text-gray-900 mb-2">Tracking ID Problem</h2> <p className="text-gray-600 mb-8">Report an issue with your tracking or order ID</p> <div className="space-y-6"> {/ Username Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Username <span className="text-red-500"></span> </label> <Input type="text" value={formData.username} onChange={(e) => setFormData((prev) => ({ ...prev, username: e.target.value }))} placeholder="Your username" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Email Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Email Address <span className="text-red-500"></span> </label> <Input type="email" value={formData.email} onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))} placeholder="your.email@example.com" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Tracking ID Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Tracking ID <span className="text-red-500"></span> </label> <Input type="text" value={formData.trackingId} onChange={(e) => setFormData((prev) => ({ ...prev, trackingId: e.target.value }))} placeholder="Your order or tracking ID" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Message Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Describe Your Issue <span className="text-red-500"></span> </label> <textarea value={formData.message} onChange={(e) => setFormData((prev) => ({ ...prev, message: e.target.value }))} placeholder="Please describe your issue in detail..." className="bg-white border border-gray-300 text-gray-900 rounded-lg p-3 w-full h-40 resize-none focus:outline-none focus:border-blue-500 focus:ring-blue-500 transition" /> </div> {/* Button Group /} <div className="flex gap-3 pt-4"> <Button onClick={() => router.push("/support")} className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-900 font-medium rounded-lg" > Back </Button> <Button onClick={handleSubmit} disabled={isSubmitting} className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-6 rounded-lg transition-all" > {isSubmitting ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Submitting... </> ) : ( "Submit Your Issue" )} </Button> </div> </div> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="app/support/tracking-options/page.tsx" isMerged="true" "use client" import React from "react" import { useRouter } from "next/navigation" import { useSearchParams } from "next/navigation" import { Suspense } from "react" import { ChevronLeft, ArrowRight, Search, AlertCircle, Clock, HelpCircle } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import Loading from "./loading" interface TrackingOption { title: string description: string icon: React.ReactNode route: string } export default function TrackingOptionsPage() { const router = useRouter() const searchParams = useSearchParams(); const options: TrackingOption[] = [ { title: "Order Not Found", description: "Can't find your order in the system", icon: <Search className="w-5 h-5" />, route: "/support/tracking-submit?type=order-not-found", }, { title: "Tracking Not Updating", description: "Tracking status stuck or not progressing", icon: <Clock className="w-5 h-5" />, route: "/support/tracking-submit?type=tracking-not-updating", }, { title: "Wrong Tracking ID", description: "Received incorrect or mismatched tracking ID", icon: <AlertCircle className="w-5 h-5" />, route: "/support/tracking-submit?type=wrong-tracking-id", }, { title: "Order Delayed", description: "Order taking longer than expected", icon: <HelpCircle className="w-5 h-5" />, route: "/support/tracking-submit?type=order-delayed", }, ] return ( <Suspense fallback={<Loading />}> <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> {/ Header Section /} <div className="relative py-8 sm:py-12 px-4 lg:px-0"> <div className="max-w-2xl mx-auto"> {/ Back Button /} <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4 mr-2" /> Back </Button> {/ Title and Subtitle /} <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">Tracking ID Problem</h1> <p className="text-gray-400 text-base sm:text-lg">What's the issue with your tracking?</p> </div> </div> {/ Options List Section /} <div className="max-w-2xl mx-auto px-4 lg:px-0 py-8"> <div className="space-y-6"> {options.map((option, index) => ( <Link key={index} href={option.route} className="block"> <div className="group relative bg-white rounded-lg p-4 sm:p-5 cursor-pointer transition-all duration-200 ease-out transform hover:scale-[1.01] hover:shadow-lg shadow-md"> {/ Content /} <div className="relative flex items-center justify-between gap-4"> {/ Left Side - Icon and Text /} <div className="flex items-start gap-4 flex-1 min-w-0"> {/ Icon /} <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 group-hover:bg-blue-600 flex items-center justify-center text-gray-700 group-hover:text-white transition-all duration-200"> {option.icon} </div> {/ Text /} <div className="flex-1 min-w-0"> <h3 className="text-gray-900 font-semibold text-base sm:text-lg truncate group-hover:text-blue-600 transition-colors duration-200"> {option.title} </h3> <p className="text-gray-600 text-sm sm:text-base truncate group-hover:text-gray-700 transition-colors duration-200"> {option.description} </p> </div> </div> {/ Right Side - Arrow Icon /} <div className="flex-shrink-0 text-gray-400 group-hover:text-blue-600 transition-all duration-200 transform group-hover:translate-x-1"> <ArrowRight className="w-5 h-5" /> </div> </div> </div> </Link> ))} </div> {/ Help Text /} <div className="mt-8 p-4 sm:p-5 bg-white rounded-lg shadow-md"> <p className="text-gray-700 text-sm sm:text-base"> Need more help?{" "} <Link href="/support" className="text-blue-600 hover:text-blue-700 transition-colors font-medium"> Go to main support page </Link> </p> </div> </div> </div> </Suspense> ) } [V0_FILE]typescriptreact:file="app/support/tracking-submit/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toast } from "sonner" import { Loader2, ArrowLeft } from "lucide-react" import { supportTicketService } from "@/lib/supabase" import { Suspense } from "react" import Loading from "./loading" function getOrCreateGuestTempId(): string { try { const key = "wg_guest_support_temp_id" const existing = localStorage.getItem(key) if (existing) return existing const id = typeof crypto !== "undefined" && "randomUUID" in crypto ? (crypto.randomUUID() as string) : `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` localStorage.setItem(key, id) return id } catch { return `guest_${Math.random().toString(36).slice(2)}_${Date.now()}` } } const trackingTypeLabels: Record<string, string> = { "order-not-found": "Order Not Found", "tracking-not-updating": "Tracking Not Updating", "wrong-tracking-id": "Wrong Tracking ID", "order-delayed": "Order Delayed", } function TrackingSubmitContent() { const router = useRouter() const searchParams = useSearchParams() const trackingType = searchParams.get("type") || "general" const typeLabel = trackingTypeLabels[trackingType] || "Tracking Issue" const [isSubmitting, setIsSubmitting] = useState(false) const [tempId, setTempId] = useState<string | null>(null) const [formData, setFormData] = useState({ username: "", email: "", trackingId: "", message: "", }) useEffect(() => { const id = getOrCreateGuestTempId() setTempId(id) }, []) const handleSubmit = async () => { if (!formData.username.trim()) { toast.error("Please enter your username") return } if (!formData.email.trim()) { toast.error("Please enter your email") return } if (!formData.trackingId.trim()) { toast.error("Please enter your tracking ID") return } if (!formData.message.trim()) { toast.error("Please describe your issue") return } setIsSubmitting(true) try { await supportTicketService.createTicket({ name: formData.username.trim(), priority: `Tracking - ${typeLabel}`, message: `Email: ${formData.email.trim()}\nTracking ID: ${formData.trackingId.trim()}\n\n${formData.message.trim()}`, tempId: tempId || undefined, }) toast.success("Your issue has been submitted successfully!") setTimeout(() => { router.push("/support") }, 1000) } catch (err) { console.error("Issue submission error:", err) toast.error("Failed to submit your issue. Please try again.") } finally { setIsSubmitting(false) } } return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> <div className="max-w-3xl mx-auto px-4 py-16"> <button onClick={() => router.back()} className="flex items-center gap-2 text-gray-400 hover:text-white mb-8 transition" > <ArrowLeft className="w-4 h-4" /> Back </button> <div className="bg-white rounded-lg p-8 shadow-lg"> <h2 className="text-2xl font-bold text-gray-900 mb-1">Submit Your Issue</h2> <p className="text-gray-600 mb-8"> Issue Type: <span className="font-semibold text-gray-900">{typeLabel}</span> </p> <div className="space-y-6"> {/ Username Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Username <span className="text-red-500"></span> </label> <Input type="text" value={formData.username} onChange={(e) => setFormData((prev) => ({ ...prev, username: e.target.value }))} placeholder="Your username" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Email Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Email Address <span className="text-red-500"></span> </label> <Input type="email" value={formData.email} onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))} placeholder="your.email@example.com" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Tracking ID Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Tracking ID <span className="text-red-500"></span> </label> <Input type="text" value={formData.trackingId} onChange={(e) => setFormData((prev) => ({ ...prev, trackingId: e.target.value }))} placeholder="Your order or tracking ID" className="bg-white border border-gray-300 text-gray-900 rounded-lg focus:border-blue-500 focus:ring-blue-500" /> </div> {/* Message Field /} <div> <label className="block text-sm font-medium text-gray-900 mb-2"> Describe Your Issue <span className="text-red-500"></span> </label> <textarea value={formData.message} onChange={(e) => setFormData((prev) => ({ ...prev, message: e.target.value }))} placeholder="Please describe your issue in detail..." className="bg-white border border-gray-300 text-gray-900 rounded-lg p-3 w-full h-40 resize-none focus:outline-none focus:border-blue-500 focus:ring-blue-500 transition" /> </div> {/* Button Group /} <div className="flex gap-3 pt-4"> <Button onClick={() => router.back()} className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-900 font-medium rounded-lg" > Back </Button> <Button onClick={handleSubmit} disabled={isSubmitting} className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-6 rounded-lg transition-all" > {isSubmitting ? ( <> <Loader2 className="w-4 h-4 mr-2 animate-spin" /> Submitting... </> ) : ( "Submit Your Issue" )} </Button> </div> </div> </div> </div> </div> ) } export default function TrackingSubmitPage() { return ( <Suspense fallback={<Loading />}> <TrackingSubmitContent /> </Suspense> ) } [V0_FILE]typescriptreact:file="app/support/tracking-submit/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/support/tracking-options/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/support/purchase-options/page.tsx" isMerged="true" "use client" import React from "react" import { useRouter } from "next/navigation" import { ChevronLeft, ArrowRight, Package, CreditCard, Truck, RotateCcw } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" interface IssueRow { title: string description: string icon: React.ReactNode route: string } export default function PurchaseIssuesPage() { const router = useRouter() const issues: IssueRow[] = [ { title: "Tracking ID Problem", description: "Order not found, tracking not working", icon: <Package className="w-5 h-5" />, route: "/support/tracking-options", }, { title: "Payment Issue", description: "Payment deducted, pending or failed", icon: <CreditCard className="w-5 h-5" />, route: "/support/submit?type=payment", }, { title: "Game Not Received", description: "Order completed but game missing", icon: <Truck className="w-5 h-5" />, route: "/support/submit?type=game-not-received", }, { title: "Refund Request", description: "Refund eligibility or status", icon: <RotateCcw className="w-5 h-5" />, route: "/support/submit?type=refund", }, ] return ( <div className="min-h-screen bg-gradient-to-b from-[#1a1a1a] via-[#121212] to-[#0f0f0f]"> {/ Header Section /} <div className="relative py-8 sm:py-12 px-4 lg:px-0"> <div className="max-w-2xl mx-auto"> {/ Back Button /} <Button variant="ghost" size="sm" onClick={() => router.back()} className="mb-4 text-gray-400 hover:text-white" > <ChevronLeft className="w-4 h-4 mr-2" /> Back </Button> {/ Title and Subtitle /} <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">Purchase & Order Issues</h1> <p className="text-gray-400 text-base sm:text-lg">Select the issue you're experiencing</p> </div> </div> {/ Issue List Section /} <div className="max-w-2xl mx-auto px-4 lg:px-0 py-8"> <div className="space-y-6"> {issues.map((issue, index) => ( <Link key={index} href={issue.route} className="block"> <div className="group relative bg-white rounded-lg p-4 sm:p-5 cursor-pointer transition-all duration-200 ease-out transform hover:scale-[1.01] hover:shadow-lg shadow-md"> {/ Content /} <div className="relative flex items-center justify-between gap-4"> {/ Left Side - Icon and Text /} <div className="flex items-start gap-4 flex-1 min-w-0"> {/ Icon /} <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-gray-100 group-hover:bg-blue-600 flex items-center justify-center text-gray-700 group-hover:text-white transition-all duration-200"> {issue.icon} </div> {/ Text /} <div className="flex-1 min-w-0"> <h3 className="text-gray-900 font-semibold text-base sm:text-lg truncate group-hover:text-blue-600 transition-colors duration-200"> {issue.title} </h3> <p className="text-gray-600 text-sm sm:text-base truncate group-hover:text-gray-700 transition-colors duration-200"> {issue.description} </p> </div> </div> {/ Right Side - Arrow Icon /} <div className="flex-shrink-0 text-gray-400 group-hover:text-blue-600 transition-all duration-200 transform group-hover:translate-x-1"> <ArrowRight className="w-5 h-5" /> </div> </div> </div> </Link> ))} </div> {/ Help Text */} <div className="mt-8 p-4 sm:p-5 bg-white rounded-lg shadow-md"> <p className="text-gray-700 text-sm sm:text-base"> Can't find your issue?{" "} <Link href="/support" className="text-blue-600 hover:text-blue-700 transition-colors font-medium"> Go to main support page </Link> </p> </div> </div> </div> ) } [V0_FILE]typescriptreact:file="components/auth-modal.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { X, Eye, EyeOff, Mail, Lock, User, Loader2 } from "lucide-react" import { toast } from "sonner" import { supabase, userService } from "@/lib/supabase" interface AuthModalProps { isOpen: boolean onClose: () => void onSuccess: () => void defaultMode?: "login" | "register" } export function AuthModal({ isOpen, onClose, onSuccess, defaultMode = "login" }: AuthModalProps) { const [activeTab, setActiveTab] = useState(defaultMode) const [showPassword, setShowPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) // Login form state const [loginEmail, setLoginEmail] = useState("") const [loginPassword, setLoginPassword] = useState("") // Register form state const [registerEmail, setRegisterEmail] = useState("") const [registerPassword, setRegisterPassword] = useState("") const [registerConfirmPassword, setRegisterConfirmPassword] = useState("") const [registerName, setRegisterName] = useState("") if (!isOpen) return null const handleLogin = async (e: React.FormEvent) => { e.preventDefault() if (!loginEmail || !loginPassword) { toast.error("Please fill in all fields") return } setIsLoading(true) try { console.log("Attempting login with:", loginEmail) const { data, error } = await supabase.auth.signInWithPassword({ email: loginEmail.toLowerCase().trim(), password: loginPassword, }) if (error) { console.error("Login error:", error) toast.error(error.message || "Login failed") return } if (data.user) { console.log("Login successful:", data.user.id) await userService.trackUserLogin(data.user.id, data.user.email || loginEmail) toast.success("Successfully logged in!") onSuccess() handleClose() } } catch (error) { console.error("Login error:", error) toast.error("An unexpected error occurred") } finally { setIsLoading(false) } } const handleRegister = async (e: React.FormEvent) => { e.preventDefault() if (!registerEmail || !registerPassword || !registerConfirmPassword || !registerName) { toast.error("Please fill in all fields") return } if (registerPassword !== registerConfirmPassword) { toast.error("Passwords do not match") return } if (registerPassword.length < 6) { toast.error("Password must be at least 6 characters long") return } setIsLoading(true) try { console.log("Attempting registration with:", registerEmail) const { data, error } = await supabase.auth.signUp({ email: registerEmail.toLowerCase().trim(), password: registerPassword, options: { data: { full_name: registerName, }, }, }) if (error) { console.error("Registration error:", error) toast.error(error.message || "Registration failed") return } if (data.user) { console.log("Registration successful:", data.user.id) // Check if user is immediately confirmed (no email confirmation required) if (data.session) { await userService.trackUserLogin(data.user.id, data.user.email || registerEmail) toast.success("Account created and logged in successfully!") onSuccess() handleClose() } else { // If email confirmation is required, try to sign in immediately console.log("Attempting auto-login after registration...") const { data: loginData, error: loginError } = await supabase.auth.signInWithPassword({ email: registerEmail.toLowerCase().trim(), password: registerPassword, }) if (loginData.session && !loginError) { await userService.trackUserLogin(data.user.id, data.user.email || registerEmail) toast.success("Account created and logged in successfully!") onSuccess() handleClose() } else { toast.success("Account created successfully! You can now log in.") setActiveTab("login") setLoginEmail(registerEmail) setLoginPassword("") } } } } catch (error) { console.error("Registration error:", error) toast.error("An unexpected error occurred") } finally { setIsLoading(false) } } const handleClose = () => { setLoginEmail("") setLoginPassword("") setRegisterEmail("") setRegisterPassword("") setRegisterConfirmPassword("") setRegisterName("") setShowPassword(false) setIsLoading(false) onClose() } return ( <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <Card className="w-full max-w-md bg-gray-900 border-gray-700"> <CardHeader className="relative"> <Button variant="ghost" size="sm" onClick={handleClose} className="absolute right-2 top-2 text-gray-400 hover:text-white" > <X className="w-4 h-4" /> </Button> <CardTitle className="text-white text-center">Welcome to WG Store</CardTitle> <CardDescription className="text-gray-400 text-center"> Access your game library and manage your purchases </CardDescription> </CardHeader> <CardContent> <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full"> <TabsList className="grid w-full grid-cols-2 bg-gray-800"> <TabsTrigger value="login" className="data-[state=active]:bg-gray-700 text-white"> Login </TabsTrigger> <TabsTrigger value="register" className="data-[state=active]:bg-gray-700 text-white"> Register </TabsTrigger> </TabsList> <TabsContent value="login" className="space-y-4 mt-6"> <form onSubmit={handleLogin} className="space-y-4"> <div className="space-y-2"> <Label htmlFor="login-email" className="text-white"> Gmail </Label> <div className="relative"> <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="login-email" type="email" placeholder="Enter your Gmail address" value={loginEmail} onChange={(e) => setLoginEmail(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10" disabled={isLoading} required /> </div> </div> <div className="space-y-2"> <Label htmlFor="login-password" className="text-white"> Password </Label> <div className="relative"> <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="login-password" type={showPassword ? "text" : "password"} placeholder="Enter your password" value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10 pr-10" disabled={isLoading} required /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> </div> </div> <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700" disabled={isLoading}> {isLoading ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Logging in... </> ) : ( "Login" )} </Button> </form> </TabsContent> <TabsContent value="register" className="space-y-4 mt-6"> <form onSubmit={handleRegister} className="space-y-4"> <div className="space-y-2"> <Label htmlFor="register-name" className="text-white"> Full Name </Label> <div className="relative"> <User className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="register-name" type="text" placeholder="Enter your full name" value={registerName} onChange={(e) => setRegisterName(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10" disabled={isLoading} required /> </div> </div> <div className="space-y-2"> <Label htmlFor="register-email" className="text-white"> Gmail </Label> <div className="relative"> <Mail className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="register-email" type="email" placeholder="Enter your Gmail address" value={registerEmail} onChange={(e) => setRegisterEmail(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10" disabled={isLoading} required /> </div> </div> <div className="space-y-2"> <Label htmlFor="register-password" className="text-white"> Password </Label> <div className="relative"> <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="register-password" type={showPassword ? "text" : "password"} placeholder="Create a password" value={registerPassword} onChange={(e) => setRegisterPassword(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10 pr-10" disabled={isLoading} required minLength={6} /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => setShowPassword(!showPassword)} > {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />} </Button> </div> </div> <div className="space-y-2"> <Label htmlFor="register-confirm-password" className="text-white"> Confirm Password </Label> <div className="relative"> <Lock className="absolute left-3 top-3 h-4 w-4 text-gray-400" /> <Input id="register-confirm-password" type={showPassword ? "text" : "password"} placeholder="Confirm your password" value={registerConfirmPassword} onChange={(e) => setRegisterConfirmPassword(e.target.value)} className="bg-gray-800 border-gray-600 text-white pl-10" disabled={isLoading} required /> </div> </div> <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={isLoading}> {isLoading ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Creating Account... </> ) : ( "Create Account" )} </Button> </form> </TabsContent> </Tabs> <div className="mt-6 text-center"> <p className="text-gray-400 text-sm">By continuing, you agree to our Terms of Service and Privacy Policy</p> </div> </CardContent> </Card> </div> ) } [V0_FILE]typescript:file="app/actions/auth.ts" isMerged="true" "use server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Tracks user login/registration activity in the database. * Inserts a record into the user_logins table with timestamp. */ export async function trackUserLoginAction(userId: string, email: string) { const cookieStore = await cookies() // Initialize Supabase server client with service role for administrative actions const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) }, }, }, ) try { // Insert login record with current timestamp const { error } = await supabase.from("user_logins").insert([ { user_id: userId, email: email.toLowerCase(), }, ]) if (error) { console.error("[v0] Failed to insert user login record:", error) return { success: false, error } } return { success: true } } catch (error) { console.error("[v0] trackUserLoginAction error:", error) return { success: false, error } } } [V0_FILE]sql:file="scripts/add-admin-rls-to-user-logins.sql" isMerged="true" -- Add admin-only policy to user_logins table -- This allows admins to view all user login records via the admin panel -- First, check if the policy exists and drop it if it does DROP POLICY IF EXISTS "Admins can view all user logins" ON user_logins; -- Create policy to allow admins (identified via user_metadata) to view all login records CREATE POLICY "Admins can view all user logins" ON user_logins FOR SELECT TO authenticated USING ( (auth.jwt() ->> 'user_metadata') IS NOT NULL AND ((auth.jwt() -> 'user_metadata' ->> 'is_admin')::boolean = true OR (auth.jwt() -> 'user_metadata' ->> 'role' = 'admin')) ) WITH CHECK (true); -- Also ensure service role can still manage all records (this should already exist) -- but we'll keep it explicit for clarity COMMIT; [V0_FILE]typescript:file="app/actions/admin-tracking.ts" isMerged="true" "use server" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" /** * Fetch all tracked user logins using service role. * This bypasses RLS to allow admins to see all user login data. * Called from the admin panel for real-time user activity tracking. */ export async function getAllUserLoginsAsAdmin() { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Ignore errors in cookies during server-side operations } }, }, }, ) try { const { data, error } = await supabase .from("user_logins") .select("user_id, email, logged_at") .order("logged_at", { ascending: false }) if (error) { console.error("[v0] Error fetching tracked user logins:", error) return [] } // Group by email to get unique users with first and last login times const userMap = new Map< string, { user_id: string email: string first_login: string last_login: string login_count: number } >() for (const login of data || []) { const existing = userMap.get(login.email) if (!existing) { userMap.set(login.email, { user_id: login.user_id, email: login.email, first_login: login.logged_at, last_login: login.logged_at, login_count: 1, }) } else { // Update last_login to the most recent if (new Date(login.logged_at) > new Date(existing.last_login)) { existing.last_login = login.logged_at } // Update first_login to the earliest if (new Date(login.logged_at) < new Date(existing.first_login)) { existing.first_login = login.logged_at } existing.login_count++ } } // Convert map to array and sort by last login (most recent first) const uniqueUsers = Array.from(userMap.values()).sort( (a, b) => new Date(b.last_login).getTime() - new Date(a.last_login).getTime(), ) console.log("[v0] Fetched tracked user logins (admin):", uniqueUsers.length) return uniqueUsers } catch (error) { console.error("[v0] Exception fetching tracked user logins:", error) return [] } } [V0_FILE]markdown:file="REAL_TIME_LOGIN_TRACKING.md" isMerged="true" # Real-Time Login Tracking Implementation ## Overview This document describes the complete real-time login tracking system that enables admins to see user login activity instantly in the Admin Panel without any page refresh. ## Architecture ### 1. Login Tracking Triggers Files Modified: - `/app/page.tsx` - Added auth state change listener - `/app/actions/auth.ts` - Existing server action for backup tracking How it works: - When a user signs in, signs up, or refreshes their session, the `onAuthStateChange` listener triggers - The listener calls `userService.trackUserLogin()` to insert a record into the `user_logins` table - This happens CLIENT-SIDE in the home page, ensuring it fires for all auth events Events tracked: - `SIGNED_IN` - User logs in - `SIGNED_UP` - User registers - `REFRESH_SESSION` - Session refresh (detects inactive users coming back) Code: \`\`\`typescript supabase.auth.onAuthStateChange(async (event, session) => { if ((event === "SIGNED_IN" || event === "SIGNED_UP" || event === "REFRESH_SESSION") && session?.user) { const result = await userService.trackUserLogin(session.user.id, session.user.email || "") console.log("[v0] User login tracked successfully") } }) \`\`\` ### 2. Database Insertion File: `/lib/supabase.ts` - `userService.trackUserLogin()` - Uses the browser client (anon key) - Inserts into `user_logins` table with: - `user_id`: User's Supabase ID - `email`: User's email (lowercased for consistency) - `logged_at`: Auto-generated timestamp (database default) Row Level Security: - Authenticated users can insert their own login records - Service role can access all records (for admin queries) ### 3. Admin Data Fetching (Server-Side) New File: `/app/actions/admin-tracking.ts` - `getAllUserLoginsAsAdmin()` - Server action that uses service role credentials - Bypasses RLS to fetch ALL user login records - Groups logins by email to calculate: - `first_login`: Earliest login timestamp - `last_login`: Most recent login timestamp - `login_count`: Total number of logins - Sorted by most recent login first Key advantage: Server-side ensures service role key is never exposed to the client. ### 4. Real-Time Admin Panel Updates File: `/components/users-management-panel.tsx` Real-time subscription: \`\`\`typescript const subscription = supabase .channel("user-logins-realtime") .on( "postgres_changes", { event: "INSERT", schema: "public", table: "user_logins" }, (payload) => { console.log("[v0] New login detected:", payload.new) fetchUsers() // Refetch users instantly } ) .subscribe() \`\`\` What happens: 1. When any user logs in, a record is inserted into `user_logins` 2. Supabase Realtime detects the INSERT event 3. The subscription callback fires 4. The admin panel calls `fetchUsers()` without requiring manual refresh 5. Users appear instantly in the admin dashboard ### 5. Data Flow Diagram \`\`\` User Logs In ↓ [Home Page] onAuthStateChange fires ↓ Calls userService.trackUserLogin() ↓ Inserts into user_logins table ✓ ↓ Supabase Realtime detects INSERT ↓ [Admin Panel] subscription callback fires ↓ Calls getAllUserLoginsAsAdmin() server action ↓ Service role queries ALL logins from user_logins ↓ Groups by email, calculates stats ↓ Admin Panel updates with new user ✓ (NO PAGE REFRESH) \`\`\` ## Files Changed ### Created Files: 1. `/app/actions/admin-tracking.ts` - Server action for admin queries 2. `/REAL_TIME_LOGIN_TRACKING.md` - This documentation 3. `/scripts/add-admin-rls-to-user-logins.sql` - Optional admin RLS policy ### Modified Files: 1. `/app/page.tsx` - Added `userService` import - Added login tracking to auth state change listener - Tracks: SIGNED_IN, SIGNED_UP, REFRESH_SESSION events 2. `/components/users-management-panel.tsx` - Replaced `userService.getAllTrackedUserLogins()` with `getAllUserLoginsAsAdmin()` - Added Supabase Realtime subscription to `user_logins` table - Auto-refetch on new logins (no manual refresh needed) ### Existing Files (Already Set Up): - `/lib/supabase.ts` - Contains `userService.trackUserLogin()` and `userService.getAllTrackedUserLogins()` - `/scripts/create-user-logins-table.sql` - Table schema with RLS policies - `/app/actions/auth.ts` - Backup tracking on auth page ## RLS Policies On `user_logins` table: \`\`\`sql -- Service role can manage all records CREATE POLICY "Service role can manage user_logins" ON user_logins FOR ALL TO service_role USING (true) WITH CHECK (true); -- Users can insert their own login records CREATE POLICY "Users can insert their own login records" ON user_logins FOR INSERT TO authenticated WITH CHECK (auth.uid() = user_id); -- Users can view their own login records CREATE POLICY "Users can view their own login records" ON user_logins FOR SELECT TO authenticated USING (auth.uid() = user_id); \`\`\` Why this works: - Client-side inserts (from page.tsx) use user's authenticated session → `user_id` matches → INSERT allowed - Admin queries use server action with service role → all RLS bypassed → full data access ## Testing the System ### Test Case 1: Single User Login 1. Open admin panel 2. Open auth page in another tab 3. Log in with a new user 4. ✓ User should appear INSTANTLY in admin panel (no refresh) ### Test Case 2: Multiple Rapid Logins 1. Open admin panel 2. Log in with User A 3. Without refreshing admin panel, log in with User B (different tab) 4. ✓ Both users appear within ~1 second ### Test Case 3: Global Real-Time (Cross-Browser) 1. User logs in on mobile app 2. ✓ Appears on desktop admin panel in real-time ### Debug Info Check browser console for: - `[v0] Auth state changed: SIGNED_IN user@example.com` - Login triggered - `[v0] User login tracked successfully` - Database insert successful - `[v0] Subscription status: SUBSCRIBED` - Real-time listening active - `[v0] New login detected:` - Real-time event received - `[v0] Loaded tracked user logins (admin): X` - Data loaded ## Performance Considerations - Efficient grouping: Client-side grouping only when admin panel loads - Realtime optimized: Only listens for INSERT events on user_logins - No polling: Uses Supabase Realtime instead of periodic refetch - Service role: Server-side queries prevent exposing sensitive data ## Security - ✓ Service role key never exposed to client - ✓ RLS prevents users from seeing other users' login records (via client) - ✓ Admin only data accessible via authenticated server actions - ✓ All inputs validated and sanitized ## Future Enhancements - Add admin role verification before serving user data - Add pagination for large user datasets - Track login source (web, mobile, etc.) - Track geographic location from IP - Set up alerts for suspicious login patterns [V0_FILE]typescript:file="app/actions/admin-library.ts" isMerged="true" "use server" import { cookies } from "next/headers" import { createServerClient } from "@supabase/ssr" interface UserLibraryGame { id: string game_id: string game_title: string game_image: string purchase_date: string status: string game_price?: number game_description?: string } /** * Fetch a user's complete library with game details * Admin-only action using service role key */ export async function getUserLibraryAsAdmin(userId: string): Promise<UserLibraryGame[]> { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Cookie setting can fail in some contexts, ignore } }, }, }, ) try { // Fetch library entries with game data const { data: libraryItems, error } = await supabase .from("library") .select( ` id, game_id, game_title, game_image, purchase_date, status, user_id `, ) .eq("user_id", userId) .order("purchase_date", { ascending: false }) if (error) { console.error("[v0] Error fetching library:", error) throw new Error(`Failed to fetch library: ${error.message}`) } // Fetch game details to supplement library data const gameIds = libraryItems?.map((item) => item.game_id) || [] if (gameIds.length === 0) { return [] } const { data: games, error: gamesError } = await supabase .from("games") .select("id, title, description, price, image") .in("id", gameIds) if (gamesError) { console.error("[v0] Error fetching game details:", gamesError) // Return library items without full game details return (libraryItems || []).map((item) => ({ id: item.id, game_id: item.game_id, game_title: item.game_title, game_image: item.game_image, purchase_date: item.purchase_date, status: item.status, })) } // Map games to a lookup object const gameMap = (games || []).reduce( (acc, game) => { acc[game.id] = game return acc }, {} as Record<string, any>, ) // Combine library items with game details const enrichedLibrary: UserLibraryGame[] = (libraryItems || []).map((item) => { const game = gameMap[item.game_id] return { id: item.id, game_id: item.game_id, game_title: item.game_title, game_image: item.game_image, purchase_date: item.purchase_date, status: item.status, game_price: game?.price, game_description: game?.description, } }) return enrichedLibrary } catch (error) { console.error("[v0] getUserLibraryAsAdmin error:", error) throw error } } /** * Remove a game from a user's library (admin action) / export async function removeGameFromUserLibraryAsAdmin( userId: string, libraryId: string, ): Promise<{ success: boolean; error?: string }> { const cookieStore = await cookies() const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Cookie setting can fail in some contexts, ignore } }, }, }, ) try { // Verify the library item belongs to this user const { data: item, error: fetchError } = await supabase .from("library") .select("user_id") .eq("id", libraryId) .single() if (fetchError || !item || item.user_id !== userId) { return { success: false, error: "Library item not found or does not belong to this user" } } // Delete the library item const { error: deleteError } = await supabase.from("library").delete().eq("id", libraryId) if (deleteError) { return { success: false, error: deleteError.message } } return { success: true } } catch (error: any) { console.error("[v0] removeGameFromUserLibraryAsAdmin error:", error) return { success: false, error: error.message } } } [V0_FILE]typescriptreact:file="components/user-library-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Spinner } from "@/components/ui/spinner" import { getUserLibraryAsAdmin, removeGameFromUserLibraryAsAdmin } from "@/app/actions/admin-library" import { Trash2, Package, AlertCircle } from "lucide-react" import { useToast } from "@/hooks/use-toast" import Image from "next/image" import { formatDate } from "@/utils/date-utils" interface UserLibraryGame { id: string game_id: string game_title: string game_image: string purchase_date: string status: string game_price?: number game_description?: string } interface UserLibraryModalProps { userId: string userEmail: string open: boolean onOpenChange: (open: boolean) => void } export function UserLibraryModal({ userId, userEmail, open, onOpenChange }: UserLibraryModalProps) { const [games, setGames] = useState<UserLibraryGame[]>([]) const [loading, setLoading] = useState(false) const [removing, setRemoving] = useState<string | null>(null) const { toast } = useToast() useEffect(() => { if (open) { loadLibrary() } }, [open]) async function loadLibrary() { setLoading(true) try { const library = await getUserLibraryAsAdmin(userId) setGames(library) } catch (error) { console.error("[v0] Error loading library:", error) toast({ title: "Error", description: "Failed to load user library", variant: "destructive", }) } finally { setLoading(false) } } async function handleRemoveGame(libraryId: string, gameTitle: string) { if (!confirm(`Remove "${gameTitle}" from ${userEmail}'s library?`)) { return } setRemoving(libraryId) try { const result = await removeGameFromUserLibraryAsAdmin(userId, libraryId) if (result.success) { setGames((prev) => prev.filter((game) => game.id !== libraryId)) toast({ title: "Success", description: `Removed "${gameTitle}" from library`, }) } else { toast({ title: "Error", description: result.error || "Failed to remove game", variant: "destructive", }) } } catch (error) { console.error("[v0] Error removing game:", error) toast({ title: "Error", description: "Failed to remove game", variant: "destructive", }) } finally { setRemoving(null) } } return ( <Dialog open={open} onOpenChange={onOpenChange}> <DialogContent className="max-w-4xl bg-gray-800 border-gray-700 text-white max-h-[90vh] overflow-hidden flex flex-col"> <DialogHeader> <DialogTitle className="text-xl"> Game Library - <span className="text-blue-400">{userEmail}</span> </DialogTitle> <p className="text-sm text-gray-400 mt-2">{games.length} game(s) in library</p> </DialogHeader> {loading ? ( <div className="flex items-center justify-center py-12"> <Spinner className="h-8 w-8" /> </div> ) : games.length === 0 ? ( <div className="flex flex-col items-center justify-center py-12 text-gray-400"> <Package className="h-12 w-12 mb-3 opacity-50" /> <p>No games in library</p> </div> ) : ( <ScrollArea className="flex-1"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4"> {games.map((game) => ( <Card key={game.id} className="bg-gray-700 border-gray-600 overflow-hidden hover:border-gray-500 transition-colors" > {/ Game Image /} {game.game_image ? ( <div className="relative h-40 w-full bg-gray-600"> <Image src={game.game_image || "/placeholder.svg"} alt={game.game_title} fill className="object-cover" onError={(e) => { const img = e.target as HTMLImageElement img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect fill='%23374151' width='100' height='100'/%3E%3C/svg%3E" }} /> </div> ) : ( <div className="h-40 w-full bg-gray-600 flex items-center justify-center"> <Package className="h-8 w-8 text-gray-500" /> </div> )} {/ Game Info /} <div className="p-3"> <h3 className="font-semibold text-white truncate mb-1">{game.game_title}</h3> {/ Status Badge /} <div className="mb-2"> <Badge variant="secondary" className={ game.status === "active" ? "bg-green-900 text-green-300" : game.status === "refunded" ? "bg-red-900 text-red-300" : "bg-gray-600 text-gray-300" } > {game.status} </Badge> </div> {/ Purchase Date /} <p className="text-xs text-gray-400 mb-2">Purchased: {formatDate(game.purchase_date)}</p> {/ Price /} {game.game_price && ( <p className="text-sm font-semibold text-yellow-400 mb-3">₹{game.game_price}</p> )} {/ Remove Button /} <Button variant="destructive" size="sm" className="w-full" disabled={removing === game.id} onClick={() => handleRemoveGame(game.id, game.game_title)} > <Trash2 className="h-4 w-4 mr-2" /> {removing === game.id ? "Removing..." : "Remove"} </Button> </div> </Card> ))} </div> </ScrollArea> )} {/ Footer Info /} {games.length > 0 && ( <div className="border-t border-gray-700 p-4 bg-gray-700/50 flex items-center gap-2 text-sm text-yellow-300"> <AlertCircle className="h-4 w-4" /> <span>Removing a game from library is permanent and affects their account immediately</span> </div> )} </DialogContent> </Dialog> ) } [V0_FILE]markdown:file="ADMIN_USER_LIBRARY_FEATURE.md" isMerged="true" # Admin User Library Feature ## Overview Admins can now click a "Library" button in the Users Management panel to view and manage a specific user's game library, similar to Steam/Epic admin panels. ## Implementation Details ### 1. Server Action: `/app/actions/admin-library.ts` - `getUserLibraryAsAdmin(userId)` - Fetches a user's complete library with game details - Uses service role key for secure server-side access - Queries `library` table filtered by user_id - Joins with `games` table to fetch game details (title, price, image, description) - Returns enriched game data with purchase dates and status - Returns empty array if user has no games - `removeGameFromUserLibraryAsAdmin(userId, libraryId)` - Admin action to remove a game - Verifies library item belongs to the user - Safely removes game from library - Admin-only operation with service role ### 2. Component: `/components/user-library-modal.tsx` Modal displays: - User email in header - Grid view of games (responsive: 1 col mobile, 2 cols tablet, 3 cols desktop) - For each game: - Game cover image with fallback - Game title - Purchase status badge (active/refunded/other) - Purchase date - Price in Rupees (₹) - "Remove" button with confirmation dialog - Loading state with spinner - Empty state if no games - Warning footer about permanent removal Styling: - Dark theme matching admin panel (gray-800 backgrounds) - Blue accent colors for interactive elements - Responsive grid layout - Scrollable content area - Proper error handling and user feedback ### 3. Updated: `/components/users-management-panel.tsx` - Added "Library" action button to user rows - Opens UserLibraryModal with user ID and email - Manages library modal state (`showLibrary`, `libraryUserId`, `libraryUserEmail`) - Table now has 6 columns (added "Actions") - Imported BookOpen icon for library button ## Security ✅ No exposure of service role key to client - All library queries run server-side in server actions - Service role is only used on server (`SUPABASE_SERVICE_ROLE_KEY`) - Client only calls typed functions with specific user IDs ✅ RLS still active for user-facing library - Admin-specific queries use service role to bypass RLS - Regular user library views still protected by RLS ✅ Admin verification can be added - Optional: Add admin role check in server actions - Use Auth.uid() to verify admin status ## Database Tables Used - `library` (user_id, game_id, game_title, game_image, purchase_date, status) - `games` (id, title, description, price, image) - `auth.users` (for user_id references) ## User Flow 1. Open Admin Panel → Users tab 2. View list of users with login data 3. Click "Library" button on any user row 4. Modal opens showing their games 5. Can: - View game cover, title, purchase date, price, status - Remove games with confirmation (permanent) 6. Close modal to return to users list ## Future Enhancements (Optional) - Add "Order Details" button to link to specific order - Batch remove games for multiple users - Filter games by status (active/refunded) - Admin notes per library item - Restore from trash/deleted games - Re-add games to user library ## Technical Notes - Uses `getUserLibraryAsAdmin()` which requires `SUPABASE_SERVICE_ROLE_KEY` env var - Fallback to anon key if service role not available (less secure, should use service role) - Images have fallback to placeholder SVG if URL fails - Proper loading/error states and user feedback with toast notifications - Debounced library modal to prevent concurrent requests [V0_FILE]typescriptreact:file="app/track-order/page.tsx" isMerged="true" "use client" import { useEffect, useState, Suspense, useRef } from "react" import { useSearchParams } from "next/navigation" import type { OrderType } from "@/lib/supabase" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Label } from "@/components/ui/label" import { Toaster } from "sonner" import { toast } from "sonner" // Declare the toast variable import Link from "next/link" // Import Link component for navigation import { Search, Package, Clock, CheckCircle, XCircle, Copy, Gift, CreditCard, Key, Eye, EyeOff, Calendar, ImageIcon, MessageSquare, Check, Send, ArrowLeft, User, BookOpen, } from "lucide-react" import { supabase, codeRequestService, libraryService } from "@/lib/supabase" import { X } from "lucide-react" // Import X component import { getOrderByTrackingIdAction } from "@/app/actions/order" function TrackOrderContent() { const searchParams = useSearchParams() const [trackingId, setTrackingId] = useState("") const [order, setOrder] = useState<OrderType | null>(null) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const [showPasswords, setShowPasswords] = useState<Record<number | string, boolean>>({}) // Modified to handle string keys const [showSteamCode, setShowSteamCode] = useState(false) const [copiedField, setCopiedField] = useState<string | null>(null) const [isRequestingCode, setIsRequestingCode] = useState(false) const [isAddingToLibrary, setIsAddingToLibrary] = useState(false) const [addedGames, setAddedGames] = useState<Set<string>>(new Set()) const [user, setUser] = useState<any>(null) const hasAutoSearched = useRef(false) const [showPassword, setShowPassword] = useState(false) const [showCode, setShowCode] = useState(false) const copyToClipboard = async (text: string, fieldName: string) => { try { await navigator.clipboard.writeText(text) setCopiedField(fieldName) toast.success(`${fieldName} copied successfully!`) setTimeout(() => setCopiedField(null), 2000) } catch (err) { console.error("Failed to copy:", err) toast.error(`Failed to copy ${fieldName}`) } } const togglePasswordVisibility = (index: number) => { setShowPasswords((prev) => ({ ...prev, [index]: !prev[index], })) } const handleRequestCode = async () => { if (!order) return setIsRequestingCode(true) toast.info("Requesting Steam code...") try { // Assuming you have a function in your orderService or a new service to handle this await codeRequestService.requestSteamCode(order.tracking_id, order.id) toast.success("Steam code request submitted. Please check back later or refresh.") } catch (err) { console.error("Error requesting Steam code:", err) toast.error("Failed to request Steam code. Please try again later.") } finally { setIsRequestingCode(false) } } const handleRequestPlatformCode = async () => { if (!order) return setIsRequestingCode(true) toast.info(`Requesting ${order.delivery_platform} code...`) try { // Assuming you have a function in your codeRequestService to handle this await codeRequestService.requestPlatformCode(order.tracking_id, order.delivery_platform) toast.success(`${order.delivery_platform} code request submitted. Please check back later or refresh.`) } catch (err) { console.error(`Error requesting ${order.delivery_platform} code:`, err) toast.error(`Failed to request ${order.delivery_platform} code. Please try again later.`) } finally { setIsRequestingCode(false) } } useEffect(() => { const getUser = async () => { const { data: { user }, } = await supabase.auth.getUser() setUser(user) } getUser() const trackingParam = searchParams?.get("tracking") if (trackingParam && !hasAutoSearched.current) { hasAutoSearched.current = true setTrackingId(trackingParam) handleSearch(trackingParam) } }, []) // Remove searchParams from dependency array to prevent infinite loop const handleSearch = async (searchId?: string) => { const searchTrackingId = searchId || trackingId.trim() if (!searchTrackingId) { setError("Please enter a tracking ID") return } setLoading(true) setError("") setOrder(null) try { console.log("[v0] Searching for tracking ID:", searchTrackingId) const result = await getOrderByTrackingIdAction(searchTrackingId) if (result.success && result.data) { console.log("[v0] Found order:", result.data) setOrder(result.data as OrderType) toast.success("Order found!") } else { setError("Order not found. Please check your tracking ID and try again.") } } catch (err) { console.error("[v0] Search error:", err) setError("An unexpected error occurred. Please try again.") } finally { setLoading(false) } } const handleRefresh = async () => { if (!order) return setLoading(true) try { const result = await getOrderByTrackingIdAction(order.tracking_id) if (result.success && result.data) { setOrder(result.data as OrderType) toast.success("Order refreshed successfully!") } else { toast.error("Could not refresh order") } } catch (error) { console.error("[v0] Refresh error:", error) toast.error("Failed to refresh order") } finally { setLoading(false) } } const handleSingleGameAddToLibrary = async (item: any) => { if (!user) { toast.error("Please log in to add games to your library") return } setIsAddingToLibrary(true) try { const exists = await libraryService.checkGameInLibrary(user.id, item.id || item.game_id || "1") if (exists) { setAddedGames((prev) => new Set(prev).add(item.id || item.game_id || "1")) toast.info(`${item.title} is already in your library`) return } await libraryService.addToLibrary( user.id, item.id || item.game_id || "1", item.title || "Game", item.image || null, item.steam_username, item.steam_password, ) setAddedGames((prev) => new Set(prev).add(item.id || item.game_id || "1")) toast.success(`${item.title} added to your library successfully!`) } catch (error: any) { console.error("Error adding to library:", error) toast.error(`Failed to add ${item.title} to library`) } finally { setIsAddingToLibrary(false) } } const handleAddToLibrary = async () => { console.log("[v0] Add to Library clicked") console.log("[v0] Order:", order) console.log("[v0] User:", user) // Step 1: Verify user is authenticated if (!user) { toast.error("Please log in to add games to your library") return } // Step 2: Verify order exists if (!order) { toast.error("Order not found") return } if (!order.items || order.items.length === 0) { toast.error("No games found in this order") return } // Step 3: Get approved games with credentials const approvedGames = order.items.filter( (item: any) => (item.approval_status?.toLowerCase() === "approved" || item.status?.toLowerCase() === "approved") && item.steam_username, ) console.log("[v0] Approved games found:", approvedGames.length) if (approvedGames.length === 0) { toast.error("No approved games with credentials available") return } setIsAddingToLibrary(true) let successCount = 0 let failureCount = 0 try { // Step 4: Add each approved game to library using user.id for (const item of approvedGames) { try { const gameId = item.id || item.game_id || "1" const gameTitle = item.title || "Game" const gameImage = item.image || null // Check if already in library const exists = await libraryService.checkGameInLibrary(user.id, gameId) if (exists) { console.log("[v0] Game already in library:", gameTitle) setAddedGames((prev) => new Set(prev).add(gameId)) failureCount++ continue } // Add to library using user.id (NOT email) await libraryService.addToLibrary( user.id, // MUST use user.id from auth, not email gameId, gameTitle, gameImage, item.steam_username, item.steam_password, ) setAddedGames((prev) => new Set(prev).add(gameId)) successCount++ console.log("[v0] Game added to library:", gameTitle, "for user:", user.id) } catch (itemError: any) { console.error("[v0] Error adding game:", itemError) failureCount++ } } // Step 5: Show result message if (successCount > 0) { toast.success(`${successCount} game(s) added to your library successfully!`) } if (failureCount > 0 && successCount === 0) { toast.error("Failed to add games to library. Please try again.") } else if (failureCount > 0) { toast.warning(`${failureCount} game(s) could not be added (may already be in library)`) } } catch (error: any) { console.error("[v0] Error adding to library:", error) toast.error("Failed to add games to library. Please try again.") } finally { setIsAddingToLibrary(false) } } const getStatusColor = (status: string) => { switch (status.toLowerCase()) { case "pending": return "bg-yellow-600" case "approved": return "bg-green-600" case "completed": return "bg-blue-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getStatusIcon = (status: string) => { switch (status.toLowerCase()) { case "pending": return <Clock className="w-4 h-4" /> case "approved": return <CheckCircle className="w-4 h-4" /> case "completed": return <Key className="w-4 h-4" /> case "rejected": return <XCircle className="w-4 h-4" /> default: return <Package className="w-4 h-4" /> } } const isFreeOrder = (order: OrderType) => { return order.amount === 0 || order.tracking_id.startsWith("FREE-") } const getStatusMessage = (order: OrderType) => { const isFree = isFreeOrder(order) const status = order.status.toLowerCase() if (isFree) { switch (status) { case "pending": return "Your free game request is being reviewed by our admin team." case "approved": return "Your free game request has been approved and is being processed." case "completed": return "Free Game Delivered - Your Steam code is ready!" case "rejected": return "Your free game request was rejected. Please contact support for details." default: return "Free game request status unknown." } } else { switch (status) { case "pending": return "Payment verification in progress. We'll update you soon." case "approved": return "Payment verified! Your Steam account details are being prepared." case "completed": return "Order Complete - Your Steam account details are ready!" case "rejected": return "Payment verification failed. Please contact support." default: return "Order status unknown." } } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString() } return ( <div className="min-h-screen bg-[#111] overflow-x-hidden"> <Toaster position="top-right" /> {/ Header /} <header className="backdrop-blur-sm sticky top-0 z-50"> <div className="container mx-auto px-4 py-4"> <div className="flex items-center justify-between gap-4"> <div className="flex items-center gap-4"> <Button variant="ghost" onClick={() => (window.location.href = "/")} className="text-gray-400 hover:text-white" > <ArrowLeft className="w-4 h-4 mr-2" /> Back </Button> <h1 className="text-xl font-bold text-white flex items-center gap-2"> <Package className="w-5 h-5 text-blue-400" /> Track Your Order </h1> </div> <Button variant="ghost" size="sm" className="text-gray-300 hover:text-white" onClick={() => (window.location.href = "/library")} > <BookOpen className="w-4 h-4 mr-2" /> Library </Button> </div> </div> </header> <div className="container mx-auto px-4 py-8"> <div className="max-w-4xl mx-auto"> <Card className="bg-gray-900 border-gray-700 mb-8"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-7"> <CardTitle className="text-white flex items-center gap-2"> <Package className="w-5 h-5 text-blue-400" /> Order Tracker </CardTitle> <div className="flex items-center gap-4"> {order && order.items && order.items.length > 0 && order.items.some( (item: any) => item.approval_status?.toLowerCase() === "approved" || item.status?.toLowerCase() === "approved", ) && ( <Button variant="ghost" size="sm" onClick={handleAddToLibrary} disabled={isAddingToLibrary} className="text-blue-400 hover:text-blue-300 hover:bg-blue-900/20" > <BookOpen className="w-4 h-4 mr-2" /> {isAddingToLibrary ? "Adding..." : "Add to Library"} </Button> )} {order && ( <Button variant="link" size="sm" onClick={handleRefresh} disabled={loading} className="text-blue-400 hover:text-blue-300 p-0 h-auto" > Refresh </Button> )} <Button variant="ghost" size="sm" onClick={() => (window.location.href = "/")} className="text-gray-400 hover:text-white p-0 h-auto" > <X className="w-5 h-5" /> </Button> </div> </CardHeader> <CardContent className="space-y-4"> <div className="flex gap-2"> <Input placeholder="Enter tracking ID (e.g., WGS-123456-7890 or FREE-123456-ABCD)" value={trackingId} onChange={(e) => setTrackingId(e.target.value)} className="bg-gray-800 border-gray-700 text-white placeholder-gray-400" onKeyPress={(e) => e.key === "Enter" && handleSearch()} /> <Button onClick={() => handleSearch()} disabled={loading} className="bg-blue-600 hover:bg-blue-700"> <Search className="w-4 h-4 mr-2" /> {loading ? "Searching..." : "Track"} </Button> </div> {error && ( <div className="bg-red-900/50 border border-red-700 rounded-lg p-3"> <p className="text-red-300 text-sm">{error}</p> </div> )} </CardContent> </Card> {/ Order Details /} {order && ( <div className="space-y-6"> <Separator className="bg-gray-700" /> {/ Order Header /} <div className="flex items-start justify-between"> <div> <h3 className="text-lg font-semibold text-white mb-2 flex items-center gap-2"> {isFreeOrder(order) ? ( <> <Gift className="w-5 h-5 text-green-400" /> Free Game Request Status </> ) : ( <> <CreditCard className="w-5 h-5 text-blue-400" /> Order Status </> )} </h3> <div className="flex items-center gap-2 mb-2"> <span className="text-gray-400">Tracking ID:</span> <code className="bg-gray-800 px-2 py-1 rounded text-blue-300 font-mono text-sm"> {order.tracking_id} </code> <Button variant="ghost" size="sm" onClick={() => copyToClipboard(order.tracking_id, "Tracking ID")} className="text-gray-400 hover:text-white p-1 h-auto" > {copiedField === "Tracking ID" ? ( <Check className="w-3 h-3 text-green-500" /> ) : ( <Copy className="w-3 h-3" /> )} </Button> </div> <p className="text-gray-400 text-sm"> {isFreeOrder(order) ? "Requested" : "Ordered"} on {formatDate(order.created_at)} </p> </div> <Badge className={`${getStatusColor(order.status)} text-white flex items-center gap-1`}> {getStatusIcon(order.status)} {order.status.toUpperCase()} </Badge> </div> {/ Game Details /} <div className="bg-gray-800/50 rounded-lg p-4"> <h4 className="font-semibold text-white mb-2 flex items-center gap-2"> {isFreeOrder(order) ? ( <> <Gift className="w-4 h-4 text-green-400" /> Requested Game </> ) : ( <> <Package className="w-4 h-4 text-blue-400" /> Order Items </> )} </h4> {order.items && order.items.length > 0 ? ( <div className="space-y-3"> {order.items.map((item: any, index: number) => { const isApproved = item.approval_status === "approved" || item.status === "approved" const hasCredentials = item.steam_username && item.steam_password const hasSteamCode = item.steam_code return ( <div key={index} className={`p-4 rounded-lg border ${ isApproved ? "bg-green-900/20 border-green-700" : "bg-gray-800/50 border-gray-700" }`} > <div className="flex items-start gap-4"> <img src={item.image || "/placeholder.svg"} alt={item.title} className="w-16 h-16 object-cover rounded" /> <div className="flex-1"> <h5 className="font-semibold text-white">{item.title}</h5> <p className="text-sm text-gray-400">₹{item.price}</p> {item.quantity && item.quantity > 1 && ( <p className="text-xs text-gray-400">Quantity: {item.quantity}</p> )} <div className="mt-2"> {isApproved ? ( <span className="inline-flex items-center gap-1 text-xs text-green-400"> <Check className="w-3 h-3" /> Approved </span> ) : item.approval_status === "rejected" || item.status === "rejected" ? ( <span className="inline-flex items-center gap-1 text-xs text-red-400"> <X className="w-3 h-3" /> Rejected </span> ) : ( <span className="inline-flex items-center gap-1 text-xs text-yellow-400"> <Clock className="w-3 h-3" /> Pending Approval </span> )} </div> </div> </div> {isApproved && (hasCredentials || hasSteamCode) && ( <div className="mt-4 space-y-3 border-t border-gray-700 pt-3"> {hasCredentials && ( <> <div> <Label className="text-green-200 text-sm">Steam Username</Label> <div className="flex items-center gap-2 mt-1"> <Input value={item.steam_username} readOnly className="bg-gray-800 border-gray-600 text-white font-mono text-sm" /> <Button size="sm" variant="ghost" onClick={() => copyToClipboard(item.steam_username, `Username-${index}`)} className="text-gray-400 hover:text-white" > {copiedField === `Username-${index}` ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> <div> <Label className="text-green-200 text-sm">Steam Password</Label> <div className="flex items-center gap-2 mt-1"> <div className="relative flex-1"> <Input type={showPasswords[index] ? "text" : "password"} value={item.steam_password} readOnly className="bg-gray-800 border-gray-600 text-white font-mono pr-10 text-sm" /> <Button type="button" variant="ghost" size="sm" className="absolute right-0 top-0 h-full px-3 text-gray-400 hover:text-white" onClick={() => togglePasswordVisibility(index)} > {showPasswords[index] ? ( <EyeOff className="h-4 w-4" /> ) : ( <Eye className="h-4 w-4" /> )} </Button> </div> <Button size="sm" variant="ghost" onClick={() => copyToClipboard(item.steam_password, `Password-${index}`)} className="text-gray-400 hover:text-white" > {copiedField === `Password-${index}` ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4" /> )} </Button> </div> </div> </> )} {hasSteamCode && ( <div className="mt-3 space-y-2"> <Label htmlFor={`steam-code-${index}`} className="text-emerald-300"> Steam Activation Code </Label> <div className="relative"> <Input id={`steam-code-${index}`} type="text" value={item.steam_code} readOnly className="pr-20 bg-slate-800/50 border-emerald-700 text-emerald-100" /> <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-1"> <Button size="sm" variant="ghost" onClick={() => copyToClipboard(item.steam_code, "Steam Code")} className="h-7 px-2 hover:bg-emerald-700/20" > <Copy className="w-3 h-3 text-emerald-400" /> </Button> </div> </div> </div> )} <div className="text-xs text-gray-400 mt-2"> <span className="text-green-400">Approved:</span>{" "} {new Date(item.approved_at || order.updated_at).toLocaleString()} </div> <div className="text-xs text-green-300 bg-green-900/30 p-2 rounded mt-2"> <strong>Important:</strong> Use these credentials to log into Steam and access your purchased game. Keep these details safe and don't share them with anyone. </div> {(order.status.toLowerCase() === "completed" || order.status.toLowerCase() === "approved") && ( <div className="mt-3"> {addedGames.has(item.id || item.game_id || "1") ? ( <Link href="/library"> <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center gap-2"> <BookOpen className="w-4 h-4" /> View in Library </Button> </Link> ) : ( <Button onClick={() => handleSingleGameAddToLibrary(item)} disabled={isAddingToLibrary} className="w-full bg-green-600 hover:bg-green-700 text-white flex items-center justify-center gap-2" > <BookOpen className="w-4 h-4" /> {isAddingToLibrary ? "Adding..." : "Add to Library"} </Button> )} </div> )} </div> )} {isApproved && !hasCredentials && !hasSteamCode && ( <div className="mt-4 bg-blue-900/20 border border-blue-500 p-3 rounded-lg"> <p className="text-blue-300 text-sm mb-2"> Your game has been approved! Request your Steam code from admin. </p> <Button onClick={handleRequestCode} disabled={isRequestingCode} className="bg-blue-600 hover:bg-blue-700 w-full" size="sm" > <Send className="w-4 h-4 mr-2" /> {isRequestingCode ? "Requesting..." : "Request Steam Code"} </Button> </div> )} </div> ) })} </div> ) : ( <div className="text-center py-4"> <p className="text-gray-400">No items found in this order</p> </div> )} {/ Add to Library button below game items section - shows only when games are approved /} {order.items && order.items.length > 0 && order.items.some( (item: any) => item.approval_status?.toLowerCase() === "approved" || item.status?.toLowerCase() === "approved", ) && ( <div className="flex gap-3 pt-4"> <Button onClick={handleAddToLibrary} disabled={isAddingToLibrary} className="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold flex items-center justify-center gap-2" > <BookOpen className="w-4 h-4" /> {isAddingToLibrary ? "Adding to Library..." : "Add All Games to Library"} </Button> </div> )} </div> {/ Status Message /} <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4"> <p className="text-blue-200">{getStatusMessage(order)}</p> </div> {/ Customer Comments /} {isFreeOrder(order) && (order as any).additional_comments && ( <div className="bg-gray-800/50 rounded-lg p-4"> <h4 className="font-semibold text-white mb-2 flex items-center gap-2"> <MessageSquare className="w-4 h-4 text-blue-400" /> Your Comments </h4> <p className="text-gray-300 text-sm">{(order as any).additional_comments}</p> </div> )} {/ Payment Screenshot /} {!isFreeOrder(order) && order.payment_screenshot && order.status !== "approved" && ( <div className="bg-gray-800/50 rounded-lg p-4"> <h4 className="font-semibold text-white mb-2 flex items-center gap-2"> <ImageIcon className="w-4 h-4 text-purple-400" /> Payment Screenshot </h4> <img src={order.payment_screenshot || "/placeholder.svg"} alt="Payment Screenshot" className="max-w-xs h-auto rounded border border-gray-600" /> </div> )} {/ Platform Account Details and Code Section /} {order.delivery_platform && ( <div className="space-y-4"> {/ Credentials Display /} <div className="bg-purple-900/30 border border-purple-600 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <User className="w-4 h-4 text-purple-400" /> {order.delivery_platform} Account Details </h4> <div className="space-y-3"> <div> <label className="text-purple-300 text-sm">Username / Email</label> <div className="flex items-center gap-2 mt-1"> <Input value={order.delivery_username || ""} readOnly className="bg-gray-800/50 border-purple-600 text-purple-100" /> <Button size="sm" onClick={() => copyToClipboard(order.delivery_username || "", "Username")} className="bg-purple-600 hover:bg-purple-700" > <Copy className="w-4 h-4" /> </Button> </div> </div> <div> <label className="text-purple-300 text-sm">Password</label> <div className="flex items-center gap-2 mt-1"> <Input type={showPassword ? "text" : "password"} value={order.delivery_password || ""} readOnly className="bg-gray-800/50 border-purple-600 text-purple-100" /> <Button size="sm" variant="ghost" onClick={() => setShowPassword(!showPassword)} className="text-purple-400 hover:text-purple-300" > {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" onClick={() => copyToClipboard(order.delivery_password || "", "Password")} className="bg-purple-600 hover:bg-purple-700" > <Copy className="w-4 h-4" /> </Button> </div> </div> <div className="text-xs text-purple-300 bg-purple-900/30 p-2 rounded"> <strong>Important:</strong> Use these credentials to log into {order.delivery_platform} and access your purchase. Keep these details safe and don't share them with anyone. </div> {!order.delivery_code && order.status !== "completed" && ( <Button onClick={handleRequestPlatformCode} disabled={isRequestingCode} className="w-full bg-purple-600 hover:bg-purple-700" > <Send className="w-4 h-4 mr-2" /> {isRequestingCode ? "Requesting..." : `Request ${order.delivery_platform} Code`} </Button> )} </div> </div> {order.delivery_code && ( <div className="bg-orange-900/30 border border-orange-600 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Key className="w-4 h-4 text-orange-400" /> {order.delivery_platform} Activation Code </h4> <div className="space-y-3"> <div className="flex items-center gap-2"> <Input type={showCode ? "text" : "password"} value={order.delivery_code || ""} readOnly className="bg-gray-800/50 border-orange-600 text-orange-100 font-mono" /> <Button size="sm" variant="ghost" onClick={() => setShowCode(!showCode)} className="text-orange-400 hover:text-orange-300" > {showCode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} </Button> <Button size="sm" onClick={() => copyToClipboard(order.delivery_code || "", `${order.delivery_platform} Code`) } className="bg-orange-600 hover:bg-orange-700" > <Copy className="w-4 h-4" /> </Button> </div> <div className="bg-orange-800/30 rounded-lg p-3"> <p className="text-orange-200 text-sm"> <strong>How to redeem:</strong> Use this code to activate your purchase on{" "} {order.delivery_platform}. </p> </div> </div> </div> )} </div> )} {/ Steam Code /} {order.status === "completed" && order.steam_code && ( <div className="bg-blue-900/30 border border-blue-700 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Key className="w-4 h-4 text-blue-400" /> {isFreeOrder(order) ? "Your Free Steam Code" : "Steam Game Code"} </h4> <div className="space-y-4"> <div className="flex items-center justify-between mb-2"> <span className="text-blue-300">Steam Activation Code:</span> <Button size="sm" variant="ghost" onClick={() => setShowSteamCode(!showSteamCode)} className="text-blue-400 hover:text-blue-300" > {showSteamCode ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />} <span className="ml-1">{showSteamCode ? "Hide" : "Show"}</span> </Button> </div> <div className="bg-gray-800 rounded-lg p-4 border border-blue-500"> {showSteamCode ? ( <div className="flex items-center gap-2"> <Input value={order.steam_code} readOnly className="bg-gray-700 border-gray-600 text-green-400 font-mono text-lg" /> <Button size="sm" onClick={() => copyToClipboard(order.steam_code!, "Steam Code")} className="bg-blue-600 hover:bg-blue-700" > {copiedField === "Steam Code" ? ( <> <Check className="w-4 h-4 mr-2" /> Copied! </> ) : ( <> <Copy className="w-4 h-4 mr-2" /> Copy </> )} </Button> </div> ) : ( <div className="text-center py-4"> <p className="text-gray-400 font-mono text-lg tracking-wider"> •••••••••••••••••••••••••••••••• </p> <p className="text-gray-500 text-sm mt-2"> Click "Show" to reveal your Steam activation code </p> </div> )} </div> {showSteamCode && ( <div className="bg-blue-800/30 rounded-lg p-3"> <h5 className="text-blue-300 font-medium mb-2">How to Redeem on Steam:</h5> <ol className="text-blue-200 text-sm space-y-1 list-decimal list-inside"> <li>Open Steam and log into your account</li> <li>Click "Games" in the top menu, then "Activate a Product on Steam"</li> <li>Follow the instructions and enter the code above</li> <li>The game will be added to your Steam library</li> </ol> </div> )} </div> </div> )} {/ Order Timeline /} <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-lg p-4"> <h4 className="font-semibold text-white mb-4 flex items-center gap-2"> <Calendar className="w-4 h-4 text-gray-400" /> Order Timeline </h4> <div className="space-y-3"> <div className="flex items-center gap-3 text-sm"> <div className="w-2 h-2 rounded-full bg-blue-500" /> <span className="text-gray-300"> {isFreeOrder(order) ? "Request submitted" : "Order placed"} - {formatDate(order.created_at)} </span> </div> {order.status !== "pending" && ( <div className="flex items-center gap-3 text-sm"> <div className={`w-2 h-2 rounded-full ${ order.status === "approved" ? "bg-green-500" : order.status === "completed" ? "bg-blue-500" : order.status === "rejected" ? "bg-red-500" : "bg-gray-500" }`} /> <span className="text-gray-300"> Status updated to {order.status} - {formatDate(order.updated_at)} </span> </div> )} {order.status === "completed" && ( <div className="flex items-center gap-3 text-sm"> <div className="w-2 h-2 rounded-full bg-green-500" /> <span className="text-green-300"> {isFreeOrder(order) ? "Free game delivered" : "Order completed"} - Ready for use! </span> </div> )} </div> </div> {/ Contact Support /} <div className="bg-gray-800/30 rounded-lg p-4 text-center"> <p className="text-gray-400 text-sm mb-2"> Need help with your {isFreeOrder(order) ? "request" : "order"}? </p> <Button variant="outline" size="sm" className="border-gray-600 text-gray-300 hover:bg-gray-700 bg-transparent" onClick={() => window.open("https://www.instagram.com/wizardgamesstore/", "_blank")} > Contact Support </Button> </div> </div> )} {/ Empty State /} {!order && !error && trackingId === "" && ( <Card className="bg-gray-900 border-gray-700 text-center"> <CardContent className="p-8"> <Package className="w-12 h-12 text-gray-600 mx-auto mb-4" /> <p className="text-gray-400">Enter your tracking ID above to view your order status</p> </CardContent> </Card> )} </div> </div> </div> ) } export default function TrackOrderPage() { return ( <Suspense fallback={<div>Loading...</div>}> <TrackOrderContent /> </Suspense> ) } [V0_FILE]typescriptreact:file="components/real-time-orders.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" import { Input } from "@/components/ui/input" import { Package, Clock, CheckCircle, XCircle, DollarSign, Calendar, Eye, Key, AlertCircle, RefreshCw, Trash2, MessageSquare, } from "lucide-react" import { orderService, codeRequestService, type Order, type CodeRequest } from "@/lib/supabase" import { OrderDetailsModal } from "./order-details-modal" import { toast } from "sonner" export function RealTimeOrders() { const [orders, setOrders] = useState<Order[]>([]) const [codeRequests, setCodeRequests] = useState<CodeRequest[]>([]) const [selectedOrder, setSelectedOrder] = useState<Order | null>(null) const [isModalOpen, setIsModalOpen] = useState(false) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState<string | null>(null) const [deletingOrderId, setDeletingOrderId] = useState<string | null>(null) const [notificationShown, setNotificationShown] = useState<Set<string>>(new Set()) const [trackingIdSearch, setTrackingIdSearch] = useState("") useEffect(() => { loadOrders() loadCodeRequests() }, []) useEffect(() => { let unsubscribe: (() => void) | null = null const setupSubscription = async () => { try { unsubscribe = codeRequestService.subscribeToCodeRequests((newRequest: CodeRequest) => { if (!notificationShown.has(newRequest.id)) { toast.success(`Code Request: ${newRequest.tracking_id}`, { description: "User has requested game credentials", duration: 5000, }) setNotificationShown((prev) => new Set(prev).add(newRequest.id)) } setCodeRequests((prev) => { const existingIndex = prev.findIndex((r) => r.id === newRequest.id) if (existingIndex >= 0) { const updated = [...prev] updated[existingIndex] = newRequest return updated } else { return [newRequest, ...prev] } }) setOrders((prev) => prev.map((order) => { if (order.tracking_id === newRequest.tracking_id) { return { ...order, code_requested: newRequest.status === "pending", code_request_id: newRequest.id, code_request_status: newRequest.status as any, } } return order }), ) }) } catch (err) { console.error("Error setting up code requests subscription:", err) } } setupSubscription() return () => { if (unsubscribe) { unsubscribe() } } }, [notificationShown]) const loadOrders = async () => { setIsLoading(true) setError(null) try { const fetchedOrders = await orderService.getAllOrders() setOrders(fetchedOrders) console.log("[v0] Orders loaded:", fetchedOrders.length) } catch (error: any) { const errorMsg = error?.message || String(error) if (errorMsg.includes("Failed to fetch")) { console.warn("[v0] Orders fetch failed - network issue, using empty array") setOrders([]) setError(null) // Don't show error for network issues on load return } console.error("[v0] Error loading orders:", error) setError("Failed to load orders") setOrders([]) } finally { setIsLoading(false) } } const loadCodeRequests = async () => { try { const requests = await codeRequestService.getAllCodeRequests() setCodeRequests(requests) setOrders((prev) => prev.map((order) => { const codeRequest = requests.find((r) => r.tracking_id === order.tracking_id) return { ...order, code_requested: codeRequest?.status === "pending", code_request_id: codeRequest?.id, code_request_status: codeRequest?.status as any, } }), ) } catch (error: any) { const errorMsg = error?.message || String(error) if (errorMsg.includes("Failed to fetch")) { console.warn("[v0] Code requests fetch failed - network issue, using empty array") setCodeRequests([]) return } console.error("[v0] Error loading code requests:", error) setCodeRequests([]) } } useEffect(() => { let unsubscribe: (() => void) | null = null const setupSubscription = async () => { try { unsubscribe = orderService.subscribeToOrders((newOrder) => { setOrders((prev) => { const existingIndex = prev.findIndex((order) => order.id === newOrder.id) if (existingIndex >= 0) { const updated = [...prev] updated[existingIndex] = { ...newOrder, code_requested: updated[existingIndex].code_requested, code_request_id: updated[existingIndex].code_request_id, code_request_status: updated[existingIndex].code_request_status, } return updated } else { return [newOrder, ...prev] } }) toast.success(`New order received: ${newOrder.tracking_id}`) }) } catch (err) { console.error("Error setting up subscription:", err) } } setupSubscription() return () => { if (unsubscribe) { unsubscribe() } } }, []) const handleOrderClick = (order: Order) => { setSelectedOrder(order) setIsModalOpen(true) } const handleOrderUpdate = (updatedOrder: Order) => { setOrders((prev) => prev.map((order) => (order.id === updatedOrder.id ? updatedOrder : order))) setSelectedOrder(updatedOrder) } const getStatusColor = (status: string) => { switch (status) { case "pending": return "bg-yellow-600" case "approved": return "bg-green-600" case "completed": return "bg-blue-600" case "rejected": return "bg-red-600" default: return "bg-gray-600" } } const getStatusIcon = (status: string) => { switch (status) { case "pending": return <Clock className="w-4 h-4" /> case "approved": return <CheckCircle className="w-4 h-4" /> case "completed": return <Key className="w-4 h-4" /> case "rejected": return <XCircle className="w-4 h-4" /> default: return <Package className="w-4 h-4" /> } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString() } const getOrderPriority = (order: Order) => { if (order.code_requested) return 0 if (order.status === "pending") return 1 if (order.status === "approved" && !order.steam_code) return 2 if (order.status === "completed") return 3 return 4 } const sortedOrders = [...orders].sort((a, b) => { const priorityDiff = getOrderPriority(a) - getOrderPriority(b) if (priorityDiff !== 0) return priorityDiff return new Date(b.created_at).getTime() - new Date(a.created_at).getTime() }) const filteredOrders = trackingIdSearch.trim() ? sortedOrders.filter((order) => order.tracking_id === trackingIdSearch.trim()) : sortedOrders const handleDeleteOrder = async (e: React.MouseEvent, order: Order) => { e.stopPropagation() if (!confirm(`Are you sure you want to cancel order ${order.tracking_id}? This action cannot be undone.`)) { return } try { setDeletingOrderId(order.id) await orderService.deleteOrder(order.tracking_id) setOrders((prev) => prev.filter((o) => o.id !== order.id)) toast.success(`Order ${order.tracking_id} has been cancelled`) } catch (error) { console.error("Error deleting order:", error) toast.error("Failed to cancel order. Please try again.") } finally { setDeletingOrderId(null) } } return ( <> <Card className="bg-gray-900 border-gray-700"> <div className="flex flex-col h-[calc(100vh-200px)]"> {/ Fixed Header Section /} <CardHeader className="border-b border-gray-700 flex-shrink-0"> <div className="flex items-center justify-between mb-4"> <CardTitle className="text-white flex items-center gap-2"> <Package className="w-5 h-5 text-blue-400" /> Real-Time Orders ({filteredOrders.length}) </CardTitle> <Button variant="outline" size="sm" onClick={loadOrders} disabled={isLoading} className="border-gray-600 text-gray-300 hover:text-white bg-transparent" > <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} /> Refresh </Button> </div> <Input type="text" placeholder="Paste Tracking ID" value={trackingIdSearch} onChange={(e) => setTrackingIdSearch(e.target.value)} className="bg-gray-800 border-gray-700 text-white placeholder-gray-500 focus:border-blue-500" /> </CardHeader> {/ Scrollable Content Section /} <CardContent className="flex-1 overflow-hidden p-0"> {isLoading && orders.length === 0 ? ( <div className="flex flex-col items-center justify-center py-12"> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400 mb-4"></div> <p className="text-gray-400">Loading orders...</p> </div> ) : error && orders.length === 0 ? ( <div className="flex flex-col items-center justify-center py-12 text-center"> <AlertCircle className="w-12 h-12 text-red-400 mb-4" /> <p className="text-red-400 font-semibold mb-2">Failed to Load Orders</p> <p className="text-gray-400 text-sm mb-4">{error}</p> <Button onClick={loadOrders} className="bg-blue-600 hover:bg-blue-700"> Try Again </Button> </div> ) : filteredOrders.length === 0 ? ( <div className="text-center py-8"> <Package className="w-16 h-16 text-gray-600 mx-auto mb-4" /> <p className="text-gray-400"> {trackingIdSearch.trim() ? "No matching orders found" : "No orders yet"} </p> <p className="text-gray-500 text-sm"> {trackingIdSearch.trim() ? "Try a different Tracking ID" : "Orders will appear here in real-time"} </p> </div> ) : ( <ScrollArea className="h-full w-full"> <div className="space-y-3 p-4"> {filteredOrders.map((order) => ( <div key={order.id} className="bg-gray-800 p-4 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors cursor-pointer" onClick={() => handleOrderClick(order)} > <div className="flex items-center justify-between mb-3"> <div className="flex items-center gap-2"> {order.code_requested && ( <Badge className="bg-red-600 text-xs flex items-center gap-1 animate-pulse"> <MessageSquare className="w-3 h-3" /> CODE REQUESTED </Badge> )} <Badge className={`${getStatusColor(order.status)} text-xs flex items-center gap-1`}> {getStatusIcon(order.status)} {order.status.toUpperCase()} </Badge> {order.status === "approved" && !order.steam_code && ( <Badge className="bg-orange-600 text-xs flex items-center gap-1"> <AlertCircle className="w-3 h-3" /> NEEDS CODE </Badge> )} {order.status === "completed" && ( <Badge className="bg-blue-600 text-xs flex items-center gap-1"> <Key className="w-3 h-3" /> CODE SENT </Badge> )} </div> <div className="flex items-center gap-1"> <Button variant="ghost" size="sm" className="text-gray-400 hover:text-white"> <Eye className="w-4 h-4" /> </Button> <Button variant="ghost" size="sm" onClick={(e) => handleDeleteOrder(e, order)} disabled={deletingOrderId === order.id} className="text-gray-400 hover:text-red-400 hover:bg-red-950/20" > {deletingOrderId === order.id ? ( <RefreshCw className="w-4 h-4 animate-spin" /> ) : ( <Trash2 className="w-4 h-4" /> )} </Button> </div> </div> <div className="space-y-2"> <div className="flex items-center justify-between"> <span className="text-white font-mono text-sm">{order.tracking_id}</span> <span className="text-green-400 font-bold flex items-center gap-1"> <DollarSign className="w-4 h-4" />₹{order.amount} </span> </div> <div className="flex items-center gap-4 text-xs text-gray-400"> <div className="flex items-center gap-1"> <Calendar className="w-3 h-3" /> {formatDate(order.created_at)} </div> <div className="flex items-center gap-1"> <Package className="w-3 h-3" /> {order.items?.length || 0} items </div> </div> {order.items && order.items.length > 0 && ( <div className="mt-2"> <div className="text-xs text-gray-400 mb-1">Items:</div> <div className="flex flex-wrap gap-1"> {order.items.slice(0, 2).map((item: any, index: number) => ( <span key={index} className="text-xs bg-gray-600 px-2 py-1 rounded"> {item.title} </span> ))} {order.items.length > 2 && ( <span className="text-xs text-gray-400">+{order.items.length - 2} more</span> )} </div> </div> )} </div> </div> ))} </div> </ScrollArea> )} </CardContent> </div> </Card> {selectedOrder && ( <OrderDetailsModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} order={selectedOrder} onOrderUpdate={handleOrderUpdate} /> )} </> ) } [V0_FILE]typescriptreact:file="components/account-sidebar.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { cn } from "@/lib/utils" import { User, Zap, Heart, Package, Shield, Lock } from "lucide-react" import type { User as SupabaseUser } from "@supabase/supabase-js" interface AccountSidebarProps { activeSection: string onSectionChange: (section: string) => void user: SupabaseUser | null canChangePassword: boolean canChangeEmail: boolean } export function AccountSidebar({ activeSection, onSectionChange, user, canChangePassword, canChangeEmail, }: AccountSidebarProps) { const router = useRouter() const navItems = [ { id: "overview", label: "Account Overview", icon: User }, { id: "orders-snapshot", label: "Orders Snapshot", icon: Package }, { id: "library-summary", label: "Library Summary", icon: Heart }, { id: "tokens", label: "Wizard Tokens", icon: Zap }, { id: "games", label: "My Games", icon: Heart }, { id: "orders", label: "Orders & Tracking", icon: Package }, { id: "security", label: "Password & Security", icon: Shield }, { id: "two-factor", label: "Two-Factor Authentication", icon: Lock }, ] return ( <div className="w-64 bg-transparent border-r border-white/10 overflow-y-auto flex-shrink-0"> <nav className="space-y-2 p-4 sticky top-0"> {navItems.map((item) => { const Icon = item.icon const isActive = activeSection === item.id const isDisabled = (item.id === "security" && !canChangePassword && !canChangeEmail) || false return ( <button key={item.id} onClick={() => onSectionChange(item.id)} className={cn( "w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left transition-all duration-200", isActive ? "bg-gradient-to-r from-gray-600/30 to-gray-700/20 border border-gray-600/50 shadow-lg shadow-gray-600/20 text-white" : "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent", isDisabled && "opacity-50 cursor-not-allowed", )} disabled={isDisabled} > <Icon className={cn("w-5 h-5 flex-shrink-0", isActive && "text-gray-300")} /> <span className={cn("text-sm font-medium", isActive && "font-semibold")}>{item.label}</span> {isActive && <div className="ml-auto w-2 h-2 rounded-full bg-gray-300 shadow-lg shadow-gray-300/50" />} </button> ) })} </nav> </div> ) } [V0_FILE]typescriptreact:file="app/library/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { BookOpen, Search, Eye, EyeOff, Copy, User, Key, Calendar, LogOut, RefreshCw, GamepadIcon, Send, Clock, CheckCircle, Code, Menu, X, ArrowLeft, ShoppingBag } from "lucide-react" import { libraryService, supabase } from "@/lib/supabase" import { libraryCodeRequestService, type LibraryCodeRequest } from "@/lib/supabase" import { toast } from "sonner" import Link from "next/link" import { useRouter } from "next/navigation" interface LibraryGame { id: string game_id: string game_title: string game_image: string | null game_username: string | null game_password: string | null purchase_date: string last_played?: string last_updated?: string last_opened?: string mobileImage?: string | null mobileBanner?: string | null } export default function LibraryPage() { const [games, setGames] = useState<LibraryGame[]>([]) const [selectedGame, setSelectedGame] = useState<LibraryGame | null>(null) const [loading, setLoading] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [user, setUser] = useState<any>(null) const [showPasswords, setShowPasswords] = useState<{ [key: string]: boolean }>({}) const [codeRequests, setCodeRequests] = useState<Record<string, LibraryCodeRequest>>({}) const [isRequestingCode, setIsRequestingCode] = useState(false) const [showGameCode, setShowGameCode] = useState<{ [key: string]: boolean }>({}) const [sidebarOpen, setSidebarOpen] = useState(false) const [filterType, setFilterType] = useState<"all" | "favorites">("all") const [sortBy, setSortBy] = useState< | "recently-added" | "recently-played" | "recently-purchased" | "recently-updated" | "recently-opened" | "alphabetical" >("recently-added") const [viewMode, setViewMode] = useState<"grid" | "compact">("grid") const [favorites, setFavorites] = useState<Set<string>>(new Set()) const [activeMenu, setActiveMenu] = useState<string | null>(null) const [expandedSections, setExpandedSections] = useState<{ credentials: boolean }>({ credentials: true, }) const router = useRouter() useEffect(() => { const handleResize = () => { if (window.innerWidth >= 1024) { setSidebarOpen(false) } } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) useEffect(() => { const checkAuth = async () => { try { console.log("[v0] Library: Checking auth state...") // Try to get current session first (faster) const { data: { session }, } = await supabase.auth.getSession() console.log("[v0] Library: Session check complete, user:", session?.user?.id) if (!session?.user) { console.log("[v0] Library: No session found, redirecting to auth") router.push("/auth?redirect=/library") return } setUser(session.user) await loadLibrary(session.user.id) } catch (error) { console.error("[v0] Library: Error checking auth:", error) // Don't redirect immediately on error, try session-based auth instead try { const { data: { session }, } = await supabase.auth.getSession() if (session?.user) { setUser(session.user) await loadLibrary(session.user.id) } else { router.push("/auth?redirect=/library") } } catch { router.push("/auth?redirect=/library") } } } checkAuth() // Listen for auth changes const { data: { subscription }, } = supabase.auth.onAuthStateChange(async (event, session) => { console.log("[v0] Library: Auth state changed:", event, session?.user?.id) if (!session?.user) { router.push("/auth?redirect=/library") } else { setUser(session.user) await loadLibrary(session.user.id) } }) return () => { subscription.unsubscribe() } }, [router]) useEffect(() => { if (!user?.id) return const loadCodeRequests = async () => { try { const requests = await libraryCodeRequestService.getUserCodeRequests(user.id) const requestsMap = requests.reduce( (acc, request) => ({ ...acc, [request.library_id]: request, }), {}, ) setCodeRequests(requestsMap) } catch (error) { console.error("Error loading code requests:", error) } } loadCodeRequests() const unsubscribe = libraryCodeRequestService.subscribeToCodeRequests(user.id, (request: LibraryCodeRequest) => { setCodeRequests((prev) => ({ ...prev, [request.library_id]: request, })) }) return () => { if (unsubscribe) unsubscribe() } }, [user?.id]) const loadLibrary = async (userId: string) => { if (!userId) { console.error("No user ID provided") setLoading(false) return } try { setLoading(true) console.log("Loading library for user:", userId) const libraryGames = await libraryService.loadLibrary(userId) console.log("Loaded games:", libraryGames) setGames(libraryGames) } catch (error) { console.error("Error loading library:", error) toast.error("Failed to load your library") } finally { setLoading(false) } } const copyToClipboard = async (text: string, label: string) => { try { await navigator.clipboard.writeText(text) toast.success(`${label} copied to clipboard`) } catch { toast.error("Failed to copy to clipboard") } } const togglePasswordVisibility = (gameId: string) => { setShowPasswords((prev) => ({ ...prev, [gameId]: !prev[gameId], })) } const toggleGameCodeVisibility = (gameId: string) => { setShowGameCode((prev) => ({ ...prev, [gameId]: !prev[gameId], })) } const toggleCredentialsSection = () => { setExpandedSections((prev) => ({ ...prev, credentials: !prev.credentials, })) } const handleRemoveGame = async (gameId: string, gameTitle: string) => { if (!user?.id) { toast.error("Please sign in to manage your library") return } try { await libraryService.removeFromLibrary(user.id, gameId) const updatedGames = games.filter((game) => game.game_id !== gameId) setGames(updatedGames) if (selectedGame?.game_id === gameId) { setSelectedGame(updatedGames.length > 0 ? updatedGames[0] : null) } toast.success(`${gameTitle} removed from library`) } catch (error) { console.error("Error removing game:", error) toast.error("Failed to remove game") } } const handleRequestGameCode = async (libraryId: string, gameId: string, gameTitle: string) => { if (!user?.id) { toast.error("Please sign in to request a game code") return } try { setIsRequestingCode(true) const codeRequest = await libraryCodeRequestService.requestGameCode( libraryId, user.id, gameId, gameTitle, user.email || "" ) setCodeRequests((prev) => ({ ...prev, [libraryId]: codeRequest, })) toast.success("Game code request sent to admin") } catch (error) { console.error("Error requesting game code:", error) toast.error("Failed to request game code") } finally { setIsRequestingCode(false) } } const handleLogout = async () => { try { await supabase.auth.signOut() router.push("/") } catch (error) { console.error("Error logging out:", error) toast.error("Failed to logout") } } const toggleFavorite = (gameId: string) => { const newFavorites = new Set(favorites) if (newFavorites.has(gameId)) { newFavorites.delete(gameId) } else { newFavorites.add(gameId) } setFavorites(newFavorites) localStorage.setItem("libraryFavorites", JSON.stringify(Array.from(newFavorites))) } const filteredGames = games .filter((game) => { const matchesSearch = game.game_title.toLowerCase().includes(searchQuery.toLowerCase()) const matchesFilter = filterType === "all" || favorites.has(game.id) return matchesSearch && matchesFilter }) .sort((a, b) => { if (sortBy === "alphabetical") { return a.game_title.localeCompare(b.game_title) } if (sortBy === "recently-added") { return new Date(b.purchase_date).getTime() - new Date(a.purchase_date).getTime() } if (sortBy === "recently-played") { const aPlayed = a.last_played ? new Date(a.last_played).getTime() : 0 const bPlayed = b.last_played ? new Date(b.last_played).getTime() : 0 return bPlayed - aPlayed } if (sortBy === "recently-purchased") { return new Date(b.purchase_date).getTime() - new Date(a.purchase_date).getTime() } if (sortBy === "recently-updated") { const aUpdated = a.last_updated ? new Date(a.last_updated).getTime() : new Date(a.purchase_date).getTime() const bUpdated = b.last_updated ? new Date(b.last_updated).getTime() : new Date(b.purchase_date).getTime() return bUpdated - aUpdated } if (sortBy === "recently-opened") { const aOpened = a.last_opened ? new Date(a.last_opened).getTime() : 0 const bOpened = b.last_opened ? new Date(b.last_opened).getTime() : 0 return bOpened - aOpened } return 0 }) useEffect(() => { const saved = localStorage.getItem("libraryFavorites") if (saved) { try { setFavorites(new Set(JSON.parse(saved))) } catch (e) { console.error("[v0] Error loading favorites:", e) } } }, []) if (loading) { return ( <div className="flex items-center justify-center h-screen bg-[#0b0f14]"> <div className="text-center"> <RefreshCw className="w-12 h-12 text-blue-500 mx-auto animate-spin mb-4" /> <p className="text-gray-400">Loading your library...</p> </div> </div> ) } if (!user) { return ( <div className="min-h-screen bg-[#0b0f14] text-white flex items-center justify-center"> <div className="text-center"> <BookOpen className="w-16 h-16 text-gray-600 mx-auto mb-4" /> <h2 className="text-xl font-semibold text-white mb-2">Access Denied</h2> <p className="text-gray-400 mb-4">Please sign in to view your library</p> <Link href="/auth?redirect=/library"> <Button className="bg-gray-700 hover:bg-gray-600">Go to Auth</Button> </Link> </div> </div> ) } return ( <div className="flex h-screen bg-gradient-[radial-gradient(circle_at_top,#1a1a1a_0%,#0e0e0e_40%,#000000_100%)] text-white overflow-hidden" style={{backgroundImage: 'radial-gradient(circle at top, #1a1a1a 0%, #0e0e0e 40%, #000000 100%)'}}> {/ Left Sidebar /} <div className={`fixed lg:relative z-50 lg:z-auto w-64 h-full bg-gradient-[radial-gradient(circle_at_top,#1a1a1a_0%,#0e0e0e_40%,#000000_100%)] border-r border-[#1a2332] flex flex-col transition-all duration-300 ${ sidebarOpen ? "left-0" : "-left-64 lg:left-0" }`} style={{backgroundImage: 'radial-gradient(circle at top, #1a1a1a 0%, #0e0e0e 40%, #000000 100%)'}} > <div className="p-4 border-b border-[#1a2332]"> <Link href="/" className="flex items-center gap-2 text-xs font-bold text-gray-400 hover:text-white transition-colors group" > <ArrowLeft className="w-4 h-4 transition-transform group-hover:-translate-x-1" /> BACK TO STORE </Link> </div> {/ Header /} <div className="p-4 border-b border-[#1a2332] flex items-center justify-between"> <div className="flex items-center gap-2"> <BookOpen className="w-5 h-5 text-blue-500" /> <h2 className="text-sm font-bold">Library</h2> </div> <Button variant="ghost" size="sm" onClick={handleLogout} title="Logout" className="text-gray-400 hover:text-white p-0 h-8 w-8" > <LogOut className="w-4 h-4" /> </Button> <Button variant="ghost" size="sm" onClick={() => setSidebarOpen(false)} className="text-gray-400 hover:text-white p-0 h-8 w-8 lg:hidden" > <X className="w-4 h-4" /> </Button> </div> <div className="px-3 py-2 border-b border-[#1a2332]"> <Link href="/"> <Button variant="ghost" className="w-full justify-start gap-2 text-gray-400 hover:text-white hover:bg-[#1a2332] h-9 px-3" > <ShoppingBag className="w-4 h-4" /> <span className="text-sm font-medium">Store</span> </Button> </Link> </div> <div className="relative mt-4 px-4"> <Search className="absolute left-7 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> <Input placeholder="Search games..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-10 bg-[#121826] border-[#1a2332] text-white placeholder:text-gray-400 focus:border-blue-500 text-sm" /> </div> {/ User Info /} <div className="p-4 border-b border-[#1a2332] mx-4"> <div className="flex items-center gap-3"> <div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0"> <User className="w-4 h-4" /> </div> <div className="min-w-0"> <p className="text-sm font-medium text-white truncate"> {user?.user_metadata?.display_name || user?.user_metadata?.full_name || user?.email?.split("@")[0] || "User"} </p> <p className="text-xs text-gray-400">{games.length} games</p> </div> </div> </div> {/ Games List /} <ScrollArea className="flex-1"> <div className="p-3"> {filteredGames.length === 0 ? ( <div className="text-center py-8"> <GamepadIcon className="w-12 h-12 text-gray-600 mx-auto mb-3" /> <p className="text-gray-400 text-sm">{searchQuery ? "No games found" : "No games in library"}</p> </div> ) : ( <div className="space-y-2"> {filteredGames.map((game) => ( <div key={game.id} onClick={() => { setSelectedGame(game) setSidebarOpen(false) }} className={`flex items-center gap-3 p-3 rounded cursor-pointer transition-all duration-200 group ${ selectedGame?.id === game.id ? "bg-[#1a3a52] border border-blue-500/50 shadow-lg shadow-blue-500/10" : "hover:bg-[#1a2332]" }`} > <picture> {game.mobileImage && <source media="(max-width: 640px)" srcSet={game.mobileImage} />} <img src={game.game_image || "/placeholder.svg?height=40&width=60"} alt={game.game_title} className="w-12 h-9 rounded object-cover flex-shrink-0" /> </picture> <div className="flex-1 min-w-0"> <h3 className="font-medium text-white text-sm truncate group-hover:text-blue-300 transition-colors"> {game.game_title} </h3> <p className="text-xs text-gray-400">{new Date(game.purchase_date).toLocaleDateString()}</p> </div> {game.game_username && <Key className="w-3 h-3 text-green-400 flex-shrink-0" />} </div> ))} </div> )} </div> </ScrollArea> </div> {sidebarOpen && ( <div className="fixed inset-0 bg-black/40 lg:hidden z-40" onClick={() => setSidebarOpen(false)} /> )} {/ Main Content /} <div className="flex-1 flex flex-col overflow-hidden"> {selectedGame ? ( <> {/ Game Header Banner /} <div className="relative h-40 sm:h-48 bg-gradient-to-r from-gray-900/20 to-gray-800/20 shrink-0"> <picture> {selectedGame.mobileBanner && <source media="(max-width: 640px)" srcSet={selectedGame.mobileBanner} />} <img src={selectedGame.game_image || "/placeholder.svg?height=256&width=800"} alt={selectedGame.game_title} className="w-full h-full object-cover opacity-20" /> </picture> <div className="absolute inset-0 bg-gradient-to-t from-[#0b0f14] via-[#0b0f14]/50 to-transparent" /> <div className="absolute top-4 left-4 lg:hidden"> <Button variant="ghost" size="sm" onClick={() => setSidebarOpen(true)} className="text-gray-300 hover:text-white p-0 h-8" > <Menu className="w-4 h-4" /> </Button> </div> <div className="absolute bottom-3 sm:bottom-4 left-4 sm:left-6 right-4 sm:right-6"> <h1 className="text-2xl sm:text-3xl font-bold text-white mb-1 line-clamp-2"> {selectedGame.game_title} </h1> <div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm"> <Badge className="bg-green-600/80 text-white"> <Calendar className="w-3 h-3 mr-1" /> Added {new Date(selectedGame.purchase_date).toLocaleDateString()} </Badge> {selectedGame.game_username && ( <Badge className="bg-gray-700/80 text-white"> <Key className="w-3 h-3 mr-1" /> Account Included </Badge> )} </div> </div> </div> {/ Game Content /} <div className="flex-1 overflow-y-auto p-3 sm:p-4"> <div className="max-w-4xl"> {/ Account Credentials Section /} {(selectedGame.game_username || selectedGame.game_password) && ( <Card className="bg-[#121826] border-[#1a2332] mb-6"> <CardContent className="p-0"> <div className="w-full p-4 sm:p-6"> <h3 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2 mb-6"> <User className="w-5 h-5 text-green-400" /> Account Credentials </h3> <div className="border-t border-[#1a2332] pt-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> {selectedGame.game_username && ( <div className="space-y-2"> <label className="text-xs sm:text-sm font-medium text-gray-300">Username</label> <div className="flex items-center gap-2"> <div className="flex-1 bg-[#0a0f16] p-2 sm:p-3 rounded border border-[#1a2332] min-w-0"> <code className="text-green-300 font-mono text-xs sm:text-sm break-all"> {selectedGame.game_username} </code> </div> <Button variant="ghost" size="sm" onClick={() => copyToClipboard(selectedGame.game_username!, "Username")} className="text-gray-400 hover:text-white bg-[#0a0f16] border border-[#1a2332] h-8 w-8 p-0 flex-shrink-0" > <Copy className="w-4 h-4" /> </Button> </div> </div> )} {selectedGame.game_password && ( <div className="space-y-2"> <label className="text-xs sm:text-sm font-medium text-gray-300">Password</label> <div className="flex items-center gap-2"> <div className="flex-1 bg-[#0a0f16] p-2 sm:p-3 rounded border border-[#1a2332] min-w-0"> <code className="text-green-300 font-mono text-xs sm:text-sm break-all"> {showPasswords[selectedGame.id] ? selectedGame.game_password : "•".repeat(Math.min(selectedGame.game_password.length, 20))} </code> </div> <Button variant="ghost" size="sm" onClick={() => togglePasswordVisibility(selectedGame.id)} className="text-gray-400 hover:text-white bg-[#0a0f16] border border-[#1a2332] h-8 w-8 p-0 flex-shrink-0" > {showPasswords[selectedGame.id] ? ( <EyeOff className="w-4 h-4" /> ) : ( <Eye className="w-4 h-4" /> )} </Button> <Button variant="ghost" size="sm" onClick={() => copyToClipboard(selectedGame.game_password!, "Password")} className="text-gray-400 hover:text-white bg-[#0a0f16] border border-[#1a2332] h-8 w-8 p-0 flex-shrink-0" > <Copy className="w-4 h-4" /> </Button> </div> </div> )} </div> </div> </div> </CardContent> </Card> )} {!selectedGame.game_username && !selectedGame.game_password && ( <Card className="bg-[#121826] border-[#1a2332] mb-6"> <CardContent className="p-4 sm:p-6"> <p className="text-gray-400 text-sm">No account credentials provided for this game.</p> </CardContent> </Card> )} {/ Game Codes Section /} <Card className="bg-[#121826] border-[#1a2332] mb-6"> <CardContent className="p-4 sm:p-6"> <h3 className="text-base sm:text-lg font-semibold text-white mb-4 flex items-center gap-2"> <Code className="w-5 h-5 text-purple-400" /> Game Codes </h3> {!codeRequests[selectedGame.id] ? ( <div className="text-center py-6"> <p className="text-gray-400 text-sm mb-4">No code requests yet</p> <Button onClick={() => handleRequestGameCode(selectedGame.id, selectedGame.game_id, selectedGame.game_title) } disabled={isRequestingCode} className="bg-gray-700 hover:bg-gray-600 text-white" > <Send className="w-4 h-4 mr-2" /> Request Game Code </Button> </div> ) : ( <div className="space-y-4"> {codeRequests[selectedGame.id].status === "pending" && ( <div className="p-4 bg-yellow-900/20 border border-yellow-700 rounded"> <p className="text-yellow-300 text-sm flex items-center gap-2"> <Clock className="w-4 h-4 flex-shrink-0" /> <span> <strong>Please wait for admin approval.</strong> Your code request has been sent to the admin team. </span> </p> <p className="text-yellow-300/70 text-xs mt-2"> Status: <Badge className="bg-yellow-600 text-xs ml-2">PENDING</Badge> </p> </div> )} {codeRequests[selectedGame.id].status === "delivered" && codeRequests[selectedGame.id].game_code && ( <div className="space-y-3"> <div className="p-4 bg-green-900/20 border border-green-700 rounded"> <p className="text-green-300 text-sm flex items-center gap-2 mb-3"> <CheckCircle className="w-4 h-4 flex-shrink-0" /> <span>Your game code has been delivered!</span> </p> <div className="space-y-2"> <label className="text-xs sm:text-sm font-medium text-gray-300">Game Code</label> <div className="flex items-center gap-2"> <div className="flex-1 bg-[#0a0f16] p-3 rounded border border-green-600 min-w-0"> <code className="text-green-300 font-mono text-xs sm:text-sm break-all"> {showGameCode[selectedGame.id] ? codeRequests[selectedGame.id].game_code : "•".repeat( Math.max(10, codeRequests[selectedGame.id].game_code?.length || 0), )} </code> </div> <Button variant="ghost" size="sm" onClick={() => toggleGameCodeVisibility(selectedGame.id)} className="text-gray-400 hover:text-white bg-[#0a0f16] border border-[#1a2332] h-8 w-8 p-0 flex-shrink-0" > {showGameCode[selectedGame.id] ? ( <EyeOff className="w-4 h-4" /> ) : ( <Eye className="w-4 h-4" /> )} </Button> <Button variant="ghost" size="sm" onClick={() => copyToClipboard(codeRequests[selectedGame.id].game_code!, "Game Code") } className="text-gray-400 hover:text-white bg-[#0a0f16] border border-[#1a2332] h-8 w-8 p-0 flex-shrink-0" > <Copy className="w-4 h-4" /> </Button> </div> </div> <div className="mt-3 text-xs text-green-300/70"> <p>💡 Keep this code secure. Use it to activate your game account.</p> </div> </div> </div> )} {codeRequests[selectedGame.id].status === "cancelled" && ( <div className="p-4 bg-red-900/20 border border-red-700 rounded"> <p className="text-red-300 text-sm flex items-center gap-2"> <span>Your code request was cancelled.</span> </p> <p className="text-red-300/70 text-xs mt-2"> Status: <Badge className="bg-red-600 text-xs ml-2">CANCELLED</Badge> </p> <Button onClick={() => handleRequestGameCode(selectedGame.id, selectedGame.game_id, selectedGame.game_title) } disabled={isRequestingCode} className="mt-3 bg-gray-700 hover:bg-gray-600 text-white text-xs" > <Send className="w-3 h-3 mr-2" /> Request Again </Button> </div> )} </div> )} </CardContent> </Card> </div> </div> </> ) : ( <> {/ Grid Header with Controls /} <div className="shrink-0 border-b border-[#1a2332] p-4 sm:p-6"> <div className="flex items-center justify-between gap-4 mb-4"> <h1 className="text-2xl sm:text-3xl font-bold">Library</h1> <div className="flex items-center gap-2"> <Button variant="ghost" size="sm" onClick={() => setSidebarOpen(true)} className="text-gray-400 hover:text-white p-0 h-8 w-8 lg:hidden" > <Menu className="w-4 h-4" /> </Button> </div> </div> <div className="flex flex-wrap items-center gap-3"> {/ Tabs /} <div className="flex gap-2 border-b border-[#1a2332] pb-3 w-full sm:w-auto"> <button onClick={() => setFilterType("all")} className={`px-3 py-1 text-sm font-medium transition-colors ${ filterType === "all" ? "text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-white" }`} > All </button> <button onClick={() => setFilterType("favorites")} className={`px-3 py-1 text-sm font-medium transition-colors ${ filterType === "favorites" ? "text-blue-400 border-b-2 border-blue-400" : "text-gray-400 hover:text-white" }`} > Favorites </button> </div> {/ Sort Dropdown - Recently Options /} <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)} className="px-3 py-1 text-xs sm:text-sm bg-[#121826] border border-[#1a2332] text-white rounded hover:border-blue-500 transition-colors" > <optgroup label="Recently"> <option value="recently-added">Recently Added</option> <option value="recently-played">Recently Played</option> <option value="recently-purchased">Recently Purchased</option> <option value="recently-updated">Recently Updated</option> <option value="recently-opened">Recently Opened</option> </optgroup> <optgroup label="Other"> <option value="alphabetical">A–Z</option> </optgroup> </select> {/ View Toggle /} <div className="flex gap-2 bg-[#121826] border border-[#1a2332] rounded p-1"> <button onClick={() => setViewMode("grid")} className={`px-2 py-1 text-xs font-medium transition-colors ${ viewMode === "grid" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-white" }`} > Grid </button> <button onClick={() => setViewMode("compact")} className={`px-2 py-1 text-xs font-medium transition-colors ${ viewMode === "compact" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-white" }`} > Compact </button> </div> </div> </div> {/ Games Grid /} <div className="flex-1 overflow-y-auto p-4 sm:p-6"> {filteredGames.length > 0 && filterType === "all" && ( <div className="mb-4 flex gap-6 text-sm text-gray-400"> <span> Total games: <span className="text-white font-semibold">{games.length}</span> </span> <span> Favorites: <span className="text-gray-300 font-semibold">{favorites.size}</span> </span> </div> )} {filteredGames.length === 0 ? ( <div className="flex flex-col items-center justify-center h-full"> <GamepadIcon className="w-16 h-16 text-gray-600 mb-4" /> <p className="text-gray-400 text-lg"> {searchQuery ? "No games found" : filterType === "favorites" ? "No favorite games" : "No games in library"} </p> {!searchQuery && ( <Link href="/browse" className="mt-4 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded transition-colors text-sm" > Browse Games </Link> )} </div> ) : ( <> <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4"> {filteredGames.map((game) => ( <button key={game.id} onClick={() => setSelectedGame(game)} className="group text-left h-full relative" > <div className="relative overflow-hidden rounded-lg flex flex-col h-full"> {/ Game Cover Image /} <div className="relative aspect-[3/4] overflow-hidden rounded-lg"> <img src={game.game_image || "/placeholder.svg?height=400&width=300"} alt={game.game_title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" /> <div className="absolute inset-0 bg-gradient-to-t from-[#0b0f14] via-transparent to-transparent opacity-40 group-hover:opacity-20 transition-opacity duration-300" /> <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center gap-2 p-3"> <button onClick={(e) => { e.stopPropagation() setSelectedGame(game) }} className="w-full py-2 px-3 bg-gray-700 hover:bg-gray-600 text-white text-xs rounded transition-colors font-medium" > View Details </button> <button onClick={(e) => { e.stopPropagation() toggleFavorite(game.id) }} className={`w-full py-2 px-3 text-xs rounded transition-colors font-medium flex items-center justify-center gap-2 ${ favorites.has(game.id) ? "bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30" : "bg-gray-600 text-gray-200 hover:bg-gray-700" }`} > {favorites.has(game.id) ? "★" : "☆"}{" "} {favorites.has(game.id) ? "Favorited" : "Add to Favorites"} </button> </div> {favorites.has(game.id) && ( <div className="absolute top-2 right-2 text-yellow-400 text-lg drop-shadow-lg">★</div> )} </div> <div className="py-2"> <h3 className="text-xs sm:text-sm font-semibold text-white line-clamp-2 group-hover:text-blue-400 transition-colors"> {game.game_title} </h3> </div> </div> </button> ))} </div> </> )} </div> </> )} </div> </div> ) } [V0_FILE]typescriptreact:file="components/users-management-panel.tsx" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { useCallback } from "react" import { User } from "lucide-react" // Import User component import { useState, useEffect } from "react" import { supabase } from "@/lib/supabase" import { getAllUserLoginsAsAdmin } from "@/app/actions/admin-tracking" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { useToast } from "@/hooks/use-toast" import { Search, RefreshCw, Mail, Calendar, Activity, BookOpen } from "lucide-react" import { formatDate, getTimeSince } from "@/utils/date-utils" // Import formatDate and getTimeSince functions import { UserLibraryModal } from "./user-library-modal" interface TrackedUser { user_id: string email: string first_login: string last_login: string login_count: number } export function UsersManagementPanel() { const [users, setUsers] = useState<TrackedUser[]>([]) const [searchQuery, setSearchQuery] = useState("") const [loading, setLoading] = useState(false) const [selectedUser, setSelectedUser] = useState<any | null>(null) const [showDetail, setShowDetail] = useState(false) const [libraryUserId, setLibraryUserId] = useState<string | null>(null) const [libraryUserEmail, setLibraryUserEmail] = useState<string | null>(null) const [showLibrary, setShowLibrary] = useState(false) const { toast } = useToast() useEffect(() => { let isMounted = true let refetchTimeout: NodeJS.Timeout | null = null const initializePanel = async () => { if (isMounted) { await fetchUsers() } } initializePanel() // Subscribe to real-time user login updates with debouncing const subscription = supabase .channel("user-logins-realtime") .on( "postgres_changes", { event: "INSERT", schema: "public", table: "user_logins" }, () => { // Debounce refetch to avoid race conditions and spam if (refetchTimeout) clearTimeout(refetchTimeout) refetchTimeout = setTimeout(() => { if (isMounted) { console.log("[v0] Debounced refetch triggered") fetchUsers() } }, 1500) } ) .subscribe((status) => { if (status === "SUBSCRIBED") { console.log("[v0] Real-time subscription active") } else if (status === "CLOSED") { console.log("[v0] Real-time subscription closed") } }) return () => { isMounted = false if (refetchTimeout) clearTimeout(refetchTimeout) supabase.removeChannel(subscription) } }, []) async function fetchUsers() { if (loading) return // Prevent concurrent requests setLoading(true) try { const trackedUsers = await getAllUserLoginsAsAdmin() if (Array.isArray(trackedUsers)) { setUsers(trackedUsers) console.log("[v0] Loaded tracked user logins (admin):", trackedUsers.length) } else { console.warn("[v0] Unexpected response format:", trackedUsers) setUsers([]) } } catch (error: any) { // Ignore abort errors from cleanup if (error?.name === "AbortError" || error?.message?.includes("aborted")) { console.log("[v0] Fetch aborted (expected during cleanup)") return } console.error("[v0] Error fetching tracked users:", error) toast({ title: "Error", description: "Failed to fetch user login data", variant: "destructive", }) } finally { setLoading(false) } } async function loadUserDetail(userId: string) { try { const { data: wallet } = await supabase.from("user_wallets").select("").eq("user_id", userId).single() const { data: orders } = await supabase .from("orders") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) const { data: redeemRequests } = await supabase .from("redeem_requests") .select("") .eq("user_id", userId) .order("created_at", { ascending: false }) const user = users.find((u) => u.user_id === userId) if (user) { setSelectedUser({ ...user, wizard_tokens: wallet?.wizard_tokens || 0, total_tokens_earned: wallet?.total_tokens_earned || 0, total_tokens_spent: wallet?.total_tokens_spent || 0, orders: orders || [], redeem_requests: redeemRequests || [], }) setShowDetail(true) } } catch (error) { console.error("Error loading user detail:", error) toast({ title: "Error", description: "Failed to load user details", variant: "destructive", }) } } const filteredUsers = users.filter((user) => user.email.toLowerCase().includes(searchQuery.toLowerCase())) function getStatus(user: TrackedUser) { const isRecent = new Date().getTime() - new Date(user.last_login).getTime() < 5 * 60 * 1000 return isRecent ? "RECENTLY ACTIVE" : "OFFLINE" } return ( <div className="space-y-6"> {/* Search Section /} <div className="flex gap-2"> <div className="relative flex-1"> <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" /> <Input placeholder="Search by email..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="pl-10 bg-gray-700 border-gray-600 text-white placeholder-gray-400" /> </div> <Button onClick={fetchUsers} disabled={loading} variant="outline" className="gap-2 bg-transparent"> <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} /> {loading ? "Refreshing..." : "Refresh"} </Button> </div> {/ Stats Summary /} <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <Card className="bg-gray-800 border-gray-700 p-4"> <div className="flex items-center gap-3"> <div className="p-2 bg-blue-600/20 rounded-lg"> <Mail className="h-5 w-5 text-blue-400" /> </div> <div> <p className="text-sm text-gray-400">Total Users</p> <p className="text-2xl font-bold text-white">{users.length}</p> </div> </div> </Card> <Card className="bg-gray-800 border-gray-700 p-4"> <div className="flex items-center gap-3"> <div className="p-2 bg-green-600/20 rounded-lg"> <Activity className="h-5 w-5 text-green-400" /> </div> <div> <p className="text-sm text-gray-400">Total Logins</p> <p className="text-2xl font-bold text-white">{users.reduce((sum, user) => sum + user.login_count, 0)}</p> </div> </div> </Card> <Card className="bg-gray-800 border-gray-700 p-4"> <div className="flex items-center gap-3"> <div className="p-2 bg-purple-600/20 rounded-lg"> <Calendar className="h-5 w-5 text-purple-400" /> </div> <div> <p className="text-sm text-gray-400">Filtered Results</p> <p className="text-2xl font-bold text-white">{filteredUsers.length}</p> </div> </div> </Card> </div> {/ Users Table /} <Card className="bg-gray-800 border-gray-700"> <ScrollArea className="h-[500px]"> <div className="p-4"> <table className="w-full text-sm"> <thead> <tr className="border-b border-gray-700"> <th className="text-left py-3 px-4 font-semibold text-gray-300">Email</th> <th className="text-left py-3 px-4 font-semibold text-gray-300">First Login</th> <th className="text-left py-3 px-4 font-semibold text-gray-300">Last Login</th> <th className="text-left py-3 px-4 font-semibold text-gray-300">Login Count</th> <th className="text-left py-3 px-4 font-semibold text-gray-300">Status</th> <th className="text-left py-3 px-4 font-semibold text-gray-300">Actions</th> </tr> </thead> <tbody> {filteredUsers.length > 0 ? ( filteredUsers.map((user, index) => { return ( <tr key={`${user.user_id}-${index}`} className="border-b border-gray-700 hover:bg-gray-700/50"> <td className="py-3 px-4"> <div className="flex items-center gap-2"> <Mail className="h-4 w-4 text-gray-400" /> <span className="text-white">{user.email}</span> </div> </td> <td className="py-3 px-4 text-gray-400">{formatDate(user.first_login)}</td> <td className="py-3 px-4"> <div className="flex flex-col"> <span className="text-white">{formatDate(user.last_login)}</span> <span className="text-xs text-gray-500">{getTimeSince(user.last_login)}</span> </div> </td> <td className="py-3 px-4"> <Badge variant="secondary" className="bg-blue-900 text-blue-300"> {user.login_count} {user.login_count === 1 ? "login" : "logins"} </Badge> </td> <td className="py-3 px-4"> <Badge className={getStatus(user) === "RECENTLY ACTIVE" ? "bg-green-600" : "bg-gray-600"}> {getStatus(user)} </Badge> </td> <td className="py-3 px-4"> <div className="flex gap-2"> <Button variant="ghost" size="sm" className="gap-2 text-purple-400 hover:text-purple-300 hover:bg-purple-900/30" onClick={() => loadUserDetail(user.user_id)} > <User className="h-4 w-4" /> View </Button> <Button variant="ghost" size="sm" className="gap-2 text-blue-400 hover:text-blue-300 hover:bg-blue-900/30" onClick={() => { setLibraryUserId(user.user_id) setLibraryUserEmail(user.email) setShowLibrary(true) }} > <BookOpen className="h-4 w-4" /> Library </Button> </div> </td> </tr> ) }) ) : ( <tr> <td colSpan={6} className="py-8 text-center text-gray-400"> {searchQuery ? "No users found matching your search" : "No users have logged in yet"} </td> </tr> )} </tbody> </table> </div> </ScrollArea> </Card> {/ Info Footer /} <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4"> <p className="text-sm text-blue-300"> <strong>Note:</strong> This panel shows all users who have ever logged in to your store, from any device or browser. Data is persistent and not session-based. </p> </div> {/ User Detail Dialog /} {selectedUser && <UserDetailDialog user={selectedUser} open={showDetail} onOpenChange={setShowDetail} />} {/ User Library Modal /} {libraryUserId && libraryUserEmail && ( <UserLibraryModal userId={libraryUserId} userEmail={libraryUserEmail} open={showLibrary} onOpenChange={setShowLibrary} /> )} </div> ) } function UserDetailDialog({ user, open, onOpenChange, }: { user: any; open: boolean; onOpenChange: (open: boolean) => void }) { const [tokenAdjustment, setTokenAdjustment] = useState("") const [note, setNote] = useState("") const [adjusting, setAdjusting] = useState(false) const { toast } = useToast() async function adjustTokens() { if (!tokenAdjustment) return setAdjusting(true) try { const tokens = Number.parseInt(tokenAdjustment) const { data: { user: currentUser }, } = await supabase.auth.getUser() // Create audit log await supabase.from("user_audit_logs").insert({ user_id: user.user_id, admin_id: currentUser?.id, action_type: "TOKEN_ADJUSTMENT", description: `Token adjustment: ${tokens > 0 ? "+" : ""}${tokens} tokens`, token_change: tokens, previous_balance: user.wizard_tokens, new_balance: user.wizard_tokens + tokens, note: note || null, }) // Update wallet const { data: wallet } = await supabase.from("user_wallets").select("").eq("user_id", user.user_id).single() if (wallet) { await supabase .from("user_wallets") .update({ wizard_tokens: wallet.wizard_tokens + tokens, total_tokens_earned: tokens > 0 ? wallet.total_tokens_earned + tokens : wallet.total_tokens_earned, }) .eq("user_id", user.user_id) } toast({ title: "Success", description: `Adjusted ${Math.abs(tokens)} tokens for ${user.email}`, }) setTokenAdjustment("") setNote("") } catch (error) { console.error("Error adjusting tokens:", error) toast({ title: "Error", description: "Failed to adjust tokens", variant: "destructive", }) } finally { setAdjusting(false) } } return ( <Dialog open={open} onOpenChange={onOpenChange}> <DialogContent className="max-w-2xl bg-gray-800 border-gray-700 text-white max-h-[90vh] overflow-y-auto"> <DialogHeader> <DialogTitle className="text-xl">{user.email} - User Profile</DialogTitle> </DialogHeader> <div className="space-y-6"> {/* Basic Info /} <div className="grid grid-cols-2 gap-4"> <div> <p className="text-sm text-gray-400">Email</p> <p className="font-medium">{user.email}</p> </div> <div> <p className="text-sm text-gray-400">First Login</p> <p className="font-medium">{formatDate(user.first_login)}</p> </div> <div> <p className="text-sm text-gray-400">Last Login</p> <p className="font-medium">{formatDate(user.last_login)}</p> </div> <div> <p className="text-sm text-gray-400">Login Count</p> <p className="font-medium">{user.login_count}</p> </div> </div> {/ User Status /} <div className="flex items-center gap-3 mb-4"> <div className={`w-3 h-3 rounded-full ${new Date().getTime() - new Date(user.last_login).getTime() < 5 60 * 1000 ? "bg-green-500 animate-pulse" : "bg-gray-500"}`} /> <span className="text-sm font-medium"> {new Date().getTime() - new Date(user.last_login).getTime() < 5 * 60 * 1000 ? "Currently Online" : "Offline"} </span> </div> {/* Wizard Tokens Section /} <div className="bg-gradient-to-r from-cyan-900/40 to-purple-900/40 rounded-lg p-6 border-2 border-cyan-500/50 shadow-lg shadow-cyan-500/10"> <div className="flex items-center gap-2 mb-4"> <div className="p-2 bg-cyan-500/20 rounded-lg"> <span className="text-2xl">💰</span> </div> <h3 className="text-lg font-bold text-cyan-300">Wizard Tokens</h3> </div> <div className="grid grid-cols-3 gap-4"> <div className="bg-cyan-900/20 rounded-lg p-4 border border-cyan-600/30"> <p className="text-xs text-cyan-300 font-semibold uppercase">Current Balance</p> <p className="text-3xl font-bold text-cyan-400 mt-1">{user.wizard_tokens}</p> </div> <div className="bg-green-900/20 rounded-lg p-4 border border-green-600/30"> <p className="text-xs text-green-300 font-semibold uppercase">Total Earned</p> <p className="text-3xl font-bold text-green-400 mt-1">{user.total_tokens_earned}</p> </div> <div className="bg-red-900/20 rounded-lg p-4 border border-red-600/30"> <p className="text-xs text-red-300 font-semibold uppercase">Total Spent</p> <p className="text-3xl font-bold text-red-400 mt-1">{user.total_tokens_spent}</p> </div> </div> {/ Token Adjustment Controls /} <div className="mt-6 space-y-4 pt-6 border-t-2 border-cyan-600/30"> <div> <Label className="text-sm font-semibold text-cyan-300">Admin Token Management</Label> <p className="text-xs text-gray-400 mt-1">Add or deduct tokens for this user. Use negative numbers to deduct.</p> </div> <div className="space-y-2"> <Label htmlFor="token-amount" className="text-sm text-gray-300">Amount</Label> <div className="flex gap-2"> <Input id="token-amount" type="number" placeholder="Enter amount (+100 or -50)" value={tokenAdjustment} onChange={(e) => setTokenAdjustment(e.target.value)} className="bg-gray-700 border-gray-600 text-white" /> <Button onClick={adjustTokens} disabled={adjusting || !tokenAdjustment} className="bg-cyan-600 hover:bg-cyan-700 text-white" > {adjusting ? "Adjusting..." : "Apply"} </Button> </div> </div> <div className="space-y-2"> <Label htmlFor="token-note" className="text-sm text-gray-300">Support Note (optional)</Label> <Input id="token-note" placeholder="Reason for adjustment (e.g., Promotional bonus, Refund)" value={note} onChange={(e) => setNote(e.target.value)} className="bg-gray-700 border-gray-600 text-white" /> </div> </div> </div> {/ Orders Section /} <div> <h3 className="font-semibold mb-3">Purchase History ({user.orders.length})</h3> <ScrollArea className="h-[200px] bg-gray-700/30 rounded-lg p-3"> {user.orders.length > 0 ? ( <div className="space-y-2"> {user.orders.map((order) => ( <div key={order.id} className="text-sm border-b border-gray-700 pb-2 last:border-0"> <p className="font-medium">{order.game_name}</p> <p className="text-gray-400"> ₹{order.final_price} • {formatDate(order.created_at)} </p> </div> ))} </div> ) : ( <p className="text-gray-400 text-center py-4">No purchases yet</p> )} </ScrollArea> </div> {/ Redeem Requests Section */} <div> <h3 className="font-semibold mb-3">Redeem Requests ({user.redeem_requests.length})</h3> <ScrollArea className="h-[200px] bg-gray-700/30 rounded-lg p-3"> {user.redeem_requests.length > 0 ? ( <div className="space-y-2"> {user.redeem_requests.map((req) => ( <div key={req.id} className="text-sm border-b border-gray-700 pb-2 last:border-0"> <p className="font-medium">{req.redeem_code}</p> <p className="text-gray-400"> <Badge variant="outline" className="text-xs mr-2 capitalize"> {req.status} </Badge> {req.status === "approved" && `+${req.tokens_amount} tokens`} </p> </div> ))} </div> ) : ( <p className="text-gray-400 text-center py-4">No redeem requests</p> )} </ScrollArea> </div> </div> </DialogContent> </Dialog> ) } [V0_FILE]typescriptreact:file="components/sales-specials-section.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { EpicSectionGrid } from "@/components/epic-section-grid" import type { Game } from "@/types/game" import { allGames } from "@/lib/game-data" interface SalesSpecialsSectionProps { onGameClick?: (game: Game) => void } export function SalesSpecialsSection({ onGameClick }: SalesSpecialsSectionProps) { const [discountedGames, setDiscountedGames] = useState<Game[]>([]) const [loading, setLoading] = useState(true) useEffect(() => { const loadDiscountedGames = async () => { try { const gamesWithDiscounts = allGames.filter((game) => game.category === "Sales & Specials") setDiscountedGames(gamesWithDiscounts) } catch (error) { console.error("Failed to load discounted games:", error) } finally { setLoading(false) } } loadDiscountedGames() }, []) if (loading) { return <EpicSectionGrid title="Sales & Specials" games={[]} loading /> } if (discountedGames.length === 0) { return null } return ( <EpicSectionGrid title="Sales & Specials" description="Massive Discounts on Top Games" games={discountedGames} onGameClick={onGameClick} /> ) } [V0_FILE]typescriptreact:file="components/wizard-new-games-section.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { EpicSectionGrid } from "@/components/epic-section-grid" import { TopNewReleasesPromoBanners } from "@/components/top-new-releases-promo-banners" import type { Game } from "@/types/game" import { allGames } from "@/lib/game-data" interface WizardNewGamesSectionProps { onGameClick?: (game: Game) => void } export function WizardNewGamesSection({ onGameClick }: WizardNewGamesSectionProps) { const [newGames, setNewGames] = useState<Game[]>([]) const [loading, setLoading] = useState(true) useEffect(() => { const loadNewGames = async () => { try { const selectedGames = allGames.filter((game) => game.category === "Wizard New Games") setNewGames(selectedGames) } catch (error) { console.error("Failed to load new games:", error) } finally { setLoading(false) } } loadNewGames() }, []) if (loading) { return <EpicSectionGrid title="Wizard New Games" games={[]} loading /> } if (newGames.length === 0) { return null } return ( <EpicSectionGrid title="Wizard New Games" description="Latest Releases at Great Prices" games={newGames} onGameClick={onGameClick} bannerComponent={<TopNewReleasesPromoBanners />} /> ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Toaster } from "sonner" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Wizard Games Store", description: " Welcome to Wizard Games Store Explore curated PC games, discover new releases, enjoy exclusive deals, and experience smooth, seamless browsing Build your library, track your orders, and dive into a world of gaming like never before.", generator: "wizard studio", icons: { icon: [{ url: "/wizard-store-logo.png", sizes: "any" }], apple: "/wizard-store-logo.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( <html lang="en"> <body className={`font-sans antialiased`}> {children} <Toaster position="top-right" /> <Analytics /> </body> </html> ) } [V0_FILE]typescriptreact:file="components/wizard-new-releases-banners.tsx" isMerged="true" "use client" import Image from "next/image" import { Button } from "@/components/ui/button" import { useState } from "react" interface PromoBanner { id: string title: string subtitle: string description: string image: string mobileImage?: string buttonText: string buttonLink: string } const promoBanners: PromoBanner[] = [ { id: "1", title: "New Releases", subtitle: "Premium Gaming", description: "Experience the newest blockbuster games with cutting-edge graphics", image: "https://assetsio.gnwcdn.com/arknights-endfield.jpg?width=690&quality=85&format=jpg&dpr=3&auto=webp", buttonText: "Explore Now", buttonLink: "/discover?section=new-releases", }, { id: "2", title: "Indie Gems", subtitle: "Unique Stories", description: "Discover innovative games from independent developers", image: "https://static0.dualshockersimages.com/wordpress/wp-content/uploads/wm/2025/11/img_0959.jpeg?w=1600&h=900&fit=crop", buttonText: "Browse Games", buttonLink: "/discover?section=indie-gems", }, { id: "3", title: "Multiplayer Hits", subtitle: "Pla</article></body></html>