76 lines
3.9 KiB
TypeScript
76 lines
3.9 KiB
TypeScript
import StatCard from '@/components/StatCard';
|
|
import TransactionList from '@/components/TransactionList';
|
|
import { investors, bikes, transactions } from '@/data/mockData';
|
|
import { Wallet, TrendingUp, Bike, Target, DollarSign, FileText, Phone, BarChart3, Send, ArrowDownToLine } from 'lucide-react';
|
|
|
|
export default function InvestorPage() {
|
|
const investor = investors[0];
|
|
const investorBikes = bikes.filter(b => b.investorId === investor?.id || b.status === 'rented');
|
|
|
|
return (
|
|
<div className="p-4 lg:p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Investor Dashboard</h1>
|
|
<p className="text-sm text-slate-500">Track your investments and earnings</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<StatCard label="Total Invested" value={`৳${(investor.totalInvested / 1000).toFixed(0)}k`} icon={Wallet} color="text-investor" />
|
|
<StatCard label="Total Earnings" value={`৳${(investor.totalEarnings / 1000).toFixed(1)}k`} icon={TrendingUp} color="text-green-600" trend="+2.3%" trendUp />
|
|
<StatCard label="Active Bikes" value={investor.activeBikes} icon={Bike} color="text-biker" />
|
|
<StatCard label="ROI" value={`${investor.roi}%`} icon={Target} color="text-purple-600" />
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-6 mb-6">
|
|
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="font-bold text-slate-800">My Portfolio</h2>
|
|
<span className="text-xs font-semibold px-2 py-1 bg-purple-100 text-purple-700 rounded-full">
|
|
{investorBikes.length} bikes
|
|
</span>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{investorBikes.map(bike => (
|
|
<div key={bike.id} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
|
<div>
|
|
<p className="font-medium text-slate-700">{bike.model}</p>
|
|
<p className="text-xs text-slate-400">{bike.plateNumber}</p>
|
|
</div>
|
|
<span className={`text-xs font-medium px-2 py-1 rounded-full ${
|
|
bike.status === 'rented' ? 'bg-green-100 text-green-700' :
|
|
bike.status === 'available' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-amber-100 text-amber-700'
|
|
}`}>
|
|
{bike.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
|
<h2 className="font-bold text-slate-800 mb-4">Quick Actions</h2>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button className="py-3 bg-investor text-white rounded-lg font-semibold text-sm hover:bg-investor-dark flex items-center justify-center gap-2">
|
|
<DollarSign className="w-4 h-4" /> Withdraw
|
|
</button>
|
|
<button className="py-3 bg-purple-600 text-white rounded-lg font-semibold text-sm hover:bg-purple-700 flex items-center justify-center gap-2">
|
|
<FileText className="w-4 h-4" /> Statement
|
|
</button>
|
|
<button className="py-3 border border-slate-200 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
|
|
<Phone className="w-4 h-4" /> Support
|
|
</button>
|
|
<button className="py-3 border border-slate-200 text-slate-600 rounded-lg font-semibold text-sm hover:bg-slate-50 flex items-center justify-center gap-2">
|
|
<BarChart3 className="w-4 h-4" /> Analytics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-lg font-bold text-slate-800 mb-3">Transaction History</h2>
|
|
<TransactionList transactions={transactions.filter(t => t.userId === 'u7')} />
|
|
</div>
|
|
</div>
|
|
);
|
|
} |