46 lines
2.5 KiB
TypeScript
46 lines
2.5 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { GlassCard } from '@/components/ui/GlassCard';
|
||
|
|
import { formatAmount } from '@/lib/utils';
|
||
|
|
import { DirhamIcon } from '@/components/ui/custom-icons';
|
||
|
|
import { ArrowUpRight, ArrowDownLeft } from 'lucide-react';
|
||
|
|
|
||
|
|
const RecentTransactionsCard: React.FC = () => {
|
||
|
|
|
||
|
|
const transactions = [
|
||
|
|
{ date: 'Today, 2:30 PM', name: 'Carrefour', category: 'Food & Dining', amount: -450, type: 'expense' },
|
||
|
|
{ date: 'Yesterday, 8:15 PM', name: 'Uber', category: 'Transportation', amount: -65, type: 'expense' },
|
||
|
|
{ date: 'Feb 12, 10:00 AM', name: 'Freelance Project', category: 'Income', amount: 3500, type: 'income' },
|
||
|
|
{ date: 'Feb 10, 6:45 PM', name: 'Zara', category: 'Shopping', amount: -320, type: 'expense' },
|
||
|
|
{ date: 'Feb 08, 1:20 PM', name: 'DEWA Bill', category: 'Utilities', amount: -650, type: 'expense' },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<GlassCard className="p-6 h-full flex flex-col">
|
||
|
|
<h3 className="text-lg font-semibold text-slate-800 mb-6">Recent Transactions</h3>
|
||
|
|
<div className="space-y-4 flex-1">
|
||
|
|
{transactions.map((tx, index) => (
|
||
|
|
<div key={index} className="flex items-center justify-between p-3 rounded-xl hover:bg-slate-50/80 transition-colors border border-transparent hover:border-slate-100">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${tx.type === 'income' ? 'bg-green-100 text-green-600' : 'bg-slate-100 text-slate-600'}`}>
|
||
|
|
{tx.type === 'income' ? <ArrowDownLeft className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-bold text-slate-900">{tx.name}</p>
|
||
|
|
<p className="text-xs text-slate-500">{tx.date} • {tx.category}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className={`text-right font-bold text-sm ${tx.type === 'income' ? 'text-green-600' : 'text-slate-900'}`}>
|
||
|
|
<span className="flex items-center gap-0.5">
|
||
|
|
{tx.type === 'income' ? '+' : '-'} <DirhamIcon className="w-3 h-3" /> {formatAmount(Math.abs(tx.amount))}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</GlassCard>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RecentTransactionsCard;
|