971 lines
32 KiB
Vue
971 lines
32 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-surface py-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-white mb-2">Transaction History</h1>
|
|
<p class="text-text-secondary">
|
|
View all your deposits, withdrawals, purchases, and sales
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pending Trades Section -->
|
|
<div v-if="pendingTrades.length > 0" class="mb-6">
|
|
<h2 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
|
|
<Clock class="w-5 h-5 text-yellow-400" />
|
|
Pending Trades
|
|
</h2>
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="trade in pendingTrades"
|
|
:key="trade._id"
|
|
class="bg-surface-light rounded-lg border border-yellow-400/30 p-4"
|
|
>
|
|
<div class="flex items-center justify-between flex-wrap gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
|
|
></div>
|
|
<span class="text-white font-medium">
|
|
Selling {{ trade.items?.length || 0 }} item(s)
|
|
</span>
|
|
</div>
|
|
<div class="h-6 w-px bg-surface-lighter"></div>
|
|
<div class="text-text-secondary text-sm">
|
|
Code:
|
|
<span class="text-primary font-mono font-bold">{{
|
|
trade.verificationCode
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-white font-semibold">
|
|
{{ formatCurrency(trade.totalValue || 0) }}
|
|
</div>
|
|
<a
|
|
v-if="trade.tradeOfferUrl"
|
|
:href="trade.tradeOfferUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="px-4 py-2 bg-primary hover:bg-primary-dark text-surface-dark font-medium rounded-lg transition-colors text-sm flex items-center gap-1"
|
|
>
|
|
<ExternalLink class="w-4 h-4" />
|
|
Open
|
|
</a>
|
|
<button
|
|
@click="viewTradeDetails(trade)"
|
|
class="px-4 py-2 bg-primary/20 hover:bg-primary/30 text-primary rounded-lg transition-colors text-sm"
|
|
>
|
|
Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div
|
|
class="bg-surface-light rounded-lg border border-surface-lighter p-6 mb-6"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-text-secondary mb-2">
|
|
Type
|
|
</label>
|
|
<select
|
|
v-model="filters.type"
|
|
class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
>
|
|
<option value="">All Types</option>
|
|
<option value="deposit">Deposits</option>
|
|
<option value="withdrawal">Withdrawals</option>
|
|
<option value="purchase">Purchases</option>
|
|
<option value="sale">Sales</option>
|
|
<option value="trade">Trades</option>
|
|
<option value="bonus">Bonuses</option>
|
|
<option value="refund">Refunds</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-text-secondary mb-2">
|
|
Status
|
|
</label>
|
|
<select
|
|
v-model="filters.status"
|
|
class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
>
|
|
<option value="">All Status</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="processing">Processing</option>
|
|
<option value="failed">Failed</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-text-secondary mb-2">
|
|
Date Range
|
|
</label>
|
|
<select
|
|
v-model="filters.dateRange"
|
|
class="w-full px-4 py-2 bg-surface rounded-lg border border-surface-lighter text-text-primary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
>
|
|
<option value="all">All Time</option>
|
|
<option value="today">Today</option>
|
|
<option value="week">Last 7 Days</option>
|
|
<option value="month">Last 30 Days</option>
|
|
<option value="year">Last Year</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Summary -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div
|
|
class="bg-surface-light rounded-lg border border-surface-lighter p-4"
|
|
>
|
|
<div class="text-sm text-text-secondary mb-1">Total Deposits</div>
|
|
<div class="text-2xl font-bold text-success">
|
|
{{ formatCurrency(stats.totalDeposits) }}
|
|
</div>
|
|
<div class="text-xs text-text-secondary mt-1">
|
|
{{ stats.depositCount }} transactions
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-surface-light rounded-lg border border-surface-lighter p-4"
|
|
>
|
|
<div class="text-sm text-text-secondary mb-1">Total Withdrawals</div>
|
|
<div class="text-2xl font-bold text-danger">
|
|
{{ formatCurrency(stats.totalWithdrawals) }}
|
|
</div>
|
|
<div class="text-xs text-text-secondary mt-1">
|
|
{{ stats.withdrawalCount }} transactions
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-surface-light rounded-lg border border-surface-lighter p-4"
|
|
>
|
|
<div class="text-sm text-text-secondary mb-1">Total Spent</div>
|
|
<div class="text-2xl font-bold text-warning">
|
|
{{ formatCurrency(stats.totalPurchases) }}
|
|
</div>
|
|
<div class="text-xs text-text-secondary mt-1">
|
|
{{ stats.purchaseCount }} purchases
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="bg-surface-light rounded-lg border border-surface-lighter p-4"
|
|
>
|
|
<div class="text-sm text-text-secondary mb-1">Total Earned</div>
|
|
<div class="text-2xl font-bold text-success">
|
|
{{ formatCurrency(stats.totalSales) }}
|
|
</div>
|
|
<div class="text-xs text-text-secondary mt-1">
|
|
{{ stats.saleCount }} sales
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transactions List -->
|
|
<div class="bg-surface-light rounded-lg border border-surface-lighter">
|
|
<div class="p-6 border-b border-surface-lighter">
|
|
<h2 class="text-xl font-bold text-white flex items-center gap-2">
|
|
<History class="w-6 h-6 text-primary" />
|
|
Transactions
|
|
</h2>
|
|
</div>
|
|
|
|
<div v-if="loading" class="text-center py-12">
|
|
<Loader class="w-8 h-8 animate-spin mx-auto text-primary" />
|
|
<p class="text-text-secondary mt-4">Loading transactions...</p>
|
|
</div>
|
|
|
|
<div
|
|
v-else-if="filteredTransactions.length === 0"
|
|
class="text-center py-12"
|
|
>
|
|
<History class="w-16 h-16 text-text-secondary/50 mx-auto mb-4" />
|
|
<h3 class="text-xl font-semibold text-text-secondary mb-2">
|
|
No transactions found
|
|
</h3>
|
|
<p class="text-text-secondary">
|
|
{{
|
|
filters.type || filters.status
|
|
? "Try changing your filters"
|
|
: "Your transaction history will appear here"
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="divide-y divide-surface-lighter">
|
|
<div
|
|
v-for="transaction in paginatedTransactions"
|
|
:key="transaction.id"
|
|
class="p-6 hover:bg-surface/50 transition-colors"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<!-- Left side: Icon/Image, Type, Description -->
|
|
<div class="flex items-start gap-4 flex-1 min-w-0">
|
|
<!-- Item Image (for purchases/sales) or Icon (for other types) -->
|
|
<div
|
|
v-if="
|
|
transaction.itemImage &&
|
|
(transaction.type === 'purchase' ||
|
|
transaction.type === 'sale')
|
|
"
|
|
class="flex-shrink-0"
|
|
>
|
|
<img
|
|
:src="transaction.itemImage"
|
|
:alt="transaction.itemName"
|
|
class="w-16 h-16 rounded-lg object-cover border-2 border-surface-lighter"
|
|
@error="$event.target.style.display = 'none'"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Icon (for non-item transactions) -->
|
|
<div
|
|
v-else
|
|
:class="[
|
|
'p-3 rounded-lg flex-shrink-0',
|
|
getTransactionIconBg(transaction.type),
|
|
]"
|
|
>
|
|
<component
|
|
:is="getTransactionIcon(transaction.type)"
|
|
:class="[
|
|
'w-6 h-6',
|
|
getTransactionIconColor(transaction.type),
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Details -->
|
|
<div class="flex-1 min-w-0">
|
|
<!-- Title and Status -->
|
|
<div class="flex items-center gap-2 flex-wrap mb-1">
|
|
<h3 class="text-white font-semibold">
|
|
{{ getTransactionTitle(transaction) }}
|
|
</h3>
|
|
<span
|
|
:class="[
|
|
'text-xs px-2 py-0.5 rounded-full font-medium',
|
|
getStatusClass(transaction.status),
|
|
]"
|
|
>
|
|
{{ transaction.status }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="text-sm text-text-secondary mb-2">
|
|
{{
|
|
transaction.description ||
|
|
getTransactionDescription(transaction)
|
|
}}
|
|
</p>
|
|
|
|
<!-- Meta Information -->
|
|
<div
|
|
class="flex flex-wrap items-center gap-3 text-xs text-text-secondary"
|
|
>
|
|
<span class="flex items-center gap-1">
|
|
<Calendar class="w-3 h-3" />
|
|
{{ formatDate(transaction.createdAt) }}
|
|
</span>
|
|
<span
|
|
v-if="transaction.sessionIdShort"
|
|
class="flex items-center gap-1"
|
|
>
|
|
<Monitor class="w-3 h-3" />
|
|
Session:
|
|
<span
|
|
:style="{
|
|
backgroundColor: getSessionColor(
|
|
transaction.sessionIdShort
|
|
),
|
|
}"
|
|
class="px-2 py-0.5 rounded text-white font-mono text-[10px]"
|
|
:title="`Session ID: ${transaction.sessionIdShort}`"
|
|
>
|
|
{{ transaction.sessionIdShort }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side: Amount -->
|
|
<div class="text-right flex-shrink-0">
|
|
<div
|
|
:class="[
|
|
'text-xl font-bold',
|
|
transaction.direction === '+'
|
|
? 'text-success'
|
|
: 'text-danger',
|
|
]"
|
|
>
|
|
{{ transaction.direction
|
|
}}{{ formatCurrency(transaction.amount) }}
|
|
</div>
|
|
<div
|
|
v-if="transaction.fee > 0"
|
|
class="text-xs text-text-secondary mt-1"
|
|
>
|
|
Fee: {{ formatCurrency(transaction.fee) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Details (expandable) -->
|
|
<div
|
|
v-if="expandedTransaction === transaction.id"
|
|
class="mt-4 pt-4 border-t border-surface-lighter"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-text-secondary">Transaction ID:</span>
|
|
<span class="text-white ml-2 font-mono text-xs">{{
|
|
transaction.id
|
|
}}</span>
|
|
</div>
|
|
<div v-if="transaction.balanceBefore !== undefined">
|
|
<span class="text-text-secondary">Balance Before:</span>
|
|
<span class="text-white ml-2">{{
|
|
formatCurrency(transaction.balanceBefore)
|
|
}}</span>
|
|
</div>
|
|
<div v-if="transaction.balanceAfter !== undefined">
|
|
<span class="text-text-secondary">Balance After:</span>
|
|
<span class="text-white ml-2">{{
|
|
formatCurrency(transaction.balanceAfter)
|
|
}}</span>
|
|
</div>
|
|
<div v-if="transaction.paymentMethod">
|
|
<span class="text-text-secondary">Payment Method:</span>
|
|
<span class="text-white ml-2 capitalize">{{
|
|
transaction.paymentMethod
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toggle Details Button -->
|
|
<button
|
|
@click="toggleExpanded(transaction.id)"
|
|
class="mt-3 text-xs text-primary hover:text-primary-hover flex items-center gap-1"
|
|
>
|
|
<ChevronDown
|
|
:class="[
|
|
'w-4 h-4 transition-transform',
|
|
expandedTransaction === transaction.id ? 'rotate-180' : '',
|
|
]"
|
|
/>
|
|
{{ expandedTransaction === transaction.id ? "Hide" : "Show" }}
|
|
Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div
|
|
v-if="filteredTransactions.length > perPage"
|
|
class="p-6 border-t border-surface-lighter"
|
|
>
|
|
<div class="flex items-center justify-between flex-wrap gap-4">
|
|
<!-- Page info -->
|
|
<div class="text-sm text-text-secondary">
|
|
Showing {{ (currentPage - 1) * perPage + 1 }} to
|
|
{{ Math.min(currentPage * perPage, filteredTransactions.length) }}
|
|
of {{ filteredTransactions.length }} transactions
|
|
</div>
|
|
|
|
<!-- Page controls -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- Previous button -->
|
|
<button
|
|
@click="prevPage"
|
|
:disabled="!hasPrevPage"
|
|
class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
title="Previous page"
|
|
>
|
|
<ChevronLeft class="w-4 h-4" />
|
|
</button>
|
|
|
|
<!-- Page numbers -->
|
|
<div class="flex gap-1">
|
|
<!-- First page -->
|
|
<button
|
|
v-if="currentPage > 3"
|
|
@click="goToPage(1)"
|
|
class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light transition-all"
|
|
>
|
|
1
|
|
</button>
|
|
<span
|
|
v-if="currentPage > 3"
|
|
class="px-2 py-2 text-text-secondary"
|
|
>
|
|
...
|
|
</span>
|
|
|
|
<!-- Nearby pages -->
|
|
<button
|
|
v-for="page in [
|
|
currentPage - 1,
|
|
currentPage,
|
|
currentPage + 1,
|
|
].filter((p) => p >= 1 && p <= totalPages)"
|
|
:key="page"
|
|
@click="goToPage(page)"
|
|
:class="[
|
|
'px-3 py-2 rounded-lg border transition-all',
|
|
page === currentPage
|
|
? 'bg-primary border-primary text-white font-semibold'
|
|
: 'border-surface-lighter bg-surface text-text-primary hover:bg-surface-light',
|
|
]"
|
|
>
|
|
{{ page }}
|
|
</button>
|
|
|
|
<!-- Last page -->
|
|
<span
|
|
v-if="currentPage < totalPages - 2"
|
|
class="px-2 py-2 text-text-secondary"
|
|
>
|
|
...
|
|
</span>
|
|
<button
|
|
v-if="currentPage < totalPages - 2"
|
|
@click="goToPage(totalPages)"
|
|
class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light transition-all"
|
|
>
|
|
{{ totalPages }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Next button -->
|
|
<button
|
|
@click="nextPage"
|
|
:disabled="!hasNextPage"
|
|
class="px-3 py-2 rounded-lg border border-surface-lighter bg-surface text-text-primary hover:bg-surface-light disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
title="Next page"
|
|
>
|
|
<ChevronRight class="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trade Details Modal -->
|
|
<div
|
|
v-if="showTradeModal && selectedTrade"
|
|
class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
|
|
@click.self="closeTradeModal"
|
|
>
|
|
<div
|
|
class="bg-surface-light rounded-lg max-w-md w-full p-6 border border-surface-lighter"
|
|
>
|
|
<!-- Modal Header -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-xl font-bold text-white">Trade Details</h3>
|
|
<button
|
|
@click="closeTradeModal"
|
|
class="text-text-secondary hover:text-white transition-colors"
|
|
>
|
|
<X class="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Trade Status -->
|
|
<div class="text-center py-4 mb-4">
|
|
<div
|
|
class="w-16 h-16 bg-yellow-400/20 rounded-full flex items-center justify-center mx-auto mb-3"
|
|
>
|
|
<Clock class="w-8 h-8 text-yellow-400" />
|
|
</div>
|
|
<p class="text-white font-semibold mb-1">Waiting for Acceptance</p>
|
|
<p class="text-text-secondary text-sm">
|
|
Check your Steam trade offers
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Verification Code -->
|
|
<div
|
|
class="bg-gradient-to-br from-primary/20 to-primary-dark/20 border-2 border-primary rounded-lg p-6 text-center mb-4"
|
|
>
|
|
<p class="text-text-secondary text-sm mb-2">Verification Code</p>
|
|
<p class="text-4xl font-bold text-white tracking-widest font-mono">
|
|
{{ selectedTrade.verificationCode }}
|
|
</p>
|
|
<p class="text-text-secondary text-xs mt-2">
|
|
Match this code with your Steam trade offer
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Open Trade Link Button -->
|
|
<a
|
|
v-if="selectedTrade.tradeOfferUrl"
|
|
:href="selectedTrade.tradeOfferUrl"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-surface-dark font-semibold rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 text-center mb-4"
|
|
>
|
|
<ExternalLink class="w-5 h-5" />
|
|
Open Trade in Steam
|
|
</a>
|
|
|
|
<!-- Trade Info -->
|
|
<div class="bg-surface rounded-lg p-4 space-y-2 mb-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-text-secondary">Items:</span>
|
|
<span class="text-white font-semibold">{{
|
|
selectedTrade.items?.length || 0
|
|
}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-text-secondary">Value:</span>
|
|
<span class="text-white font-semibold">{{
|
|
formatCurrency(selectedTrade.totalValue || 0)
|
|
}}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-text-secondary">Created:</span>
|
|
<span class="text-white font-semibold">{{
|
|
formatDate(selectedTrade.sentAt || selectedTrade.createdAt)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instructions -->
|
|
<div class="bg-primary/10 border border-primary/30 rounded-lg p-3 mb-4">
|
|
<p class="text-white font-semibold text-sm mb-2">Instructions:</p>
|
|
<ol
|
|
class="text-text-secondary text-sm space-y-1 list-decimal list-inside"
|
|
>
|
|
<li>Click "Open Trade in Steam" button above</li>
|
|
<li>Verify the code matches</li>
|
|
<li>Accept the trade</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<button
|
|
@click="closeTradeModal"
|
|
class="w-full px-4 py-2.5 bg-surface hover:bg-surface-lighter text-white rounded-lg transition-colors"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
|
|
import { useAuthStore } from "@/stores/auth";
|
|
import axios from "@/utils/axios";
|
|
import { useToast } from "vue-toastification";
|
|
import {
|
|
History,
|
|
Loader,
|
|
Calendar,
|
|
Monitor,
|
|
Smartphone,
|
|
Tablet,
|
|
Laptop,
|
|
ChevronDown,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ArrowDownCircle,
|
|
ArrowUpCircle,
|
|
ShoppingCart,
|
|
Tag,
|
|
RefreshCw,
|
|
Gift,
|
|
DollarSign,
|
|
Clock,
|
|
X,
|
|
ExternalLink,
|
|
} from "lucide-vue-next";
|
|
|
|
const authStore = useAuthStore();
|
|
const toast = useToast();
|
|
|
|
// State
|
|
const transactions = ref([]);
|
|
const loading = ref(false);
|
|
const currentPage = ref(1);
|
|
const perPage = ref(10);
|
|
const totalTransactions = ref(0);
|
|
const expandedTransaction = ref(null);
|
|
const pendingTrades = ref([]);
|
|
const showTradeModal = ref(false);
|
|
const selectedTrade = ref(null);
|
|
|
|
const filters = ref({
|
|
type: "",
|
|
status: "",
|
|
dateRange: "all",
|
|
});
|
|
|
|
let wsMessageHandler = null;
|
|
|
|
const stats = ref({
|
|
totalDeposits: 0,
|
|
totalWithdrawals: 0,
|
|
totalPurchases: 0,
|
|
totalSales: 0,
|
|
depositCount: 0,
|
|
withdrawalCount: 0,
|
|
purchaseCount: 0,
|
|
saleCount: 0,
|
|
});
|
|
|
|
// Computed
|
|
const filteredTransactions = computed(() => {
|
|
let filtered = [...transactions.value];
|
|
|
|
if (filters.value.type) {
|
|
filtered = filtered.filter((t) => t.type === filters.value.type);
|
|
}
|
|
|
|
if (filters.value.status) {
|
|
filtered = filtered.filter((t) => t.status === filters.value.status);
|
|
}
|
|
|
|
if (filters.value.dateRange !== "all") {
|
|
const now = new Date();
|
|
const filterDate = new Date();
|
|
|
|
switch (filters.value.dateRange) {
|
|
case "today":
|
|
filterDate.setHours(0, 0, 0, 0);
|
|
break;
|
|
case "week":
|
|
filterDate.setDate(now.getDate() - 7);
|
|
break;
|
|
case "month":
|
|
filterDate.setDate(now.getDate() - 30);
|
|
break;
|
|
case "year":
|
|
filterDate.setFullYear(now.getFullYear() - 1);
|
|
break;
|
|
}
|
|
|
|
filtered = filtered.filter((t) => new Date(t.createdAt) >= filterDate);
|
|
}
|
|
|
|
return filtered;
|
|
});
|
|
|
|
// Paginated transactions
|
|
const paginatedTransactions = computed(() => {
|
|
const start = (currentPage.value - 1) * perPage.value;
|
|
const end = start + perPage.value;
|
|
return filteredTransactions.value.slice(start, end);
|
|
});
|
|
|
|
const totalPages = computed(() => {
|
|
return Math.ceil(filteredTransactions.value.length / perPage.value);
|
|
});
|
|
|
|
const hasNextPage = computed(() => {
|
|
return currentPage.value < totalPages.value;
|
|
});
|
|
|
|
const hasPrevPage = computed(() => {
|
|
return currentPage.value > 1;
|
|
});
|
|
|
|
// Methods
|
|
const fetchTransactions = async () => {
|
|
loading.value = true;
|
|
try {
|
|
console.log("🔄 Fetching transactions...");
|
|
const response = await axios.get("/api/user/transactions", {
|
|
withCredentials: true,
|
|
params: {
|
|
limit: 1000, // Fetch all, we'll paginate on frontend
|
|
},
|
|
});
|
|
|
|
console.log("✅ Transaction response:", response.data);
|
|
|
|
if (response.data.success) {
|
|
transactions.value = response.data.transactions;
|
|
totalTransactions.value = response.data.transactions.length;
|
|
stats.value = response.data.stats || stats.value;
|
|
console.log(`📊 Loaded ${transactions.value.length} transactions`);
|
|
console.log("Stats:", stats.value);
|
|
} else {
|
|
console.warn("⚠️ Response success is false");
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Failed to fetch transactions:", error);
|
|
console.error("Response:", error.response?.data);
|
|
console.error("Status:", error.response?.status);
|
|
if (error.response?.status !== 404) {
|
|
toast.error("Failed to load transaction history");
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const fetchPendingTrades = async () => {
|
|
try {
|
|
const response = await axios.get("/api/inventory/trades");
|
|
if (response.data.success) {
|
|
pendingTrades.value = response.data.trades.filter(
|
|
(t) => t.state === "pending"
|
|
);
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load pending trades:", err);
|
|
}
|
|
};
|
|
|
|
const viewTradeDetails = (trade) => {
|
|
selectedTrade.value = trade;
|
|
showTradeModal.value = true;
|
|
};
|
|
|
|
const closeTradeModal = () => {
|
|
showTradeModal.value = false;
|
|
selectedTrade.value = null;
|
|
};
|
|
|
|
const setupWebSocketListeners = () => {
|
|
if (authStore.ws) {
|
|
wsMessageHandler = (event) => {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
|
|
if (message.type === "trade_completed") {
|
|
// Remove from pending
|
|
pendingTrades.value = pendingTrades.value.filter(
|
|
(t) => t._id !== message.data.tradeId
|
|
);
|
|
// Refresh transactions
|
|
fetchTransactions();
|
|
toast.success("Trade completed! Balance updated.");
|
|
} else if (
|
|
message.type === "trade_declined" ||
|
|
message.type === "trade_expired" ||
|
|
message.type === "trade_canceled"
|
|
) {
|
|
// Remove from pending
|
|
pendingTrades.value = pendingTrades.value.filter(
|
|
(t) => t._id !== message.data.tradeId
|
|
);
|
|
if (message.type === "trade_declined") {
|
|
toast.warning("Trade was declined");
|
|
} else if (message.type === "trade_expired") {
|
|
toast.warning("Trade offer expired");
|
|
}
|
|
} else if (message.type === "trade_created") {
|
|
// Add to pending trades
|
|
fetchPendingTrades();
|
|
}
|
|
} catch (err) {
|
|
console.error("Error handling WebSocket message:", err);
|
|
}
|
|
};
|
|
|
|
authStore.ws.addEventListener("message", wsMessageHandler);
|
|
}
|
|
};
|
|
|
|
const cleanupWebSocketListeners = () => {
|
|
if (authStore.ws && wsMessageHandler) {
|
|
authStore.ws.removeEventListener("message", wsMessageHandler);
|
|
}
|
|
};
|
|
|
|
const nextPage = () => {
|
|
if (hasNextPage.value) {
|
|
currentPage.value++;
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const prevPage = () => {
|
|
if (hasPrevPage.value) {
|
|
currentPage.value--;
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const goToPage = (page) => {
|
|
if (page >= 1 && page <= totalPages.value) {
|
|
currentPage.value = page;
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const resetFilters = () => {
|
|
filters.value = {
|
|
type: "",
|
|
status: "",
|
|
dateRange: "all",
|
|
};
|
|
currentPage.value = 1;
|
|
};
|
|
|
|
// Watch for filter changes and reset to page 1
|
|
watch(
|
|
[
|
|
() => filters.value.type,
|
|
() => filters.value.status,
|
|
() => filters.value.dateRange,
|
|
],
|
|
() => {
|
|
currentPage.value = 1;
|
|
}
|
|
);
|
|
|
|
const toggleExpanded = (id) => {
|
|
expandedTransaction.value = expandedTransaction.value === id ? null : id;
|
|
};
|
|
|
|
// Helper functions
|
|
const formatCurrency = (amount) => {
|
|
if (amount === undefined || amount === null) return "$0.00";
|
|
return `$${Math.abs(amount).toFixed(2)}`;
|
|
};
|
|
|
|
const formatDate = (date) => {
|
|
if (!date) return "N/A";
|
|
const d = new Date(date);
|
|
const now = new Date();
|
|
const diff = now - d;
|
|
const hours = Math.floor(diff / 3600000);
|
|
const days = Math.floor(diff / 86400000);
|
|
|
|
if (hours < 1) return "Just now";
|
|
if (hours < 24) return `${hours}h ago`;
|
|
if (days < 7) return `${days}d ago`;
|
|
return d.toLocaleDateString();
|
|
};
|
|
|
|
const getTransactionIcon = (type) => {
|
|
const icons = {
|
|
deposit: ArrowDownCircle,
|
|
withdrawal: ArrowUpCircle,
|
|
purchase: ShoppingCart,
|
|
sale: Tag,
|
|
trade: RefreshCw,
|
|
bonus: Gift,
|
|
refund: DollarSign,
|
|
};
|
|
return icons[type] || DollarSign;
|
|
};
|
|
|
|
const getTransactionIconColor = (type) => {
|
|
const colors = {
|
|
deposit: "text-success",
|
|
withdrawal: "text-danger",
|
|
purchase: "text-primary",
|
|
sale: "text-warning",
|
|
trade: "text-info",
|
|
bonus: "text-success",
|
|
refund: "text-warning",
|
|
};
|
|
return colors[type] || "text-text-secondary";
|
|
};
|
|
|
|
const getTransactionIconBg = (type) => {
|
|
const backgrounds = {
|
|
deposit: "bg-success/20",
|
|
withdrawal: "bg-danger/20",
|
|
purchase: "bg-primary/20",
|
|
sale: "bg-warning/20",
|
|
trade: "bg-info/20",
|
|
bonus: "bg-success/20",
|
|
refund: "bg-warning/20",
|
|
};
|
|
return backgrounds[type] || "bg-surface-lighter";
|
|
};
|
|
|
|
const getTransactionTitle = (transaction) => {
|
|
const titles = {
|
|
deposit: "Deposit",
|
|
withdrawal: "Withdrawal",
|
|
purchase: "Item Purchase",
|
|
sale: "Item Sale",
|
|
trade: "Trade",
|
|
bonus: "Bonus",
|
|
refund: "Refund",
|
|
};
|
|
return titles[transaction.type] || "Transaction";
|
|
};
|
|
|
|
const getTransactionDescription = (transaction) => {
|
|
if (transaction.itemName) {
|
|
return `${transaction.type === "purchase" ? "Purchased" : "Sold"} ${
|
|
transaction.itemName
|
|
}`;
|
|
}
|
|
return `${
|
|
transaction.type.charAt(0).toUpperCase() + transaction.type.slice(1)
|
|
} of ${formatCurrency(transaction.amount)}`;
|
|
};
|
|
|
|
const getStatusClass = (status) => {
|
|
const classes = {
|
|
completed: "bg-success/20 text-success",
|
|
pending: "bg-warning/20 text-warning",
|
|
processing: "bg-info/20 text-info",
|
|
failed: "bg-danger/20 text-danger",
|
|
cancelled: "bg-text-secondary/20 text-text-secondary",
|
|
};
|
|
return classes[status] || "bg-surface-lighter text-text-secondary";
|
|
};
|
|
|
|
const getDeviceIcon = (device) => {
|
|
const icons = {
|
|
Mobile: Smartphone,
|
|
Tablet: Tablet,
|
|
Desktop: Laptop,
|
|
};
|
|
return icons[device] || Laptop;
|
|
};
|
|
|
|
const getSessionColor = (sessionIdShort) => {
|
|
if (!sessionIdShort) return "#64748b";
|
|
|
|
let hash = 0;
|
|
for (let i = 0; i < sessionIdShort.length; i++) {
|
|
hash = sessionIdShort.charCodeAt(i) + ((hash << 5) - hash);
|
|
}
|
|
|
|
const hue = Math.abs(hash) % 360;
|
|
const saturation = 60 + (Math.abs(hash) % 20);
|
|
const lightness = 45 + (Math.abs(hash) % 15);
|
|
|
|
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
|
};
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchTransactions();
|
|
fetchPendingTrades();
|
|
setupWebSocketListeners();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
cleanupWebSocketListeners();
|
|
});
|
|
</script>
|