104 lines
4.2 KiB
TypeScript
104 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import PageMeta from '../../components/common/PageMeta';
|
|
import { useToast } from '../../components/ui/toast/ToastContainer';
|
|
import { fetchCreditTransactions, CreditTransaction } from '../../services/api';
|
|
import { Card } from '../../components/ui/card';
|
|
import Badge from '../../components/ui/badge/Badge';
|
|
|
|
export default function Transactions() {
|
|
const toast = useToast();
|
|
const [transactions, setTransactions] = useState<CreditTransaction[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [totalPages, setTotalPages] = useState(1);
|
|
|
|
useEffect(() => {
|
|
loadTransactions();
|
|
}, [currentPage]);
|
|
|
|
const loadTransactions = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetchCreditTransactions({ page: currentPage });
|
|
setTransactions(response.results || []);
|
|
setTotalPages(Math.ceil((response.count || 0) / 50));
|
|
} catch (error: any) {
|
|
toast.error(`Failed to load transactions: ${error.message}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getTransactionTypeColor = (type: string) => {
|
|
switch (type) {
|
|
case 'purchase':
|
|
case 'subscription':
|
|
return 'success';
|
|
case 'deduction':
|
|
return 'error';
|
|
default:
|
|
return 'primary';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6">
|
|
<PageMeta title="Credit Transactions" />
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Transactions</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">View all credit transactions and history</p>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="text-gray-500">Loading...</div>
|
|
</div>
|
|
) : (
|
|
<Card className="p-6">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 dark:border-gray-700">
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Balance After</th>
|
|
<th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{transactions.map((transaction) => (
|
|
<tr key={transaction.id} className="border-b border-gray-100 dark:border-gray-800">
|
|
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
|
|
{new Date(transaction.created_at).toLocaleDateString()}
|
|
</td>
|
|
<td className="py-3 px-4">
|
|
<Badge variant="light" color={getTransactionTypeColor(transaction.transaction_type) as any}>
|
|
{transaction.transaction_type_display}
|
|
</Badge>
|
|
</td>
|
|
<td className={`py-3 px-4 text-sm font-medium ${
|
|
transaction.amount >= 0
|
|
? 'text-green-600 dark:text-green-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
}`}>
|
|
{transaction.amount >= 0 ? '+' : ''}{transaction.amount.toLocaleString()}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
|
|
{transaction.balance_after.toLocaleString()}
|
|
</td>
|
|
<td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
|
|
{transaction.description}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|