SyntaxSquad/DADProject#15 fix: Merge Conflicts Fixed.
This commit is contained in:
AfonsoCMSousa
@@ -0,0 +1,752 @@
|
||||
<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>
|
||||
@@ -37,6 +37,7 @@ const lbPage = ref(1)
|
||||
const lbObserverTarget = ref(null)
|
||||
const lbObserver = ref(null)
|
||||
const lbMorePages = ref(true)
|
||||
const publicStats = ref(null)
|
||||
|
||||
const setupGamesObserver = () => {
|
||||
if (gObserver.value) gObserver.value.disconnect();
|
||||
@@ -74,6 +75,15 @@ const getPendingGames = async (mode = selectedMode.value) => {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchPublicStats = async () => {
|
||||
try {
|
||||
const response = await apiStore.getPublicStats()
|
||||
publicStats.value = response.data
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch public stats", error)
|
||||
}
|
||||
}
|
||||
|
||||
const openStats = async () => {
|
||||
showStatsModal.value = true
|
||||
statsLoading.value = true
|
||||
@@ -161,6 +171,7 @@ const toggleReady = () => {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPublicStats();
|
||||
await getPendingGames();
|
||||
await nextTick();
|
||||
setupGamesObserver();
|
||||
@@ -218,6 +229,27 @@ const joinGame = async (game) => {
|
||||
|
||||
<div class="flex flex-col justify-center items-center gap-5 pt-10 px-4">
|
||||
|
||||
<Card v-if="publicStats" class="w-full max-w-2xl border-[#a855f7] bg-[#f8f0ff] shadow-sm">
|
||||
<CardContent class="p-4">
|
||||
<div class="flex justify-around items-center">
|
||||
<div class="text-center">
|
||||
<p class="text-xs uppercase font-bold opacity-70">Players</p>
|
||||
<p class="text-xl font-black">{{ publicStats.total_players }}</p>
|
||||
</div>
|
||||
<div class="h-8 w-[1px] bg-[#a855f7]/20"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs uppercase font-bold opacity-70">Total Games</p>
|
||||
<p class="text-xl font-black">{{ publicStats.total_games }}</p>
|
||||
</div>
|
||||
<div class="h-8 w-[1px] bg-[#a855f7]/20"></div>
|
||||
<div class="text-center">
|
||||
<p class="text-xs uppercase font-bold opacity-70">Active</p>
|
||||
<p class="text-xl font-black">{{ publicStats.active_games }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="relative w-full max-w-md bg-card rounded-lg border shadow-sm overflow-hidden">
|
||||
<div class="relative h-14 flex items-center">
|
||||
|
||||
|
||||
@@ -77,12 +77,12 @@
|
||||
@click="activeTab = 'edit'">
|
||||
Edit Profile
|
||||
</button>
|
||||
<button
|
||||
<button v-if="!authStore.isAdmin"
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'transaction-history' }]"
|
||||
@click="activeTab = 'transaction-history'">
|
||||
Transaction History
|
||||
</button>
|
||||
<button
|
||||
<button v-if="!authStore.isAdmin"
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'game-history' }]"
|
||||
@click="activeTab = 'game-history'">
|
||||
Game History
|
||||
@@ -92,7 +92,7 @@
|
||||
@click="activeTab = 'password'">
|
||||
Change Password
|
||||
</button>
|
||||
<button
|
||||
<button v-if="!authStore.isAdmin"
|
||||
:class="['flex-1 p-4 bg-transparent border-none border-b-2 border-transparent cursor-pointer text-sm font-medium text-gray-600 transition-all hover:bg-gray-100 hover:text-black', { 'border-b-black text-black bg-white': activeTab === 'delete' }]"
|
||||
@click="activeTab = 'delete'">
|
||||
Delete Account
|
||||
@@ -228,7 +228,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Transaction History Tab -->
|
||||
<div v-if="activeTab === 'transaction-history'" class="p-8">
|
||||
<div v-if="activeTab === 'transaction-history' && !authStore.isAdmin" class="p-8">
|
||||
|
||||
<div class="flex flex-wrap gap-4 mb-6 items-end">
|
||||
<div class="flex flex-col gap-1">
|
||||
@@ -280,8 +280,7 @@
|
||||
{{ transaction.category }} </div>
|
||||
<div class="text-xs text-muted-foreground">
|
||||
{{ new Date(transaction.began_at).toLocaleDateString() }} •
|
||||
{{ new Date(transaction.began_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
}}
|
||||
{{ new Date(transaction.began_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -305,7 +304,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Game History Tab -->
|
||||
<div v-if="activeTab === 'game-history'" class="p-8">
|
||||
<div v-if="activeTab === 'game-history' && !authStore.isAdmin" class="p-8">
|
||||
<div class="flex flex-wrap gap-4 mb-6 items-end">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="text-xs font-medium text-muted-foreground">Variant</label>
|
||||
@@ -457,7 +456,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Delete Account Tab -->
|
||||
<div v-if="activeTab === 'delete'" class="p-8 flex flex-col items-center">
|
||||
<div v-if="activeTab === 'delete' && !authStore.isAdmin" class="p-8 flex flex-col items-center">
|
||||
<div class="max-w-lg">
|
||||
<div class="border border-red-600 bg-red-50 p-6 mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
|
||||
Reference in New Issue
Block a user