88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
|
import { Transaction } from '@/data/mockData';
|
||
|
|
import { Bike, Banknote, Send, CreditCard, TrendingUp, ArrowUpDown } from 'lucide-react';
|
||
|
|
import { LucideIcon } from 'lucide-react';
|
||
|
|
|
||
|
|
interface TransactionListProps {
|
||
|
|
transactions: Transaction[];
|
||
|
|
compact?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const typeIcons: Record<string, LucideIcon> = {
|
||
|
|
rental_payment: Bike,
|
||
|
|
deposit: Banknote,
|
||
|
|
withdrawal: Send,
|
||
|
|
topup: CreditCard,
|
||
|
|
earning: TrendingUp,
|
||
|
|
refund: ArrowUpDown,
|
||
|
|
};
|
||
|
|
|
||
|
|
const typeColors: Record<string, string> = {
|
||
|
|
rental_payment: 'text-blue-600',
|
||
|
|
deposit: 'text-green-600',
|
||
|
|
withdrawal: 'text-amber-600',
|
||
|
|
topup: 'text-blue-600',
|
||
|
|
earning: 'text-green-600',
|
||
|
|
refund: 'text-purple-600',
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function TransactionList({ transactions, compact }: TransactionListProps) {
|
||
|
|
if (compact) {
|
||
|
|
return (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{transactions.slice(0, 5).map((tx) => {
|
||
|
|
const Icon = typeIcons[tx.type] || Bike;
|
||
|
|
return (
|
||
|
|
<div key={tx.id} className="flex items-center justify-between py-2 border-b border-slate-50 last:border-0">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<Icon className={`w-5 h-5 ${typeColors[tx.type]}`} />
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium text-slate-700">{tx.description}</p>
|
||
|
|
<p className="text-xs text-slate-400">{tx.createdAt}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span className={`font-semibold ${typeColors[tx.type]}`}>
|
||
|
|
{tx.type === 'withdrawal' ? '-' : '+'}৳{tx.amount.toLocaleString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white rounded-xl overflow-hidden shadow-sm border border-slate-100">
|
||
|
|
<div className="px-5 py-3 border-b border-slate-100">
|
||
|
|
<h3 className="font-semibold text-slate-800">Recent Transactions</h3>
|
||
|
|
</div>
|
||
|
|
<div className="divide-y divide-slate-50">
|
||
|
|
{transactions.map((tx) => {
|
||
|
|
const Icon = typeIcons[tx.type] || Bike;
|
||
|
|
return (
|
||
|
|
<div key={tx.id} className="flex items-center justify-between px-5 py-3 hover:bg-slate-50 transition-colors">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<Icon className={`w-5 h-5 ${typeColors[tx.type]}`} />
|
||
|
|
<div>
|
||
|
|
<p className="font-medium text-slate-700">{tx.description}</p>
|
||
|
|
<p className="text-xs text-slate-400">{tx.createdAt}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-right">
|
||
|
|
<p className={`font-bold ${typeColors[tx.type]}`}>
|
||
|
|
{tx.type === 'withdrawal' ? '-' : '+'}৳{tx.amount.toLocaleString()}
|
||
|
|
</p>
|
||
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${
|
||
|
|
tx.status === 'completed' ? 'bg-green-100 text-green-700' :
|
||
|
|
tx.status === 'pending' ? 'bg-amber-100 text-amber-700' :
|
||
|
|
'bg-red-100 text-red-700'
|
||
|
|
}`}>
|
||
|
|
{tx.status}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|