first commit
This commit is contained in:
735
frontend/src/views/TransactionsPage.vue
Normal file
735
frontend/src/views/TransactionsPage.vue
Normal file
@@ -0,0 +1,735 @@
|
||||
<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>
|
||||
|
||||
<!-- 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-4 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 class="flex items-end">
|
||||
<button @click="resetFilters" class="btn-secondary w-full">
|
||||
Reset Filters
|
||||
</button>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, 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,
|
||||
} 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 filters = ref({
|
||||
type: "",
|
||||
status: "",
|
||||
dateRange: "all",
|
||||
});
|
||||
|
||||
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 transactions");
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user