diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 44e6169..c61209d 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,21 +1,40 @@
'use client';
-import { useState, useEffect, useMemo } from 'react';
-import { Game, User, fetchGames, fetchUsers, truncateAddress } from '../utils/api';
-import Pagination from '../components/Pagination';
-import SearchInput from '../components/SearchInput';
+import { useState, useEffect } from 'react';
+import { Game, User, fetchGames, fetchUsers, getDisplayGameName } from '../utils/api';
+import Link from 'next/link';
+import { Line, Bar } from 'react-chartjs-2';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend
+} from 'chart.js';
-const ITEMS_PER_PAGE = 20;
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ BarElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
+type TimeRange = '7d' | '30d' | '90d';
export default function Dashboard() {
const [users, setUsers] = useState
([]);
const [games, setGames] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
- const [currentUserPage, setCurrentUserPage] = useState(1);
- const [currentGamePage, setCurrentGamePage] = useState(1);
- const [userSearch, setUserSearch] = useState('');
- const [gameSearch, setGameSearch] = useState('');
+ const [gameTimeRange, setGameTimeRange] = useState('30d');
useEffect(() => {
const loadData = async () => {
@@ -37,77 +56,172 @@ export default function Dashboard() {
loadData();
}, []);
- useEffect(() => {
- // Reset to first page when search changes
- setCurrentUserPage(1);
- }, [userSearch]);
+ const getDaysFromTimeRange = (range: TimeRange): number => {
+ switch (range) {
+ case '7d': return 7;
+ case '30d': return 30;
+ case '90d': return 90;
+ }
+ };
- useEffect(() => {
- // Reset to first page when search changes
- setCurrentGamePage(1);
- }, [gameSearch]);
+ const getGameCountData = () => {
+ const days = getDaysFromTimeRange(gameTimeRange);
+ const lastDays = Array.from({ length: days }, (_, i) => {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ return date.toISOString().split('T')[0];
+ }).reverse();
- const formatDate = (dateStr: string) => {
- const date = new Date(dateStr);
- return date.toLocaleString('en-US', {
- year: 'numeric',
- month: 'short',
- day: '2-digit',
- hour: '2-digit',
- minute: '2-digit'
+ const gameCounts = lastDays.map(date => {
+ return games.filter(game => {
+ try {
+ const gameDate = new Date(game.ended_time).toISOString().split('T')[0];
+ return gameDate === date;
+ } catch (err) {
+ console.error('Error parsing date:', err);
+ return false;
+ }
+ }).length;
});
+
+ return {
+ labels: lastDays.map(date => new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })),
+ datasets: [
+ {
+ label: 'Games per Day',
+ data: gameCounts,
+ borderColor: '#FFA500',
+ backgroundColor: 'rgba(255, 165, 0, 0.2)',
+ tension: 0.4,
+ fill: true
+ }
+ ]
+ };
};
- const getGameResult = (game: Game) => {
- const masterScore = parseInt(game.master_score);
- const clientScore = parseInt(game.client_score);
- if (masterScore === clientScore) return 'Draw';
- return game.winner === 'master' ? 'Master Won' : 'Client Won';
+ const getGamePopularityData = () => {
+ const gameTypes = Array.from(new Set(games.map(game => game.game)));
+ const gameCounts = gameTypes.map(type => ({
+ type,
+ displayName: getDisplayGameName(type),
+ count: games.filter(game => game.game === type).length
+ })).sort((a, b) => b.count - a.count);
+
+ return {
+ labels: gameCounts.map(game => game.displayName),
+ datasets: [
+ {
+ label: 'Games Played',
+ data: gameCounts.map(game => game.count),
+ backgroundColor: 'rgba(255, 165, 0, 0.7)',
+ borderColor: '#FFA500',
+ borderWidth: 1
+ }
+ ]
+ };
};
- // Filter and paginate users
- const filteredUsers = useMemo(() => {
- if (!userSearch) return users;
- const searchLower = userSearch.toLowerCase();
- return users.filter(user =>
- user.ref_id.toLowerCase().includes(searchLower) ||
- (user.username || '').toLowerCase().includes(searchLower) ||
- (user.active_wallet || '').toLowerCase().includes(searchLower) ||
- (user.x_profile_url || '').toLowerCase().includes(searchLower) ||
- (user.referred_id || '').toLowerCase().includes(searchLower)
- );
- }, [users, userSearch]);
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: false,
+ labels: {
+ color: '#ffffff'
+ }
+ },
+ tooltip: {
+ titleColor: '#ffffff',
+ bodyColor: '#ffffff',
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ borderColor: 'rgba(255, 255, 255, 0.1)',
+ borderWidth: 1
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ grid: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ },
+ ticks: {
+ color: '#ffffff'
+ }
+ },
+ x: {
+ grid: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ },
+ ticks: {
+ color: '#ffffff'
+ }
+ }
+ }
+ };
- // Filter and paginate games
- const filteredGames = useMemo(() => {
- if (!gameSearch) return games;
- const searchLower = gameSearch.toLowerCase();
- return games.filter(game =>
- game.ended_time.toLowerCase().includes(searchLower) ||
- game.game.toLowerCase().includes(searchLower) ||
- game.winner.toLowerCase().includes(searchLower) ||
- game.master_id.toLowerCase().includes(searchLower) ||
- game.client_id.toLowerCase().includes(searchLower) ||
- game.master_score.includes(searchLower) ||
- game.client_score.includes(searchLower) ||
- game.wager.includes(searchLower)
- );
- }, [games, gameSearch]);
+ const barChartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: false,
+ labels: {
+ color: '#ffffff'
+ }
+ },
+ tooltip: {
+ titleColor: '#ffffff',
+ bodyColor: '#ffffff',
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ borderColor: 'rgba(255, 255, 255, 0.1)',
+ borderWidth: 1
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true,
+ grid: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ },
+ ticks: {
+ color: '#ffffff'
+ }
+ },
+ x: {
+ grid: {
+ color: 'rgba(255, 255, 255, 0.1)'
+ },
+ ticks: {
+ color: '#ffffff'
+ }
+ }
+ }
+ };
- const currentUsers = filteredUsers.slice(
- (currentUserPage - 1) * ITEMS_PER_PAGE,
- currentUserPage * ITEMS_PER_PAGE
- );
-
- const currentGames = filteredGames.slice(
- (currentGamePage - 1) * ITEMS_PER_PAGE,
- currentGamePage * ITEMS_PER_PAGE
+ const TimeRangeButton = ({
+ range,
+ currentRange,
+ onChange
+ }: {
+ range: TimeRange;
+ currentRange: TimeRange;
+ onChange: (range: TimeRange) => void;
+ }) => (
+
);
if (loading) {
return (
-
Loading...
+
Loading...
- {/* Users Section */}
-
-
-
Users
-
-
-
- Total Users: {filteredUsers.length}
-
+
+ {/* Users Card */}
+
+
+
+ Users - {users.length}
+
+
+ View All →
+
-
-
-
-
- |
- Ref ID
- |
-
- Username
- |
-
- Wallet
- |
-
- X Profile
- |
-
- Referred By
- |
-
-
-
- {currentUsers.map((user) => (
-
- |
- {user.ref_id}
- |
-
- {user.username || '-'}
- |
-
- {truncateAddress(user.active_wallet) || '-'}
- |
-
- {user.x_profile_url ? (
-
- View Profile
-
- ) : '-'}
- |
-
- {user.referred_id === '-1' ? '-' : user.referred_id}
- |
-
- ))}
-
-
-
+
+ {/* Game Count Card */}
+
+
+
+ Games - {games.length}
+
+
+ View All →
+
+
+
+
+
+
+
+
+
+
- {/* Games History Section */}
-
+ {/* Game Popularity Card */}
+
-
Game History
-
-
-
- Total Games: {filteredGames.length}
-
-
+
+ Game Popularity
+
-
-
-
-
- |
- Date
- |
-
- Game
- |
-
- Winner
- |
-
- Players
- |
-
- Score
- |
-
- Result
- |
-
- Wager (SOL)
- |
-
-
-
- {currentGames.map((game) => (
-
- |
- {formatDate(game.ended_time)}
- |
-
- {game.game}
- |
-
- {game.winner}
- |
-
- Master: {truncateAddress(game.master_id)}
- Client: {truncateAddress(game.client_id)}
- |
-
- {game.master_score} - {game.client_score}
- |
-
- {getGameResult(game)}
- |
-
- {(parseInt(game.wager) / 1000000).toFixed(2)}
- |
-
- ))}
-
-
-
+
+
diff --git a/app/games/page.tsx b/app/games/page.tsx
new file mode 100644
index 0000000..a8a8c5c
--- /dev/null
+++ b/app/games/page.tsx
@@ -0,0 +1,243 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { Game, User, fetchGames, fetchUsers, truncateAddress, getDisplayGameName } from '../utils/api';
+import Pagination from '../components/Pagination';
+import SearchInput from '../components/SearchInput';
+import Modal from '../components/Modal';
+
+const ITEMS_PER_PAGE = 20;
+
+export default function Games() {
+ const [games, setGames] = useState
([]);
+ const [users, setUsers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [currentPage, setCurrentPage] = useState(1);
+ const [search, setSearch] = useState('');
+ const [selectedUser, setSelectedUser] = useState(null);
+ const [showUserModal, setShowUserModal] = useState(false);
+
+ const handlePlayerClick = (e: React.MouseEvent, playerId: string) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const user = users.find(u => u.active_wallet === playerId);
+ if (user) {
+ setSelectedUser(user);
+ setShowUserModal(true);
+ }
+ };
+
+ const getUserDisplayName = (userId: string): string => {
+ if (userId === 'na') return 'N/A';
+ const user = users.find(u => u.id === userId || u.active_wallet === userId);
+ if (user?.username) {
+ return user.username;
+ }
+ return truncateAddress(userId);
+ };
+
+ const formatDate = (dateStr: string) => {
+ const date = new Date(dateStr);
+ return date.toLocaleString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ };
+
+
+ // Filter and paginate games
+ const filteredGames = useMemo(() => {
+ if (!search) return games;
+ const searchLower = search.toLowerCase();
+ return games.filter(game =>
+ game.ended_time.toLowerCase().includes(searchLower) ||
+ game.game.toLowerCase().includes(searchLower) ||
+ game.winner.toLowerCase().includes(searchLower) ||
+ game.master_id.toLowerCase().includes(searchLower) ||
+ game.client_id.toLowerCase().includes(searchLower) ||
+ game.master_score.includes(searchLower) ||
+ game.client_score.includes(searchLower) ||
+ game.wager.includes(searchLower)
+ );
+ }, [games, search]);
+
+ const currentGames = filteredGames.slice(
+ (currentPage - 1) * ITEMS_PER_PAGE,
+ currentPage * ITEMS_PER_PAGE
+ );
+
+ useEffect(() => {
+ const loadData = async () => {
+ try {
+ const [gamesData, usersData] = await Promise.all([
+ fetchGames(),
+ fetchUsers()
+ ]);
+ setGames(gamesData);
+ setUsers(usersData);
+ } catch (err) {
+ setError('Failed to load data. Please try again later.');
+ console.error('Error loading data:', err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadData();
+ }, []);
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [search]);
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {/* User Details Modal */}
+
{
+ setShowUserModal(false);
+ setSelectedUser(null);
+ }}
+ title="User Details"
+ >
+ {selectedUser && (
+
+
+
+
Ref ID
+
{selectedUser.ref_id}
+
+
+
Username
+
{selectedUser.username || '-'}
+
+
+
Wallet Address
+
{selectedUser.active_wallet || '-'}
+
+
+
+
Referred By
+
{selectedUser.referred_id === '-1' ? '-' : selectedUser.referred_id}
+
+
+
+
+ {/* Games History Section */}
+
+
+
Game History
+
+
+
+ Total Games: {filteredGames.length}
+
+
+
+
+
+
+
+ | Date |
+ Game |
+ Winner |
+ Players |
+ Score |
+ Wager (SOL) |
+
+
+
+ {currentGames.map((game) => (
+
+ |
+ {formatDate(game.ended_time)}
+ |
+
+ {getDisplayGameName(game.game)}
+ |
+
+ {game.winner}
+ |
+
+
+ Master:
+
+
+ Client:
+
+ |
+
+ {game.master_score} - {game.client_score}
+ |
+
+
+ {(parseInt(game.wager) / 100000000).toFixed(2)}
+ |
+
+ ))}
+
+
+
+
+
+
+ {/* User Details Modal */}
+
{
+ setShowUserModal(false);
+ setSelectedUser(null);
+ }}
+ title="User Details"
+ >
+ {selectedUser && (
+
+
+
+
Ref ID
+
{selectedUser.ref_id}
+
+
+
Username
+
{selectedUser.username || '-'}
+
+
+
Wallet Address
+
{selectedUser.active_wallet || '-'}
+
+
+
+
Referred By
+
{selectedUser.referred_id === '-1' ? '-' : selectedUser.referred_id}
+
+
+
+
+ {/* Users Section */}
+
+
+
Users
+
+
+
+ Total Users: {filteredUsers.length}
+
+
+
+
+
+
+
+ | Ref ID |
+ Username |
+ Bio |
+ X Profile |
+ Referred By |
+ Active Wallet |
+
+
+
+ {currentUsers.map((user) => (
+ handlePlayerClick(e, user.active_wallet)}
+ >
+ | {user.ref_id} |
+ {user.username || '-'} |
+ {user.bio || '-'} |
+
+ {user.x_profile_url ? (
+ e.stopPropagation()}
+ >
+ {user.x_profile_url}
+
+ ) : '-'}
+ |
+
+ {user.referred_id === "-1" ? '-' : user.referred_id}
+ |
+
+ {user.active_wallet ? truncateAddress(user.active_wallet) : '-'}
+ |
+
+ ))}
+
+
+
+
+
+