initial commit
This commit is contained in:
Kar k1
278
components/balance/TransactionHistory.tsx
Normal file
278
components/balance/TransactionHistory.tsx
Normal file
@@ -0,0 +1,278 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { useAuth } from '@/contexts/AuthContext'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import {
|
||||
History,
|
||||
RefreshCw,
|
||||
ArrowUpCircle,
|
||||
ArrowDownCircle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Filter,
|
||||
} from 'lucide-react'
|
||||
import { formatCurrency } from '@/lib/balance-service'
|
||||
|
||||
interface Transaction {
|
||||
_id: string
|
||||
transactionId: string
|
||||
type: 'debit' | 'credit'
|
||||
amount: number
|
||||
service: string
|
||||
serviceId?: string
|
||||
description?: string
|
||||
status: 'pending' | 'completed' | 'failed'
|
||||
previousBalance: number
|
||||
newBalance: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
interface TransactionHistoryProps {
|
||||
className?: string
|
||||
showFilters?: boolean
|
||||
maxHeight?: string
|
||||
}
|
||||
|
||||
export function TransactionHistory({
|
||||
className = '',
|
||||
showFilters = true,
|
||||
maxHeight = '400px',
|
||||
}: TransactionHistoryProps) {
|
||||
const { user } = useAuth()
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [page, setPage] = useState(1)
|
||||
const [totalPages, setTotalPages] = useState(1)
|
||||
const [typeFilter, setTypeFilter] = useState<'all' | 'debit' | 'credit'>('all')
|
||||
const [serviceFilter, setServiceFilter] = useState('all')
|
||||
|
||||
const fetchTransactions = async (pageNum: number = 1, reset: boolean = false) => {
|
||||
if (!user) return
|
||||
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: pageNum.toString(),
|
||||
limit: '10',
|
||||
type: typeFilter,
|
||||
})
|
||||
|
||||
if (serviceFilter && serviceFilter !== 'all') {
|
||||
params.append('service', serviceFilter)
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/transactions?${params}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error?.message || 'Failed to fetch transactions')
|
||||
}
|
||||
|
||||
if (data.success) {
|
||||
if (reset) {
|
||||
setTransactions(data.data.transactions)
|
||||
} else {
|
||||
setTransactions((prev) => [...prev, ...data.data.transactions])
|
||||
}
|
||||
setTotalPages(data.data.pagination.totalPages)
|
||||
setPage(pageNum)
|
||||
} else {
|
||||
throw new Error(data.error?.message || 'Failed to fetch transactions')
|
||||
}
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : 'Failed to fetch transactions'
|
||||
setError(errorMessage)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchTransactions(1, true)
|
||||
}, [user, typeFilter, serviceFilter])
|
||||
|
||||
const handleRefresh = () => {
|
||||
setPage(1)
|
||||
fetchTransactions(1, true)
|
||||
}
|
||||
|
||||
const handleLoadMore = () => {
|
||||
if (page < totalPages) {
|
||||
fetchTransactions(page + 1, false)
|
||||
}
|
||||
}
|
||||
|
||||
const getTransactionIcon = (type: string) => {
|
||||
return type === 'credit' ? (
|
||||
<ArrowUpCircle className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<ArrowDownCircle className="h-4 w-4 text-red-600" />
|
||||
)
|
||||
}
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const variants = {
|
||||
completed: 'default',
|
||||
pending: 'secondary',
|
||||
failed: 'destructive',
|
||||
} as const
|
||||
|
||||
return (
|
||||
<Badge variant={variants[status as keyof typeof variants] || 'secondary'}>{status}</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-IN', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<History className="h-5 w-5 text-muted-foreground" />
|
||||
<CardTitle className="text-lg">Transaction History</CardTitle>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
{showFilters && (
|
||||
<CardContent className="pb-4">
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onValueChange={(value: 'all' | 'debit' | 'credit') => setTypeFilter(value)}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Types</SelectItem>
|
||||
<SelectItem value="debit">Debits</SelectItem>
|
||||
<SelectItem value="credit">Credits</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={serviceFilter} onValueChange={setServiceFilter}>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="All Services" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Services</SelectItem>
|
||||
<SelectItem value="VPS">VPS Server</SelectItem>
|
||||
<SelectItem value="Kubernetes">Kubernetes</SelectItem>
|
||||
<SelectItem value="Balance">Balance Top-up</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
|
||||
<CardContent className="pt-0">
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="space-y-3 overflow-y-auto" style={{ maxHeight }}>
|
||||
{transactions.length === 0 && !loading ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<History className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No transactions found</p>
|
||||
<p className="text-sm">Your transaction history will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
transactions.map((transaction) => (
|
||||
<div
|
||||
key={transaction._id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{getTransactionIcon(transaction.type)}
|
||||
<div>
|
||||
<div className="font-medium text-sm">
|
||||
{transaction.description || transaction.service}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{formatDate(transaction.createdAt)}
|
||||
</div>
|
||||
{transaction.serviceId && (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
ID: {transaction.serviceId}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div
|
||||
className={`font-medium ${
|
||||
transaction.type === 'credit' ? 'text-green-600' : 'text-red-600'
|
||||
}`}
|
||||
>
|
||||
{transaction.type === 'credit' ? '+' : '-'}
|
||||
{formatCurrency(transaction.amount)}
|
||||
</div>
|
||||
{/* <div className="text-xs text-muted-foreground">Balance: {formatCurrency(transaction.newBalance)}</div> */}
|
||||
<div className="mt-1">{getStatusBadge(transaction.status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="text-center py-4">
|
||||
<RefreshCw className="h-6 w-6 animate-spin mx-auto mb-2" />
|
||||
<p className="text-sm text-muted-foreground">Loading transactions...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{page < totalPages && !loading && (
|
||||
<div className="text-center pt-4">
|
||||
<Button variant="outline" onClick={handleLoadMore} disabled={loading}>
|
||||
Load More
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user