Add full FOCO investor management system with CRUD, investments, and transactions

2026-04-22 01:02:45 +06:00
parent 5338038ea2
commit dab0c11b15
32 changed files with 7673 additions and 89 deletions
--- a/src/components/TransactionList.tsx
+++ b/src/components/TransactionList.tsx
@@ -0,0 +1,88 @@
+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>
+  );
+}