[V0_FILE]png:file="public/diverse-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-avatars-K1qVYge2trPWCNm6kkjY04d7LcErVe.png" isMerged="true" [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/components/sidebar.tsx" isEdit="true" isMerged="true" import Link from "next/link" import { Calendar, ChevronDown, CreditCard, Download, Flame, Home, ImageIcon, LayoutGrid, Package, PieChart, RefreshCw, Settings, Ticket, Users, } from "lucide-react" export function Sidebar() { return (

Dashboard App

Main

Dashboard
Analytics
Payments
Users

Content

Hero Banner
Games Banner
Hot Game
Event

Management

Packages
Transaction
5
Game Update
Voucher

Settings

General Settings
User Management

Sok Sothea

Administrator

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Game Top-Up Admin Dashboard", description: "Admin dashboard for managing game top-up services", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import Dashboard from "@/components/dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { useTheme } from "next-themes" import { ChevronDown, Menu, Package, CreditCard, Users, ImageIcon, LayoutGrid, Flame, Calendar, RefreshCw, Download, Ticket, Home, Check, Clock, Gamepad, ArrowRight, Eye, Edit, Trash, Filter, DownloadIcon, Plus, Search, FileText, FileSpreadsheet, FileIcon as FilePdf, Undo, } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ScrollArea } from "@/components/ui/scroll-area" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Alert, AlertDescription } from "@/components/ui/alert" import { Switch } from "@/components/ui/switch" import { mockData } from "@/lib/mock-data" import { TransactionChart, StatusChart } from "@/components/charts" export default function Dashboard() { const { theme, setTheme } = useTheme() const [activeSection, setActiveSection] = useState("dashboard") const [isSidebarOpen, setIsSidebarOpen] = useState(false) const [isFilterOpen, setIsFilterOpen] = useState(false) const [addFormVisible, setAddFormVisible] = useState("") const [flashMessage, setFlashMessage] = useState<{ type: string; message: string } | null>(null) const [selectedGame, setSelectedGame] = useState("") const [statusFilter, setStatusFilter] = useState("") const [gameFilter, setGameFilter] = useState("") const [startDateFilter, setStartDateFilter] = useState("") const [endDateFilter, setEndDateFilter] = useState("") const [filteredTransactions, setFilteredTransactions] = useState(mockData.transactions) // Mock data stats const totalRevenue = mockData.transactions .filter((t) => t.payment_status === "Success") .reduce((sum, t) => sum + t.price, 0) const completedTransactions = mockData.transactions.filter((t) => t.payment_status === "Success").length const pendingTransactions = mockData.transactions.filter((t) => t.payment_status === "Pending").length const totalGames = mockData.hot_games.length useEffect(() => { // Clear flash message after 5 seconds if (flashMessage) { const timer = setTimeout(() => { setFlashMessage(null) }, 5000) return () => clearTimeout(timer) } }, [flashMessage]) const showAddForm = (type: string) => { setAddFormVisible(type) } const hideAddForm = () => { setAddFormVisible("") } const confirmDelete = (id: string, type: string) => { if (window.confirm("Are you sure you want to delete this item? This action cannot be undone.")) { // Mock deletion setFlashMessage({ type: "success", message: `${type.charAt(0).toUpperCase() + type.slice(1)} deleted successfully!`, }) } } const applyFilters = () => { let filtered = mockData.transactions if (statusFilter) { filtered = filtered.filter((t) => t.payment_status === statusFilter) } if (gameFilter) { filtered = filtered.filter((t) => t.game === gameFilter) } if (startDateFilter) { const startDate = new Date(startDateFilter) filtered = filtered.filter((t) => new Date(t.time) >= startDate) } if (endDateFilter) { const endDate = new Date(endDateFilter) filtered = filtered.filter((t) => new Date(t.time) <= endDate) } setFilteredTransactions(filtered) setIsFilterOpen(false) } const resetFilters = () => { setStatusFilter("") setGameFilter("") setStartDateFilter("") setEndDateFilter("") setFilteredTransactions(mockData.transactions) } const renderContent = () => { switch (activeSection) { case "dashboard": return renderDashboard() case "transactions": return renderTransactions() case "hot_games": return renderHotGames() case "packages": return renderPackages() case "banners": return renderBanners() case "banners_game": return renderGameBanners() case "events": return renderEvents() case "updates": return renderUpdates() case "vouchers": return renderVouchers() default: return renderDashboard() } } const renderDashboard = () => { return ( <> {/* Dashboard Stats */}

Revenue

${totalRevenue.toFixed(2)}

Total earnings

Completed

{completedTransactions}

Successful transactions

Pending

{pendingTransactions}

Awaiting completion

Games

{totalGames}

Active games

{/* Recent Transactions */}

Recent Transactions

ID Game User Amount Price Status Action {mockData.transactions.slice(0, 5).map((transaction) => ( {transaction.transaction_id} {transaction.game} {transaction.userid} {transaction.amount} Diamonds ${transaction.price.toFixed(2)} {transaction.original_price > 0 && ( ${transaction.original_price.toFixed(2)} )} {transaction.payment_status} ))}

{/* Popular Games */}

Popular Games

{mockData.hot_games.slice(0, 4).map((game) => (

{game.badge}

{game.title}

{mockData.packages[game.slug]?.length || 0} packages available

))}

) } const renderTransactions = () => { return ( <> {/* Filter */}

{isFilterOpen && (

Status

Game

Date Range

setStartDateFilter(e.target.value)} placeholder="Start Date" /> setEndDateFilter(e.target.value)} placeholder="End Date" />

)}

{/* Charts */}

{/* Transactions Table */} Transactions

Export as CSV Export as Excel Export as PDF

ID Game User ID Zone ID Product Amount Price Status Time Actions {filteredTransactions.map((transaction) => ( {transaction.transaction_id} {transaction.game} {transaction.userid} {transaction.zoneid || "-"} {transaction.title} {transaction.amount} Diamonds ${transaction.price.toFixed(2)} {transaction.original_price > 0 && ( ${transaction.original_price.toFixed(2)} )} {transaction.payment_status} {transaction.time}

))}

{/* Mobile view */}

{filteredTransactions.map((transaction) => (

#{transaction.transaction_id}

{transaction.time}

{transaction.game}

User ID: {transaction.userid} {transaction.zoneid && ( Zone: {transaction.zoneid} )}

{transaction.amount} Diamonds

${transaction.price.toFixed(2)} {transaction.original_price > 0 && ( ${transaction.original_price.toFixed(2)} )}

{transaction.payment_status}

))}

{/* Add Transaction Form */} {addFormVisible === "transactions" && ( Add New Transaction

Game

Package Title

User ID

Zone ID (Optional)

Diamond Amount

Price ($)

Original Price ($) (Optional)

Discount Percentage (Optional)

Voucher Code (Optional)

Payment Status

Transaction Time

)} ) } const renderHotGames = () => { return ( Hot Games

{mockData.hot_games.map((game) => (

{game.badge}

{game.title}

{game.slug}

{mockData.packages[game.slug]?.length || 0} packages

))}

{/* Add Game Form */} {addFormVisible === "hot_games" && ( Add New Game

Title

Slug

Image URL

Badge Text

Badge Color

)} ) } const renderPackages = () => { // Filter packages by selected game if needed const filteredPackages = selectedGame ? { [selectedGame]: mockData.packages[selectedGame] || [] } : mockData.packages return ( Game Packages {/* Game Selector */}

setSelectedGame("")} >

All Games

{mockData.hot_games.map((game) => (

setSelectedGame(game.slug)} >

{game.title}

))}

{/* Packages */} {Object.entries(filteredPackages).map(([gameSlug, packages]) => { // Find the game title const game = mockData.hot_games.find((g) => g.slug === gameSlug) const gameTitle = game ? game.title : gameSlug.replace(/-/g, " ") return (

{gameTitle}

{packages.map((pkg) => (

{pkg.title_package}

{pkg.diamond_amount} Diamonds

{pkg.product_id && ( Product ID: {pkg.product_id} )}

${pkg.price.toFixed(2)} {pkg.original_price > 0 && ( ${pkg.original_price.toFixed(2)} )}

))} {packages.length === 0 && (

No packages found for this game.

)}

) })} {/* Add Package Form */} {addFormVisible === "packages" && ( Add New Package

Game

Product ID

Package Title

Diamond Amount

Package Image URL

Price ($)

Original Price ($) (Optional)

)} ) } const renderBanners = () => { return ( Hero Banners

{mockData.banners.map((banner) => (

{banner.alt}

))} {mockData.banners.length === 0 && (

No banners found. Add some banners to get started.

)}

{/* Add Banner Form */} {addFormVisible === "banners" && ( Add New Banner )} ) } const renderGameBanners = () => { return ( Game Banners

{mockData.banners_game.map((banner) => (

{banner.alt}

))} {mockData.banners_game.length === 0 && (

No game banners found. Add some banners to get started.

)}

{/* Add Game Banner Form */} {addFormVisible === "banners_game" && ( Add New Game Banner )} ) } const renderEvents = () => { return ( Events

{mockData.events.map((event) => (

{event.tagText || event.label}

{event.title}

{event.label}

{event.topup && ( {event.topup} )}

))} {mockData.events.length === 0 && (

No events found. Add some events to get started.

)}

{/* Add Event Form */} {addFormVisible === "events" && ( Add New Event

Title

Label

Image URL

Tag Color

Tag Text (Optional)

Top-up Text (Optional)

)} ) } const renderUpdates = () => { return ( Game Updates

{mockData.updates.map((update) => (

{update.badge}

{update.title}

{update.desc}

{update.date}

))} {mockData.updates.length === 0 && (

No updates found. Add some updates to get started.

)}

{/* Add Update Form */} {addFormVisible === "updates" && ( Add New Game Update

Title

Date

Description

</div>

<div>
                  <Label htmlFor="image">Image URL</Label>
                  <Input id="image" placeholder="https://example.com/image.jpg" />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="badge">Badge Text</Label>
                    <Input id="badge" placeholder="Update, New, etc." />
                  </div>
                  <div>
                    <Label htmlFor="badgeColor">Badge Color</Label>
                    <Select defaultValue="red">
                      <SelectTrigger id="badgeColor">
                        <SelectValue placeholder="Select color" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="red">Red</SelectItem>
                        <SelectItem value="green">Green</SelectItem>
                        <SelectItem value="purple">Purple</SelectItem>
                        <SelectItem value="yellow">Yellow</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="flex flex-col sm:flex-row gap-3 pt-2">
                  <Button
                    type="button"
                    onClick={() => {
                      setFlashMessage({
                        type: "success",
                        message: "Update added successfully!",
                      })
                      hideAddForm()
                    }}
                  >
                    Save Update
                  </Button>
                  <Button type="button" variant="outline" onClick={hideAddForm}>
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}
      </Card>
    )
  }

const renderVouchers = () => {
    return (
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Vouchers</CardTitle>
          <Button size="sm" onClick={() => showAddForm("vouchers")}>
            <Plus className="mr-2 h-4 w-4" />
            <span className="hidden sm:inline">Add Voucher</span>
          </Button>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Code</TableHead>
                  <TableHead>Discount</TableHead>
                  <TableHead>Expires</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockData.vouchers.map((voucher) => (
                  <TableRow key={voucher.id}>
                    <TableCell className="font-medium">{voucher.code}</TableCell>
                    <TableCell>{voucher.discount_percent}%</TableCell>
                    <TableCell>{voucher.expires}</TableCell>
                    <TableCell>
                      <div className="flex gap-1">
                        <Button variant="outline" size="sm">
                          <Edit className="mr-1 h-3 w-3" />
                          <span className="hidden sm:inline">Edit</span>
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          className="text-destructive"
                          onClick={() => confirmDelete(voucher.id, "voucher")}
                        >
                          <Trash className="mr-1 h-3 w-3" />
                          <span className="hidden sm:inline">Delete</span>
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}

{mockData.vouchers.length === 0 && (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-4 text-gray-500 dark:text-gray-400">
                      No vouchers found
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>

{/* Add Voucher Form */}
        {addFormVisible === "vouchers" && (
          <Card className="mt-6">
            <CardHeader>
              <CardTitle>Add New Voucher</CardTitle>
            </CardHeader>
            <CardContent>
              <form className="space-y-4">
                <div>
                  <Label htmlFor="code">Voucher Code</Label>
                  <Input id="code" placeholder="SUMMER25" />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="discount_percent">Discount Percentage</Label>
                    <Input id="discount_percent" type="number" min="1" max="100" placeholder="25" />
                  </div>
                  <div>
                    <Label htmlFor="expires">Expiry Date</Label>
                    <Input
                      id="expires"
                      placeholder="2025-12-31"
                      defaultValue={new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0]}
                    />
                  </div>
                </div>

<div className="flex flex-col sm:flex-row gap-3 pt-2">
                  <Button
                    type="button"
                    onClick={() => {
                      setFlashMessage({
                        type: "success",
                        message: "Voucher added successfully!",
                      })
                      hideAddForm()
                    }}
                  >
                    Save Voucher
                  </Button>
                  <Button type="button" variant="outline" onClick={hideAddForm}>
                    Cancel
                  </Button>
                </div>
              </form>
            </CardContent>
          </Card>
        )}
      </Card>
    )
  }

return (
    <div className="flex min-h-screen">
      {/* Mobile Menu Overlay */}
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 md:hidden transition-opacity duration-300"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

{/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-md transition-transform duration-300 ease-in-out transform ${
          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
        } md:translate-x-0`}
      >
        <div className="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-700">
          <div className="flex items-center gap-2 text-xl font-bold text-primary-500">
            <Package className="h-6 w-6" />
            <span>Game Top-Up</span>
          </div>
          <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsSidebarOpen(false)}>
            <ChevronDown className="h-5 w-5 rotate-90" />
          </Button>
        </div>
        <nav className="p-4">
          <ul className="space-y-1">
            <li>
              <Button
                variant={activeSection === "dashboard" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("dashboard")}
              >
                <Home className="mr-2 h-4 w-4" />
                Dashboard
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "banners" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("banners")}
              >
                <ImageIcon className="mr-2 h-4 w-4" />
                Hero Banners
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "banners_game" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("banners_game")}
              >
                <LayoutGrid className="mr-2 h-4 w-4" />
                Game Banners
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "hot_games" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("hot_games")}
              >
                <Flame className="mr-2 h-4 w-4" />
                Hot Games
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "events" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("events")}
              >
                <Calendar className="mr-2 h-4 w-4" />
                Events
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "packages" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("packages")}
              >
                <Package className="mr-2 h-4 w-4" />
                Packages
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "transactions" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("transactions")}
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                Transactions
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "updates" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("updates")}
              >
                <Download className="mr-2 h-4 w-4" />
                Game Updates
              </Button>
            </li>
            <li>
              <Button
                variant={activeSection === "vouchers" ? "secondary" : "ghost"}
                className="w-full justify-start"
                onClick={() => setActiveSection("vouchers")}
              >
                <Ticket className="mr-2 h-4 w-4" />
                Vouchers
              </Button>
            </li>
          </ul>
        </nav>
        <div className="absolute bottom-0 left-0 right-0 border-t p-4 border-gray-100 dark:border-gray-700">
          <div className="flex items-center gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/abstract-geometric-shapes.png" alt="User" />
              <AvatarFallback>AD</AvatarFallback>
            </Avatar>
            <div>
              <p className="text-sm font-medium">Admin User</p>
              <p className="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
            </div>
          </div>
        </div>
      </div>

{/* Main Content */}
      <div className="flex-1 md:ml-64 transition-all duration-300 ease-in-out pb-16 md:pb-0">
        {/* Header */}
        <header className="sticky top-0 z-30 bg-white dark:bg-gray-800 shadow-sm">
          <div className="flex items-center justify-between px-4 py-4 md:px-6">
            <div className="flex items-center gap-3">
              <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsSidebarOpen(true)}>
                <Menu className="h-5 w-5" />
              </Button>
              <h1 className="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-200 truncate">
                {activeSection.charAt(0).toUpperCase() + activeSection.slice(1).replace("_", " ")}
              </h1>
            </div>
            <div className="flex items-center gap-4">
              <span className="text-sm text-gray-500 dark:text-gray-400 hidden sm:inline">Admin Panel</span>
              <div className="flex items-center gap-3">
                <div className="flex items-center space-x-2">
                  <Switch
                    id="dark-mode"
                    checked={theme === "dark"}
                    onCheckedChange={() => setTheme(theme === "dark" ? "light" : "dark")}
                  />
                  <Label htmlFor="dark-mode" className="hidden sm:inline">
                    Dark Mode
                  </Label>
                </div>
              </div>
            </div>
          </div>
        </header>

{/* Content */}
        <main className="p-4 md:p-6">
          {/* Flash Message */}
          {flashMessage && (
            <Alert
              variant={flashMessage.type === "success" ? "default" : "destructive"}
              className={`mb-4 ${flashMessage.type === "success" ? "bg-green-50 text-green-800 dark:bg-green-900 dark:text-green-100 border border-green-200 dark:border-green-800" : ""}`}
            >
              <AlertDescription>{flashMessage.message}</AlertDescription>
            </Alert>
          )}

{renderContent()}
        </main>
      </div>

{/* Mobile Action Bar */}
      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 p-3 flex justify-around z-30 md:hidden">
        <Button
          variant="ghost"
          size="sm"
          className="flex flex-col items-center text-xs"
          onClick={() => setActiveSection("dashboard")}
        >
          <Home className="h-5 w-5 mb-1" />
          Dashboard
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className="flex flex-col items-center text-xs"
          onClick={() => setActiveSection("hot_games")}
        >
          <Flame className="h-5 w-5 mb-1" />
          Games
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className="flex flex-col items-center text-xs"
          onClick={() => setActiveSection("packages")}
        >
          <Package className="h-5 w-5 mb-1" />
          Packages
        </Button>
        <Button
          variant="ghost"
          size="sm"
          className="flex flex-col items-center text-xs"
          onClick={() => setActiveSection("transactions")}
        >
          <RefreshCw className="h-5 w-5 mb-1" />
          Transactions
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/charts.tsx"
"use client"

import { useEffect, useRef } from "react"
import { useTheme } from "next-themes"
import { Line, Doughnut } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
  ArcElement,
  type ChartOptions,
} from "chart.js"

// Register ChartJS components
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, ArcElement)

interface Transaction {
  transaction_id: string
  game: string
  userid: string
  zoneid?: string
  title: string
  amount: number
  price: number
  original_price: number
  payment_status: string
  time: string
}

export function TransactionChart({ data }: { data: Transaction[] }) {
  const { theme } = useTheme()
  const chartRef = useRef<ChartJS>(null)

// Prepare data for transaction chart
  const transactionData: Record<string, number> = {}
  data.forEach((transaction) => {
    const date = transaction.time.split(" ")[0] // Get just the date part
    if (!transactionData[date]) {
      transactionData[date] = 0
    }
    transactionData[date]++
  })

// Sort dates
  const sortedDates = Object.keys(transactionData).sort()

// Update chart when theme changes
  useEffect(() => {
    if (chartRef.current) {
      const isDark = theme === "dark"
      const textColor = isDark ? "#f3f4f6" : "#374151"
      const gridColor = isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"

chartRef.current.options.plugins!.legend!.labels!.color = textColor
      chartRef.current.options.plugins!.title!.color = textColor
      chartRef.current.options.scales!.x!.ticks!.color = textColor
      chartRef.current.options.scales!.y!.ticks!.color = textColor
      chartRef.current.options.scales!.x!.grid!.color = gridColor
      chartRef.current.options.scales!.y!.grid!.color = gridColor
      chartRef.current.update()
    }
  }, [theme])

const isDark = theme === "dark"
  const textColor = isDark ? "#f3f4f6" : "#374151"
  const gridColor = isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"

const options: ChartOptions<"line"> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: "top",
        labels: {
          color: textColor,
        },
      },
      title: {
        display: true,
        text: "Transaction Volume",
        color: textColor,
      },
    },
    scales: {
      x: {
        grid: {
          color: gridColor,
        },
        ticks: {
          color: textColor,
        },
      },
      y: {
        beginAtZero: true,
        grid: {
          color: gridColor,
        },
        ticks: {
          color: textColor,
        },
      },
    },
  }

const chartData = {
    labels: sortedDates,
    datasets: [
      {
        label: "Transactions per Day",
        data: sortedDates.map((date) => transactionData[date]),
        backgroundColor: "rgba(67, 97, 238, 0.2)",
        borderColor: "rgba(67, 97, 238, 1)",
        borderWidth: 2,
        tension: 0.3,
        fill: true,
      },
    ],
  }

return (
    <div className="h-full w-full p-4">
      <Line ref={chartRef} options={options} data={chartData} />
    </div>
  )
}

export function StatusChart({ data }: { data: Transaction[] }) {
  const { theme } = useTheme()
  const chartRef = useRef<ChartJS>(null)

// Prepare data for status chart
  const statusData = {
    Success: 0,
    Pending: 0,
    Failed: 0,
  }

data.forEach((transaction) => {
    if (statusData[transaction.payment_status as keyof typeof statusData] !== undefined) {
      statusData[transaction.payment_status as keyof typeof statusData]++
    }
  })

// Update chart when theme changes
  useEffect(() => {
    if (chartRef.current) {
      const isDark = theme === "dark"
      const textColor = isDark ? "#f3f4f6" : "#374151"

chartRef.current.options.plugins!.legend!.labels!.color = textColor
      chartRef.current.options.plugins!.title!.color = textColor
      chartRef.current.update()
    }
  }, [theme])

const isDark = theme === "dark"
  const textColor = isDark ? "#f3f4f6" : "#374151"

const options: ChartOptions<"doughnut"> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: true,
        position: "top",
        labels: {
          color: textColor,
        },
      },
      title: {
        display: true,
        text: "Transaction Status",
        color: textColor,
      },
    },
  }

const chartData = {
    labels: ["Success", "Pending", "Failed"],
    datasets: [
      {
        data: [statusData["Success"], statusData["Pending"], statusData["Failed"]],
        backgroundColor: ["rgba(46, 204, 113, 0.8)", "rgba(243, 156, 18, 0.8)", "rgba(231, 76, 60, 0.8)"],
        borderColor: ["rgba(46, 204, 113, 1)", "rgba(243, 156, 18, 1)", "rgba(231, 76, 60, 1)"],
        borderWidth: 1,
      },
    ],
  }

return (
    <div className="h-full w-full p-4">
      <Doughnut ref={chartRef} options={options} data={chartData} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/mock-data.ts"
export const mockData = {
  banners: [
    {
      id: "BNR1",
      image: "/game-banner.png",
      alt: "Special Promotion",
      url: "#",
    },
    {
      id: "BNR2",
      image: "/mobile-game-banner.png",
      alt: "New Game Release",
      url: "#",
    },
    {
      id: "BNR3",
      image: "/game-event-banner.png",
      alt: "Limited Time Event",
      url: "#",
    },
  ],
  banners_game: [
    {
      id: "BNRG1",
      image: "/placeholder.svg?height=300&width=600&query=mobile legends banner",
      alt: "Mobile Legends",
      url: "#",
    },
    {
      id: "BNRG2",
      image: "/placeholder.svg?height=300&width=600&query=pubg mobile banner",
      alt: "PUBG Mobile",
      url: "#",
    },
  ],
  hot_games: [
    {
      id: "GAME1",
      title: "Mobile Legends",
      slug: "mobile-legends",
      image: "/placeholder.svg?height=300&width=300&query=mobile legends game",
      badge: "Popular",
      badgeColor: "red",
    },
    {
      id: "GAME2",
      title: "PUBG Mobile",
      slug: "pubg-mobile",
      image: "/placeholder.svg?height=300&width=300&query=pubg mobile game",
      badge: "Hot",
      badgeColor: "purple",
    },
    {
      id: "GAME3",
      title: "Free Fire",
      slug: "free-fire",
      image: "/placeholder.svg?height=300&width=300&query=free fire game",
      badge: "New",
      badgeColor: "green",
    },
    {
      id: "GAME4",
      title: "Call of Duty Mobile",
      slug: "cod-mobile",
      image: "/placeholder.svg?height=300&width=300&query=call of duty mobile game",
      badge: "Featured",
      badgeColor: "yellow",
    },
  ],
  events: [
    {
      id: "EVT1",
      title: "Summer Event",
      label: "Limited Time",
      image: "/placeholder.svg?height=300&width=300&query=summer game event",
      tag: "red",
      tagText: "Hot",
    },
    {
      id: "EVT2",
      title: "Anniversary Celebration",
      label: "Special Rewards",
      image: "/placeholder.svg?height=300&width=300&query=game anniversary event",
      tag: "purple",
      topup: "Double Diamonds",
    },
  ],
  packages: {
    "mobile-legends": [
      {
        id: "PKG1",
        product_id: "ML001",
        title_package: "Weekly Diamond Pass",
        diamond_amount: 100,
        img_package: "/placeholder.svg?height=100&width=100&query=diamonds",
        price: 4.99,
        original_price: 5.99,
      },
      {
        id: "PKG2",
        product_id: "ML002",
        title_package: "Monthly Diamond Pass",
        diamond_amount: 500,
        img_package: "/placeholder.svg?height=100&width=100&query=diamonds bundle",
        price: 19.99,
        original_price: 24.99,
      },
    ],
    "pubg-mobile": [
      {
        id: "PKG3",
        product_id: "PUBG001",
        title_package: "UC Small Pack",
        diamond_amount: 60,
        img_package: "/placeholder.svg?height=100&width=100&query=uc coins",
        price: 0.99,
        original_price: 0,
      },
      {
        id: "PKG4",
        product_id: "PUBG002",
        title_package: "UC Medium Pack",
        diamond_amount: 300,
        img_package: "/placeholder.svg?height=100&width=100&query=uc coins bundle",
        price: 4.99,
        original_price: 5.99,
      },
    ],
  },
  transactions: [
    {
      transaction_id: "TRX1",
      game: "Mobile Legends",
      title: "Weekly Diamond Pass",
      userid: "40270423",
      zoneid: "3445",
      amount: 100,
      price: 4.99,
      original_price: 5.99,
      payment_status: "Success",
      time: "2025-05-20 14:30:00",
    },
    {
      transaction_id: "TRX2",
      game: "PUBG Mobile",
      title: "UC Medium Pack",
      userid: "40866366",
      zoneid: "14366",
      amount: 300,
      price: 4.99,
      original_price: 5.99,
      payment_status: "Success",
      time: "2025-05-20 15:45:00",
    },
    {
      transaction_id: "TRX3",
      game: "Free Fire",
      title: "Diamond Bundle",
      userid: "7564539",
      zoneid: "9611",
      amount: 500,
      price: 9.99,
      original_price: 12.99,
      payment_status: "Pending",
      time: "2025-05-21 09:15:00",
    },
    {
      transaction_id: "TRX4",
      game: "Call of Duty Mobile",
      title: "CP Pack",
      userid: "47151807",
      zoneid: "14772",
      amount: 800,
      price: 14.99,
      original_price: 19.99,
      payment_status: "Failed",
      time: "2025-05-21 10:30:00",
    },
    {
      transaction_id: "TRX5",
      game: "Mobile Legends",
      title: "Monthly Diamond Pass",
      userid: "74003827",
      zoneid: "11242",
      amount: 500,
      price: 19.99,
      original_price: 24.99,
      payment_status: "Success",
      time: "2025-05-21 12:45:00",
    },
  ],
  updates: [
    {
      id: "UPD1",
      title: "Mobile Legends Update",
      desc: "New hero and balance changes",
      image: "/placeholder.svg?height=300&width=300&query=mobile legends update",
      badge: "New",
      badgeColor: "green",
      date: "May 15, 2025",
    },
    {
      id: "UPD2",
      title: "PUBG Mobile Patch",
      desc: "Bug fixes and performance improvements",
      image: "/placeholder.svg?height=300&width=300&query=pubg mobile update",
      badge: "Patch",
      badgeColor: "yellow",
      date: "May 18, 2025",
    },
  ],
  vouchers: [
    {
      id: "VCH1",
      code: "SUMMER25",
      discount_percent: 25,
      expires: "2025-08-31",
    },
    {
      id: "VCH2",
      code: "NEWUSER10",
      discount_percent: 10,
      expires: "2025-12-31",
    },
  ],
}
[V0_FILE]css:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
    --success: 142.1 76.2% 36.3%;
    --success-foreground: 355.7 100% 97.3%;
    --warning: 38 92.7% 50.2%;
    --warning-foreground: 355.7 100% 97.3%;
    --info: 221.2 83.2% 53.3%;
    --info-foreground: 210 40% 98%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --success: 142.1 70.6% 45.3%;
    --success-foreground: 144.9 80.4% 10%;
    --warning: 47.9 95.8% 53.1%;
    --warning-foreground: 26 83.3% 14.1%;
    --info: 217.2 91.2% 59.8%;
    --info-foreground: 222.2 47.4% 11.2%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          50: "#f0f4ff",
          100: "#dbe4ff",
          200: "#bac8ff",
          300: "#91a7ff",
          400: "#748ffc",
          500: "#4361ee",
          600: "#3a56d4",
          700: "#2f4bc0",
          800: "#2d3a8c",
          900: "#1e2a78",
          950: "#172153",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
          50: "#f5f0ff",
          100: "#ede0ff",
          200: "#dec5ff",
          300: "#c89dff",
          400: "#b16eff",
          500: "#9333ea",
          600: "#7209b7",
          700: "#6308a1",
          800: "#4e0d83",
          900: "#3b0764",
          950: "#2e0052",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        success: {
          DEFAULT: "hsl(var(--success))",
          foreground: "hsl(var(--success-foreground))",
        },
        warning: {
          DEFAULT: "hsl(var(--warning))",
          foreground: "hsl(var(--warning-foreground))",
        },
        info: {
          DEFAULT: "hsl(var(--info))",
          foreground: "hsl(var(--info-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-kZodpXGM31YV1OwpENLkB4vSYvBL4Y.png"
[V0_FILE]png:file="public/game-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-banner-ghde9DabyzDAvKsPj065BhmHxofO2S.png"
[V0_FILE]png:file="public/mobile-game-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-game-banner-zikLi3LycVBpd2xIE97BtgzHPYlTvQ.png"
[V0_FILE]png:file="public/game-event-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/game-event-banner-gMG1aEa8Fm8sPzMqxqNlHX7k9h33Vs.png"</article></body></html>