Refactor: Global Theme System and Finance Modules Redesign

2026-02-16 00:09:52 +05:30
parent 58fe801eab
commit 557accf0c2
51 changed files with 3076 additions and 1147 deletions
--- a/src/components/budget/RecentTransactionsCard.tsx
+++ b/src/components/budget/RecentTransactionsCard.tsx
@@ -0,0 +1,45 @@
+
+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;