752 lines
41 KiB
Vue
752 lines
41 KiB
Vue
<template>
|
|
<div class="min-h-screen p-4 md:p-8 flex flex-col items-center font-sans text-black">
|
|
|
|
<div class="max-w-7xl w-full mb-8">
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-end gap-6 mb-8">
|
|
<div>
|
|
<h1 class="text-4xl font-black uppercase tracking-tighter">Admin Panel</h1>
|
|
<p class="text-gray-500 text-xs mt-1 uppercase tracking-[0.2em] font-bold">Platform Oversight</p>
|
|
</div>
|
|
<button @click="showCreateModal = true"
|
|
class="px-6 py-3 bg-black text-white text-xs font-bold uppercase tracking-widest hover:bg-gray-800 transition-all active:scale-95 border border-black">
|
|
+ Create Admin
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<div class="bg-white border border-gray-300 p-6 shadow-sm">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block mb-1">Total
|
|
Players</span>
|
|
<span class="text-3xl font-black">{{ stats.global_counters?.total_players ?? 'Loading' }}</span>
|
|
</div>
|
|
|
|
<div class="bg-white border border-gray-300 p-6 shadow-sm">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block mb-1">Active
|
|
Games</span>
|
|
<span class="text-3xl font-black">{{ stats.global_counters?.active_games ?? 'Loading' }}</span>
|
|
</div>
|
|
|
|
<div @click="openChart('games')"
|
|
class="bg-white border border-gray-300 p-6 shadow-sm cursor-pointer hover:border-black transition-colors group">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 mb-1">Total
|
|
Games</span>
|
|
<svg class="w-4 h-4 text-gray-300 group-hover:text-black" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path d="M7 12l5 5L22 7"></path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-3xl font-black">{{ stats.global_counters?.total_games ?? 'Loading' }}</span>
|
|
<span
|
|
class="block text-[10px] mt-2 underline opacity-0 group-hover:opacity-100 transition-opacity">View
|
|
Volume Chart</span>
|
|
</div>
|
|
|
|
<div @click="openChart('revenue')"
|
|
class="bg-black text-white p-6 shadow-lg cursor-pointer hover:bg-gray-900 transition-colors group">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest opacity-60 mb-1">Estimated
|
|
Revenue</span>
|
|
<svg class="w-4 h-4 opacity-40 group-hover:opacity-100" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
<span class="text-3xl font-black">€ {{ (stats.global_counters?.total_coins_purchased /
|
|
10).toLocaleString() ?? 'Loading' }}</span>
|
|
<span
|
|
class="block text-[10px] mt-2 underline opacity-60 group-hover:opacity-100 transition-opacity">View
|
|
Purchase History</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="activeChart"
|
|
class="fixed inset-0 bg-black/80 backdrop-blur-md z-[60] flex items-center justify-center p-4"
|
|
@click.self="activeChart = null">
|
|
<div class="bg-white border border-gray-300 w-full max-w-5xl overflow-hidden shadow-2xl">
|
|
|
|
<div class="p-6 border-b border-gray-300 flex justify-between items-center bg-white">
|
|
<div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tighter">
|
|
{{ activeChart === 'games' ? 'Games Volume' : 'Purchases History' }}
|
|
</h3>
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-[0.2em]">Last 12 Months
|
|
Activity</p>
|
|
</div>
|
|
<button @click="activeChart = null"
|
|
class="w-12 h-12 flex items-center justify-center border border-black hover:bg-black hover:text-white transition-all group">
|
|
<span class="text-xl group-hover:rotate-90 transition-transform">✕</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-12 min-h-[400px] flex flex-col justify-end">
|
|
|
|
<div v-if="chartData.length > 0" class="flex items-end gap-3 h-64 w-full">
|
|
<div v-for="(data, index) in chartData" :key="data.month"
|
|
class="flex-1 flex flex-col items-center group relative h-full justify-end">
|
|
|
|
<div
|
|
class="absolute -top-12 bg-black text-white text-[10px] py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10 font-bold">
|
|
{{ data.total || data.total_coins }}
|
|
<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-black rotate-45">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full bg-black hover:bg-gray-700 transition-all ease-out" :style="{
|
|
height: showBars ? `${calculateHeight(data.total || data.total_coins)}%` : '0%',
|
|
transitionDelay: `${index * 50}ms`,
|
|
transitionDuration: '800ms'
|
|
}"></div>
|
|
|
|
<div class="h-8 flex items-center">
|
|
<span class="text-[9px] font-black uppercase text-gray-400">
|
|
{{ formatMonth(data.month) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else
|
|
class="h-64 flex flex-col items-center justify-center text-gray-400 border-2 border-dashed border-gray-100">
|
|
<p class="text-xs font-bold uppercase tracking-widest">No data available for this period</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-8 border-t border-gray-300 flex justify-between items-center">
|
|
<div class="flex gap-12">
|
|
<div v-if="activeChart === 'games'" v-for="gt in stats.charts.games_by_type" :key="gt.type">
|
|
<span class="text-[10px] font-bold uppercase text-gray-400 block tracking-widest">Bisca {{
|
|
gt.type }}</span>
|
|
<span class="text-2xl font-black">{{ gt.total.toLocaleString() }}</span>
|
|
</div>
|
|
<div v-if="activeChart === 'revenue'">
|
|
<span class="text-[10px] font-bold uppercase text-gray-400 block tracking-widest">Total
|
|
Period Volume</span>
|
|
<span class="text-2xl font-black">{{
|
|
stats.global_counters.total_coins_purchased.toLocaleString() }} Coins</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-[10px] font-bold text-gray-400 uppercase italic">
|
|
* Admin Full-Access View
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white border border-gray-300 shadow-2xl max-w-7xl w-full overflow-hidden">
|
|
<div class="flex border-b border-gray-300 bg-gray-50 overflow-x-auto scrollbar-hide">
|
|
<button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" :class="[
|
|
'flex-1 min-w-[150px] p-5 text-xs font-bold uppercase tracking-widest transition-all outline-none',
|
|
activeTab === tab.id
|
|
? 'bg-white border-b-2 border-black text-black'
|
|
: 'text-gray-400 hover:text-black hover:bg-gray-100 border-b-2 border-transparent'
|
|
]">
|
|
{{ tab.name }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="min-h-[400px]">
|
|
<div v-if="activeTab === 'users'" class="animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
<div class="overflow-x-auto">
|
|
<div id="table-scroll-container"
|
|
class="overflow-y-auto h-[500px] scrollbar-thin scrollbar-thumb-black">
|
|
<table class="w-full text-left border-collapse sticky-header">
|
|
<thead class="bg-gray-50 border-b border-gray-300">
|
|
<tr>
|
|
<th
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Name</th>
|
|
<th
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Coins</th>
|
|
<th @click="handleSort('type')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Role
|
|
<span class="ml-1">
|
|
<template v-if="filters.type === 'A'"> (Admins)</template>
|
|
<template v-else-if="filters.type === 'P'"> (Players)</template>
|
|
<template v-else> ↕</template>
|
|
</span>
|
|
</th>
|
|
|
|
<th @click="handleSort('blocked')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Status
|
|
<span class="ml-1">
|
|
<template v-if="filters.blocked === true"> (Blocked)</template>
|
|
<template v-else-if="filters.blocked === false"> (Active)</template>
|
|
<template v-else> ↕</template>
|
|
</span>
|
|
</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<template v-if="filteredUsers.length > 0">
|
|
<tr v-for="user in filteredUsers" :key="user.id"
|
|
class="hover:bg-gray-50/80 transition-colors">
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-black text-white flex items-center justify-center font-bold text-sm border-2 border-black">
|
|
{{ user.name.charAt(0) }}
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-bold">{{ user.name }}</div>
|
|
<div v-if="user.nickname"
|
|
class="text-xs text-gray-500 font-mono">@{{ user.nickname
|
|
}}</div>
|
|
<div class="text-xs text-gray-500 font-mono">{{ user.email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<div v-if="user.coins_balance" class="flex items-center gap-2">
|
|
<div
|
|
class="flex items-center justify-center w-5 h-5 bg-purple-400 rounded-full shadow-sm">
|
|
<span class="text-[10px] font-bold text-purple-900">$</span>
|
|
</div>
|
|
<span class="text-[10px] uppercase font-bold tracking-tight">{{
|
|
user.coins_balance }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<span :class="[
|
|
'px-2 py-1 text-[10px] font-bold border',
|
|
user.type === 'A' ? 'bg-black text-white border-black' : 'bg-white text-gray-600 border-gray-300'
|
|
]">
|
|
{{ user.type === 'A' ? 'ADMIN' : 'PLAYER' }}
|
|
</span>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
:class="['w-2 h-2 rounded-full', user.blocked ? 'bg-red-600' : 'bg-green-500']">
|
|
</div>
|
|
<span class="text-[10px] uppercase font-bold tracking-tight">{{
|
|
user.blocked
|
|
? 'Blocked' : 'Active' }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="p-4 text-right">
|
|
<div v-if="user.type != 'A'" class="space-x-2 flex justify-end">
|
|
<button @click="toggleBlock(user)"
|
|
class="text-[10px] font-bold uppercase tracking-tighter border-2 border-black px-3 py-1 hover:bg-black hover:text-white transition-all">{{
|
|
user.blocked ? 'Unblock' : 'Block' }}</button>
|
|
<button @click=" confirmDelete(user)"
|
|
class="text-[10px] font-bold uppercase tracking-tighter bg-red-600 text-white border-2 border-red-600 px-3 py-1 hover:bg-red-700 transition-all">Remove</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-else-if="!isLoading">
|
|
<td colspan="3"
|
|
class="p-12 text-center text-gray-400 uppercase text-xs font-bold tracking-widest">
|
|
No users found
|
|
</td>
|
|
</tr>
|
|
<tr ref="loadMoreTrigger">
|
|
<td colspan="4" class="p-4 text-center">
|
|
<span v-if="isLoading"
|
|
class="text-[10px] font-bold uppercase animate-pulse">Loading
|
|
more...</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="activeTab === 'transactions'"
|
|
class="animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
<div class="overflow-x-auto">
|
|
<div id="table-scroll-container"
|
|
class="overflow-y-auto h-[500px] scrollbar-thin scrollbar-thumb-black">
|
|
<table class="w-full text-left border-collapse sticky-header">
|
|
<thead class="bg-gray-50 border-b border-gray-300">
|
|
<tr>
|
|
<th @click="handleSort('datetime')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Date Time
|
|
<span>{{ filters.sort_datetime === 'desc' ? ' ↓' : ' ↑' }}</span>
|
|
</th>
|
|
<th class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
User
|
|
</th>
|
|
<th class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
Transaction type
|
|
</th>
|
|
<th @click="handleSort('coins')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Coins
|
|
<span v-if="filters.sort_coins">
|
|
{{ filters.sort_coins === 'desc' ? ' ↓' : '↑' }}</span>
|
|
<span v-else> ↕</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<template v-if="transactions.length > 0">
|
|
<tr v-for="tx in transactions" :key="tx.id"
|
|
class="hover:bg-gray-50/80 transition-colors">
|
|
<td class="p-4 text-xs font-mono text-gray-600">
|
|
{{ new Date(tx.transaction_datetime).toLocaleDateString() }} •
|
|
{{ new Date(tx.transaction_datetime).toLocaleTimeString([], {
|
|
hour:
|
|
'2-digit', minute: '2-digit'
|
|
}) }}
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="text-sm font-bold">{{ tx.user?.nickname || 'Guest' }}</div>
|
|
<div class="text-[10px] text-gray-500 font-mono">{{ tx.user?.email }}
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="px-2 py-1 bg-gray-100 border border-gray-300 text-[9px] font-black uppercase tracking-tighter text-gray-500 min-w-[80px] text-center">
|
|
{{ tx.type?.name || 'Manual' }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="inline-flex items-center gap-2">
|
|
<span :class="[
|
|
'text-sm font-black tracking-tighter',
|
|
tx.coins >= 0 ? 'text-green-400' : 'text-red-400'
|
|
]">
|
|
{{ tx.coins > 0 ? '+' : '' }}{{ tx.coins.toLocaleString() }}
|
|
</span>
|
|
|
|
<span
|
|
class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Coins</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-else-if="!isLoading">
|
|
<td colspan="3"
|
|
class="w-1 p-12 text-center text-gray-400 uppercase text-xs font-bold tracking-widest">
|
|
No transactions found
|
|
</td>
|
|
</tr>
|
|
<tr ref="loadMoreTrigger">
|
|
<td colspan="4" class="p-4 text-center">
|
|
<span v-if="isLoading"
|
|
class="text-[10px] font-bold uppercase animate-pulse">Loading
|
|
more...</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="activeTab === 'games'" class="animate-in fade-in slide-in-from-bottom-2 duration-300">
|
|
<div class="overflow-x-auto">
|
|
<div id="table-scroll-container"
|
|
class="overflow-y-auto h-[500px] scrollbar-thin scrollbar-thumb-black">
|
|
<table class="w-full text-left border-collapse sticky-header">
|
|
<thead class="bg-gray-50 border-b border-gray-300">
|
|
<tr>
|
|
<th @click="handleSort('date')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Timeline
|
|
<span>{{ filters.game_sort_date === 'desc' ? ' ↓' : ' ↑' }}</span>
|
|
</th>
|
|
<th class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
Player 1</th>
|
|
<th class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
Player 2</th>
|
|
<th class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500">
|
|
Result</th>
|
|
<th @click="handleSort('type')"
|
|
class="p-4 text-[10px] font-bold uppercase tracking-widest text-gray-500 cursor-pointer hover:text-black transition-colors">
|
|
Variant
|
|
<span v-if="filters.game_filter_type"> (Bisca {{ filters.game_filter_type
|
|
}})</span>
|
|
<span v-else> ↕</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<template v-if="games.length > 0">
|
|
<tr v-for="game in games" :key="game.id"
|
|
class="hover:bg-gray-50/80 transition-colors">
|
|
<td class="p-4">
|
|
<div class="text-[10px] font-mono text-black font-bold">
|
|
{{ new Date(game.began_at).toLocaleDateString() }}</div>
|
|
<div class="text-[10px] font-mono text-gray-400 italic">
|
|
{{ new Date(game.began_at).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}) }} •
|
|
{{ new Date(game.ended_at).toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}) }}
|
|
</div>
|
|
</td>
|
|
|
|
<td class="p-4">
|
|
<div class="text-sm font-bold text-black">{{ game.player1?.nickname }}
|
|
</div>
|
|
<div
|
|
class="text-[10px] font-black text-gray-400 uppercase tracking-tighter">
|
|
{{ game.player1_points }} Points
|
|
</div>
|
|
</td>
|
|
|
|
<td class="p-4">
|
|
<div class="text-sm font-bold text-black">{{ game.player2?.nickname }}
|
|
</div>
|
|
<div
|
|
class="text-[10px] font-black text-gray-400 uppercase tracking-tighter">
|
|
{{ game.player2_points }} Points
|
|
</div>
|
|
</td>
|
|
|
|
<td class="p-4">
|
|
<div v-if="game.is_draw" class="text-xs font-bold text-gray-400">— Draw
|
|
—</div>
|
|
<div v-else class="flex flex-col">
|
|
<span
|
|
class="text-[9px] font-bold uppercase text-gray-400 tracking-widest mb-0.5">Winner</span>
|
|
<span
|
|
class="text-xs font-black bg-black text-white px-2 py-0.5 w-fit uppercase tracking-tighter">
|
|
{{ game.winner_user_id === game.player1_user_id ?
|
|
game.player1?.nickname : game.player2?.nickname }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="p-4">
|
|
<div
|
|
class="px-2 py-1 bg-gray-100 border border-gray-300 text-[10px] font-black text-center w-20">
|
|
BISCA {{ game.type }}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr ref="loadMoreTrigger">
|
|
<td colspan="5" class="p-8 text-center border-none">
|
|
<div v-if="isLoading" class="flex flex-col items-center gap-2">
|
|
<div
|
|
class="w-5 h-5 border-2 border-black border-t-transparent rounded-full animate-spin">
|
|
</div>
|
|
<span
|
|
class="text-[10px] font-black uppercase tracking-[0.2em]">Retrieving
|
|
match data...</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr v-else-if="!isLoading">
|
|
<td colspan="5"
|
|
class="p-12 text-center text-gray-400 uppercase text-xs font-bold tracking-widest border-none">
|
|
No match history found
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="p-12 text-center animate-in fade-in duration-500">
|
|
<svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
|
|
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<h2 class="text-sm font-bold uppercase tracking-widest text-gray-400">Detailed logs for {{ activeTab
|
|
}} pending API</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="showCreateModal"
|
|
class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
|
<div class="bg-white border border-gray-300 w-full max-w-md shadow-2xl animate-in zoom-in-95 duration-200">
|
|
<div class="p-6 border-b border-gray-300 bg-black text-white">
|
|
<h3 class="text-xl font-black uppercase tracking-tighter">New Admin</h3>
|
|
</div>
|
|
<form @submit.prevent="handleSubmitAdmin" class="p-6 space-y-4">
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase text-gray-500 mb-1">Full Name</label>
|
|
<input v-model="adminForm.name" type="text" required
|
|
class="w-full border border-gray-300 p-3 text-sm focus:border-black outline-none transition-colors" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-[10px] font-bold uppercase text-gray-500 mb-1">Email Address</label>
|
|
<input v-model="adminForm.email" type="email" required
|
|
class="w-full border border-gray-300 p-3 text-sm focus:border-black outline-none transition-colors" />
|
|
</div>
|
|
<div class="flex gap-3 pt-4">
|
|
<button type="button" @click="showCreateModal = false"
|
|
class="flex-1 px-4 py-3 border border-gray-300 font-bold uppercase text-xs hover:bg-gray-50 transition-all">Cancel</button>
|
|
<button type="submit"
|
|
class="flex-1 px-4 py-3 bg-black text-white font-bold uppercase text-xs hover:bg-gray-800 transition-all">Create
|
|
Account</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
|
|
import { useAPIStore } from '@/stores/api'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { toast } from 'vue-sonner'
|
|
|
|
const activeTab = ref('users')
|
|
const showCreateModal = ref(false)
|
|
const activeChart = ref(null)
|
|
const showBars = ref(false)
|
|
const stats = ref({})
|
|
const users = ref([])
|
|
const transactions = ref([])
|
|
const games = ref([])
|
|
const isLoading = ref(false)
|
|
const loadMoreTrigger = ref(null)
|
|
|
|
const apiStore = useAPIStore()
|
|
|
|
const pagination = reactive({
|
|
users: { page: 1, lastPage: 1 },
|
|
transactions: { page: 1, lastPage: 1 },
|
|
games: { page: 1, lastPage: 1 }
|
|
})
|
|
|
|
const filters = reactive({
|
|
type: null,
|
|
blocked: null,
|
|
sort_datetime: 'desc',
|
|
sort_coins: null,
|
|
game_sort_direction: 'desc',
|
|
game_type: null
|
|
})
|
|
|
|
watch(activeTab, async () => {
|
|
resetPagination();
|
|
await fetchData();
|
|
await nextTick();
|
|
setupObserver();
|
|
});
|
|
|
|
const tabs = [
|
|
{ id: 'users', name: 'User Management' },
|
|
{ id: 'transactions', name: 'Transactions' },
|
|
{ id: 'games', name: 'Games History' }
|
|
]
|
|
|
|
const chartData = computed(() => {
|
|
if (!stats.value) return []
|
|
if (activeChart.value === 'games') return [...stats.value.charts.games_per_month].reverse()
|
|
if (activeChart.value === 'revenue') return [...stats.value.charts.purchases_per_month].reverse()
|
|
return []
|
|
})
|
|
|
|
const openChart = (type) => {
|
|
activeChart.value = type
|
|
showBars.value = false
|
|
|
|
setTimeout(() => {
|
|
showBars.value = true
|
|
}, 50);
|
|
}
|
|
|
|
const calculateHeight = (value) => {
|
|
const max = Math.max(...chartData.value.map(d => d.total || d.total_coins))
|
|
return (value / max) * 100
|
|
}
|
|
|
|
const formatMonth = (monthStr) => {
|
|
const [_, month] = monthStr.split('-')
|
|
const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
|
|
return months[parseInt(month) - 1]
|
|
}
|
|
|
|
const adminForm = reactive({ name: '', nickname: '', email: '' })
|
|
|
|
const toggleBlock = (user) => {
|
|
user.blocked == false ? apiStore.blockUser(user) : apiStore.unblockUser(user)
|
|
user.blocked = !user.blocked
|
|
}
|
|
|
|
const confirmDelete = (user) => {
|
|
if (confirm(`Remove ${user.name}? This action follows platform rules for ${user.type === 'P' ? 'soft-deletion' : 'permanent removal'}.`)) {
|
|
apiStore.deleteUser(user)
|
|
users.value = users.value.filter(u => u.id !== user.id)
|
|
}
|
|
}
|
|
|
|
const handleSubmitAdmin = () => {
|
|
adminForm.type = 'A'
|
|
adminForm.password = '123'
|
|
adminForm.blocked = false
|
|
|
|
const promise = apiStore.postAdmin(adminForm)
|
|
toast.promise(promise, {
|
|
loading: 'Calling API',
|
|
success: () => {
|
|
return `Admin created with success`
|
|
},
|
|
error: (error) =>
|
|
error.response?.data?.message
|
|
})
|
|
|
|
showCreateModal.value = false
|
|
adminForm.name = ''; adminForm.email = '';
|
|
}
|
|
|
|
const resetPagination = () => {
|
|
pagination[activeTab.value].page = 1
|
|
if (activeTab.value === 'users') users.value = []
|
|
if (activeTab.value === 'transactions') transactions.value = []
|
|
if (activeTab.value === 'games') games.value = []
|
|
}
|
|
|
|
const filteredUsers = computed(() => {
|
|
return users.value.filter(user => user.id !== useAuthStore().currentUserID);
|
|
});
|
|
|
|
const fetchData = async () => {
|
|
if (isLoading.value) return
|
|
const currentTab = activeTab.value
|
|
if (pagination[currentTab].page > pagination[currentTab].lastPage && pagination[currentTab].page !== 1) return
|
|
|
|
isLoading.value = true
|
|
try {
|
|
let response
|
|
if (currentTab === 'users') {
|
|
const params = { page: pagination[currentTab].page, type: filters.type, blocked: filters.blocked };
|
|
response = await apiStore.getAdminUsers(params);
|
|
users.value.push(...response.data.data);
|
|
}
|
|
else if (currentTab === 'transactions') {
|
|
const params = {
|
|
page: pagination[currentTab].page,
|
|
sort_datetime: filters.sort_datetime,
|
|
sort_coins: filters.sort_coins
|
|
};
|
|
response = await apiStore.getAdminTransactions(params);
|
|
transactions.value.push(...response.data.data);
|
|
}
|
|
else if (currentTab === 'games') {
|
|
const params = {
|
|
page: pagination[currentTab].page,
|
|
sort_direction: filters.game_sort_direction,
|
|
type: filters.game_type
|
|
};
|
|
response = await apiStore.getAdminGames(params);
|
|
games.value.push(...response.data.data);
|
|
}
|
|
|
|
|
|
pagination[currentTab].lastPage = response.data.last_page
|
|
pagination[currentTab].page++
|
|
} catch (error) {
|
|
console.error("Fetch failed", error)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSort = async (column) => {
|
|
if (activeTab.value === 'users') {
|
|
if (column === 'type') {
|
|
filters.type = filters.type === null ? 'A' : (filters.type === 'A' ? 'P' : null);
|
|
} else if (column === 'blocked') {
|
|
filters.blocked = filters.blocked === null ? true : (filters.blocked === true ? false : null);
|
|
}
|
|
}
|
|
|
|
else if (activeTab.value === 'transactions') {
|
|
if (column === 'datetime') {
|
|
filters.sort_datetime = filters.sort_datetime === 'desc' ? 'asc' : 'desc';
|
|
} else if (column === 'coins') {
|
|
if (filters.sort_coins === null) filters.sort_coins = 'desc';
|
|
else if (filters.sort_coins === 'desc') filters.sort_coins = 'asc';
|
|
else filters.sort_coins = null;
|
|
}
|
|
}
|
|
|
|
else if (activeTab.value === 'games') {
|
|
if (column === 'date') {
|
|
filters.game_sort_direction = filters.game_sort_direction === 'desc' ? 'asc' : 'desc';
|
|
} else if (column === 'type') {
|
|
if (filters.game_type === null) filters.game_type = '9';
|
|
else if (filters.game_type === '9') filters.game_type = '3';
|
|
else filters.game_type = null;
|
|
}
|
|
}
|
|
|
|
resetPagination();
|
|
await fetchData();
|
|
await nextTick();
|
|
setupObserver();
|
|
};
|
|
|
|
const setupObserver = () => {
|
|
if (window.adminTableObserver) window.adminTableObserver.disconnect();
|
|
|
|
const container = document.querySelector('#table-scroll-container');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
const currentTab = activeTab.value;
|
|
const hasMore = pagination[currentTab].page <= pagination[currentTab].lastPage;
|
|
|
|
if (entries[0].isIntersecting && !isLoading.value && hasMore) {
|
|
fetchData();
|
|
}
|
|
}, {
|
|
root: container,
|
|
threshold: 0.1,
|
|
rootMargin: '100px'
|
|
});
|
|
|
|
if (loadMoreTrigger.value) {
|
|
observer.observe(loadMoreTrigger.value);
|
|
window.adminTableObserver = observer;
|
|
}
|
|
};
|
|
|
|
onMounted(async () => {
|
|
const statsResponse = await apiStore.getAdminStats()
|
|
const globalResponse = await apiStore.getPublicStats()
|
|
stats.value = statsResponse.data
|
|
stats.value.global_counters.active_games = globalResponse.data.active_games
|
|
|
|
await fetchData()
|
|
await nextTick()
|
|
setupObserver()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sticky-header thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: #f9fafb;
|
|
box-shadow: inset 0 -1px 0 #d1d5db;
|
|
}
|
|
|
|
#table-scroll-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#table-scroll-container::-webkit-scrollbar-thumb {
|
|
background-color: black;
|
|
}
|
|
|
|
#table-scroll-container::-webkit-scrollbar-track {
|
|
background-color: #f3f4f6;
|
|
}
|
|
</style> |