Compare commits
2 Commits
f6b394aded
...
c1ab1eb0a3
| Author | SHA1 | Date | |
|---|---|---|---|
|
c1ab1eb0a3 | ||
|
|
1fd8c5153a |
@@ -1165,18 +1165,14 @@ export default function InvestorDetailPage() {
|
|||||||
<div key={account.id} className="p-4 bg-white border border-slate-200 rounded-xl hover:shadow-md transition-all">
|
<div key={account.id} className="p-4 bg-white border border-slate-200 rounded-xl hover:shadow-md transition-all">
|
||||||
<div className="flex items-start justify-between mb-3">
|
<div className="flex items-start justify-between mb-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${account.isPrimary ? 'bg-green-100' : 'bg-slate-100'}`}>
|
<div className="w-10 h-10 rounded-lg flex items-center justify-center bg-slate-100">
|
||||||
<Banknote className={`w-5 h-5 ${account.isPrimary ? 'text-green-600' : 'text-slate-500'}`} />
|
<Banknote className="w-5 h-5 text-slate-500" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-semibold text-slate-800">{account.bankName}</p>
|
<p className="font-semibold text-slate-800">{account.bankName}</p>
|
||||||
<p className="text-xs text-slate-500">{account.branch}</p>
|
<p className="text-xs text-slate-500">{account.branch}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{account.isPrimary && (
|
|
||||||
<span className="px-2 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Primary</span>
|
|
||||||
)}
|
|
||||||
<button onClick={() => {
|
<button onClick={() => {
|
||||||
setEditingBankAccount(account);
|
setEditingBankAccount(account);
|
||||||
setShowBankModal(true);
|
setShowBankModal(true);
|
||||||
@@ -1184,7 +1180,6 @@ export default function InvestorDetailPage() {
|
|||||||
<Edit className="w-4 h-4" />
|
<Edit className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="space-y-2 text-sm">
|
<div className="space-y-2 text-sm">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<span className="text-slate-500">Account Name</span>
|
<span className="text-slate-500">Account Name</span>
|
||||||
@@ -1234,8 +1229,7 @@ export default function InvestorDetailPage() {
|
|||||||
<div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
|
<div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
|
||||||
<Phone className="w-5 h-5 text-purple-500" />
|
<Phone className="w-5 h-5 text-purple-500" />
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<p className="text-xs text-purple-600">Primary</p>
|
<p className="text-xs text-purple-600 font-medium">{investor.mobileBanking}</p>
|
||||||
<p className="font-medium text-slate-700">{investor.mobileBanking}</p>
|
|
||||||
<p className="text-xs text-slate-400">{investor.mobileBankingNumber}</p>
|
<p className="text-xs text-slate-400">{investor.mobileBankingNumber}</p>
|
||||||
</div>
|
</div>
|
||||||
<button onClick={() => {
|
<button onClick={() => {
|
||||||
@@ -2603,10 +2597,6 @@ export default function InvestorDetailPage() {
|
|||||||
<label className="text-sm font-medium text-slate-600 mb-1 block">Mobile Number</label>
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Mobile Number</label>
|
||||||
<input type="text" value={editingMobileBanking.number} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="01XXXXXXXXX" />
|
<input type="text" value={editingMobileBanking.number} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, number: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="01XXXXXXXXX" />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<input type="checkbox" checked={editingMobileBanking.isPrimary} onChange={(e) => setEditingMobileBanking({ ...editingMobileBanking, isPrimary: e.target.checked })} className="rounded text-investor" />
|
|
||||||
<span className="text-sm text-slate-600">Set as primary account</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="p-5 border-t border-slate-100 flex justify-end gap-3">
|
<div className="p-5 border-t border-slate-100 flex justify-end gap-3">
|
||||||
<button onClick={() => setShowMobileBankingModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
|
<button onClick={() => setShowMobileBankingModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
|
||||||
|
|||||||
346
src/app/investor/investments/[id]/page.tsx
Normal file
346
src/app/investor/investments/[id]/page.tsx
Normal file
@@ -0,0 +1,346 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, use } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ArrowLeft, TrendingUp, Bike, DollarSign, Calendar,
|
||||||
|
CreditCard, FileText, Download, Check,
|
||||||
|
Printer, BarChart3, Wallet, Clock, Shield, Percent, Activity, AlertTriangle,
|
||||||
|
Receipt, CreditCardIcon, Zap, Smartphone, ChevronRight
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { investors, bikes, transactions } from '@/data/mockData';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export default function InvestorInvestmentDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const resolvedParams = use(params);
|
||||||
|
const { id: investmentId } = resolvedParams;
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const investor = investors[0]; // mock logged-in investor
|
||||||
|
const investment = investor.investments?.find((inv: any) => inv.id === investmentId);
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState('overview');
|
||||||
|
|
||||||
|
if (!investment) {
|
||||||
|
return (
|
||||||
|
<div className="p-4 lg:p-6">
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<h2 className="text-xl font-bold text-slate-800">Investment Not Found</h2>
|
||||||
|
<p className="text-slate-500 mt-2">The investment you're looking for doesn't exist.</p>
|
||||||
|
<Link href="/investor/portfolio" className="mt-4 inline-flex items-center gap-2 text-investor hover:underline">
|
||||||
|
<ArrowLeft className="w-4 h-4" /> Back to Portfolio
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const planConfig: Record<string, { bg: string; border: string; text: string; badge: string; icon: any }> = {
|
||||||
|
silver: { bg: 'bg-slate-50', border: 'border-slate-200', text: 'text-slate-700', badge: 'bg-slate-200 text-slate-700', icon: Zap },
|
||||||
|
gold: { bg: 'bg-amber-50', border: 'border-amber-200', text: 'text-amber-700', badge: 'bg-amber-100 text-amber-700', icon: Shield },
|
||||||
|
platinum: { bg: 'bg-purple-50', border: 'border-purple-200', text: 'text-purple-700', badge: 'bg-purple-100 text-purple-700', icon: TrendingUp },
|
||||||
|
diamond: { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-700', badge: 'bg-blue-100 text-blue-700', icon: Zap },
|
||||||
|
};
|
||||||
|
const style = planConfig[investment.planType] || planConfig.gold;
|
||||||
|
|
||||||
|
const assignedBikes = bikes.filter((b: any) => b.investorId === investor.id && b.id === 'b1'); // mock filtering for this investment
|
||||||
|
|
||||||
|
const investmentTransactions = transactions.filter((t: any) => t.investorId === investor.id && t.type === 'investment_return');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 mb-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button onClick={() => router.back()} className="p-2 hover:bg-slate-100 rounded-lg transition-colors border border-slate-200">
|
||||||
|
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">{investment.planName}</h1>
|
||||||
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}>
|
||||||
|
{investment.planType} Plan
|
||||||
|
</span>
|
||||||
|
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'} capitalize`}>
|
||||||
|
{investment.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 text-sm mt-1 flex items-center gap-2">
|
||||||
|
ID: <span className="font-mono text-xs bg-slate-100 px-1.5 py-0.5 rounded">#{investment.id?.toUpperCase()}</span>
|
||||||
|
<span className="text-slate-300">•</span> Started: {investment.startDate}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button onClick={() => toast.success('Statement download started')} className="px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-xl text-sm font-bold hover:bg-slate-50 flex items-center gap-2 shadow-sm transition-all">
|
||||||
|
<Download className="w-4 h-4 text-slate-400" /> Download Statement
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Wallet className="w-5 h-5 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Invested</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">৳{investment.totalInvestment.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-5 h-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Total Return</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-green-600">৳{investment.actualEarnings.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Pending</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-amber-600">৳{(investment.totalInvestment * 0.24 - investment.actualEarnings).toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Percent className="w-5 h-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">ROI</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-blue-600">{investment.expectedRoi}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="flex overflow-x-auto bg-slate-50 border-b border-slate-100">
|
||||||
|
{['overview', 'bikes', 'pnl', 'transactions'].map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab}
|
||||||
|
onClick={() => setActiveTab(tab)}
|
||||||
|
className={`px-6 py-4 text-sm font-bold capitalize transition-colors whitespace-nowrap ${activeTab === tab ? 'text-investor bg-white border-b-2 border-investor' : 'text-slate-500 hover:text-slate-700'}`}
|
||||||
|
>
|
||||||
|
{tab}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
{activeTab === 'overview' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div className="bg-slate-50 rounded-2xl p-5 border border-slate-200">
|
||||||
|
<h4 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5 text-slate-400" /> Investment Details
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Plan Name</span>
|
||||||
|
<span className="font-bold text-slate-800">{investment.planName}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Plan Type</span>
|
||||||
|
<span className="font-bold text-slate-800 capitalize">{investment.planType}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Period</span>
|
||||||
|
<span className="font-bold text-slate-800">{investment.startDate} - {investment.endDate || 'Ongoing'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-500">Payment Method</span>
|
||||||
|
<span className="font-bold text-slate-800 capitalize">{investment.paymentMethod}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-slate-50 rounded-2xl p-5 border border-slate-200">
|
||||||
|
<h4 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<Shield className="w-5 h-5 text-slate-400" /> Plan Policy
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-3 text-sm">
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Min Duration</span>
|
||||||
|
<span className="font-bold text-slate-800">12 Months</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Lock-in Period</span>
|
||||||
|
<span className="font-bold text-slate-800">3 Months</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between border-b border-slate-200 pb-2">
|
||||||
|
<span className="text-slate-500">Exit Penalty</span>
|
||||||
|
<span className="font-bold text-red-500">10%</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-slate-500">Maintenance</span>
|
||||||
|
<span className="font-bold text-green-600">Included</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-2xl p-5">
|
||||||
|
<h4 className="font-bold text-amber-800 mb-4 flex items-center gap-2">
|
||||||
|
<Percent className="w-5 h-5 text-amber-600" /> Profit Sharing Configuration
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-amber-600 mb-4 uppercase font-bold tracking-wider">Your share based on rental model</p>
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<div className="bg-white rounded-xl p-4 text-center border border-amber-200 shadow-sm">
|
||||||
|
<p className="text-xs text-slate-400 mb-1 font-bold uppercase">Single Rent</p>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">55%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-4 text-center border border-amber-200 shadow-sm">
|
||||||
|
<p className="text-xs text-slate-400 mb-1 font-bold uppercase">Rent to Own</p>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">45%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-4 text-center border border-amber-200 shadow-sm ring-2 ring-amber-500 ring-offset-2">
|
||||||
|
<p className="text-xs text-slate-400 mb-1 font-bold uppercase">Share EV</p>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">40%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'bikes' && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{assignedBikes.length > 0 ? assignedBikes.map(bike => (
|
||||||
|
<div key={bike.id} className="p-5 bg-white rounded-2xl border border-slate-200 flex flex-col md:flex-row items-start md:items-center gap-5 hover:border-investor transition-colors group">
|
||||||
|
<div className="w-20 h-20 bg-slate-100 rounded-xl overflow-hidden shrink-0 border border-slate-200">
|
||||||
|
<img src={bike.image} alt={bike.model} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h5 className="font-bold text-lg text-slate-800 truncate">{bike.model}</h5>
|
||||||
|
<p className="text-sm text-slate-500">{bike.plateNumber} • {bike.brand}</p>
|
||||||
|
<div className="mt-3 flex flex-wrap gap-2">
|
||||||
|
<span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${bike.status === 'rented' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}`}>
|
||||||
|
{bike.status}
|
||||||
|
</span>
|
||||||
|
<span className="px-2 py-0.5 rounded bg-slate-100 text-slate-600 text-[10px] font-bold uppercase flex items-center gap-1">
|
||||||
|
Daily: ৳{bike.currentRent}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="text-xs text-slate-400 mb-1 uppercase font-bold tracking-wider">Total Earnings</p>
|
||||||
|
<p className="text-xl font-extrabold text-green-600">৳{bike.totalEarnings?.toLocaleString()}</p>
|
||||||
|
<Link href="/investor/portfolio" className="mt-2 text-xs font-bold text-investor hover:underline flex items-center gap-1 justify-end">
|
||||||
|
Live Track <ChevronRight className="w-3 h-3" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)) : (
|
||||||
|
<div className="text-center py-12 border-2 border-dashed border-slate-200 rounded-2xl">
|
||||||
|
<Bike className="w-12 h-12 mx-auto mb-4 text-slate-300" />
|
||||||
|
<p className="text-slate-500 font-bold">No bikes assigned yet.</p>
|
||||||
|
<p className="text-xs text-slate-400 mt-1">Admin will assign bikes to this investment shortly.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'pnl' && (
|
||||||
|
<div className="max-w-xl mx-auto">
|
||||||
|
<div className="bg-slate-50 rounded-2xl p-6 border border-slate-200">
|
||||||
|
<h3 className="font-bold text-slate-800 mb-6 text-center text-lg">Detailed P&L Statement</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center pb-4 border-b border-slate-200">
|
||||||
|
<span className="font-bold text-slate-600">Gross Rental Revenue</span>
|
||||||
|
<span className="text-xl font-bold text-slate-800">৳{(investment.actualEarnings / 0.55).toFixed(0)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 py-2">
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-slate-500">Platform Management Fee (45%)</span>
|
||||||
|
<span className="text-red-500 font-bold">-৳{((investment.actualEarnings / 0.55) * 0.45).toFixed(0)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-slate-500">Fleet Insurance & Maintenance</span>
|
||||||
|
<span className="text-green-600 font-bold tracking-tight uppercase text-[10px]">Included in Platform Fee</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center pt-4 border-t-2 border-slate-300">
|
||||||
|
<span className="text-lg font-extrabold text-slate-800">Net Return to Investor</span>
|
||||||
|
<span className="text-2xl font-extrabold text-green-600">৳{investment.actualEarnings.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'transactions' && (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left">
|
||||||
|
<thead className="bg-slate-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider">Date</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider">Description</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider text-right">Amount</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-bold text-slate-500 uppercase tracking-wider">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-100">
|
||||||
|
{investmentTransactions.map(t => (
|
||||||
|
<tr key={t.id} className="hover:bg-slate-50 transition-colors">
|
||||||
|
<td className="px-4 py-4 text-sm text-slate-600 whitespace-nowrap">{t.createdAt}</td>
|
||||||
|
<td className="px-4 py-4">
|
||||||
|
<p className="text-sm font-bold text-slate-800">{t.description}</p>
|
||||||
|
<p className="text-xs text-slate-400">Ref: {t.id}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-4 text-sm font-extrabold text-green-600 text-right">
|
||||||
|
+৳{t.amount.toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-4">
|
||||||
|
<span className="inline-flex px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">
|
||||||
|
Completed
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
|
||||||
|
<h4 className="font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<Zap className="w-5 h-5 text-amber-500" /> Quick Actions
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<button onClick={() => toast.success('Printing report...')} className="w-full px-4 py-3 border border-slate-200 text-slate-700 rounded-xl text-sm font-bold hover:bg-slate-50 flex items-center gap-3 transition-all">
|
||||||
|
<Printer className="w-5 h-5 text-slate-400" /> Print Summary
|
||||||
|
</button>
|
||||||
|
<button onClick={() => toast.success('Exporting to Excel...')} className="w-full px-4 py-3 border border-slate-200 text-slate-700 rounded-xl text-sm font-bold hover:bg-slate-50 flex items-center gap-3 transition-all">
|
||||||
|
<BarChart3 className="w-5 h-5 text-slate-400" /> Export Data
|
||||||
|
</button>
|
||||||
|
<button onClick={() => router.push('/investor/withdraw')} className="w-full px-4 py-3 bg-investor text-white rounded-xl text-sm font-bold hover:bg-investor-dark flex items-center gap-3 shadow-md shadow-investor/20 transition-all">
|
||||||
|
<DollarSign className="w-5 h-5" /> Withdraw Earnings
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-blue-50 border border-blue-100 rounded-2xl p-5">
|
||||||
|
<h4 className="font-bold text-blue-800 mb-3 flex items-center gap-2">
|
||||||
|
<Smartphone className="w-5 h-5 text-blue-600" /> Support Desk
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-blue-700 mb-4 font-medium leading-relaxed">
|
||||||
|
Need help with this investment or bike assignment? Our team is available 24/7.
|
||||||
|
</p>
|
||||||
|
<button onClick={() => toast.success('Connecting to support...')} className="w-full py-2.5 bg-blue-600 text-white rounded-xl font-bold text-sm hover:bg-blue-700 transition-colors">
|
||||||
|
Contact Support
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,75 +1,185 @@
|
|||||||
import StatCard from '@/components/StatCard';
|
|
||||||
import TransactionList from '@/components/TransactionList';
|
|
||||||
import { investors, bikes, transactions } from '@/data/mockData';
|
import { investors, bikes, transactions } from '@/data/mockData';
|
||||||
import { Wallet, TrendingUp, Bike, Target, DollarSign, FileText, Phone, BarChart3, Send, ArrowDownToLine } from 'lucide-react';
|
import { Wallet, TrendingUp, Bike, Target, DollarSign, FileText, Phone, BarChart3, Clock, ArrowRight, ShieldCheck, Zap, AlertCircle } from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import TransactionList from '@/components/TransactionList';
|
||||||
|
|
||||||
export default function InvestorPage() {
|
export default function InvestorDashboardPage() {
|
||||||
const investor = investors[0];
|
const investor = investors[0]; // mock logged-in investor
|
||||||
const investorBikes = bikes.filter(b => b.investorId === investor?.id || b.status === 'rented');
|
const investorBikes = bikes.filter(b => b.investorId === investor?.id);
|
||||||
|
const recentTransactions = transactions.filter(t => t.investorId === investor.id).slice(0, 5);
|
||||||
|
|
||||||
|
const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.withdrawalPending;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 lg:p-6">
|
<div className="p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
|
||||||
<div className="mb-6">
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 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>
|
<div>
|
||||||
<p className="font-medium text-slate-700">{bike.model}</p>
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Welcome back, {investor.name.split(' ')[0]} 👋</h1>
|
||||||
<p className="text-xs text-slate-400">{bike.plateNumber}</p>
|
<p className="text-sm text-slate-500">Here's what's happening with your investments today.</p>
|
||||||
</div>
|
</div>
|
||||||
<span className={`text-xs font-medium px-2 py-1 rounded-full ${
|
<div className="flex items-center gap-2">
|
||||||
|
{investor.kycStatus === 'verified' ? (
|
||||||
|
<span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-green-50 border border-green-100 text-green-700 text-xs font-bold">
|
||||||
|
<ShieldCheck className="w-4 h-4" /> KYC Verified
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<Link href="/investor/profile" className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-amber-50 border border-amber-200 text-amber-700 text-xs font-bold hover:bg-amber-100 transition-colors">
|
||||||
|
<AlertCircle className="w-4 h-4" /> Complete KYC
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
<Link href="/investor/plans" className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-bold hover:bg-investor-dark transition-colors flex items-center gap-2 shadow-sm shadow-investor/20">
|
||||||
|
<Zap className="w-4 h-4" /> New Investment
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm relative overflow-hidden group hover:border-investor/30 transition-all">
|
||||||
|
<div className="absolute -right-4 -top-4 w-16 h-16 bg-purple-50 rounded-full group-hover:scale-150 transition-transform duration-500"></div>
|
||||||
|
<div className="flex items-center gap-3 mb-2 relative z-10">
|
||||||
|
<div className="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Wallet className="w-5 h-5 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Total Invested</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800 relative z-10">৳{(investor.totalInvested / 1000).toFixed(0)}k</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm relative overflow-hidden group hover:border-green-500/30 transition-all">
|
||||||
|
<div className="absolute -right-4 -top-4 w-16 h-16 bg-green-50 rounded-full group-hover:scale-150 transition-transform duration-500"></div>
|
||||||
|
<div className="flex items-center gap-3 mb-2 relative z-10">
|
||||||
|
<div className="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-5 h-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Total Earnings</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-green-600 relative z-10">৳{(investor.totalEarnings / 1000).toFixed(1)}k</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm relative overflow-hidden group hover:border-amber-500/30 transition-all">
|
||||||
|
<div className="absolute -right-4 -top-4 w-16 h-16 bg-amber-50 rounded-full group-hover:scale-150 transition-transform duration-500"></div>
|
||||||
|
<div className="flex items-center gap-3 mb-2 relative z-10">
|
||||||
|
<div className="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Bike className="w-5 h-5 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Active Bikes</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-amber-600 relative z-10">{investor.activeBikes}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white rounded-2xl p-5 border border-slate-200 shadow-sm relative overflow-hidden group hover:border-blue-500/30 transition-all">
|
||||||
|
<div className="absolute -right-4 -top-4 w-16 h-16 bg-blue-50 rounded-full group-hover:scale-150 transition-transform duration-500"></div>
|
||||||
|
<div className="flex items-center gap-3 mb-2 relative z-10">
|
||||||
|
<div className="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||||
|
<Target className="w-5 h-5 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-500 font-medium">Avg. ROI</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-blue-600 relative z-10">{investor.roi}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div className="lg:col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm flex flex-col">
|
||||||
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
||||||
|
<h2 className="font-bold text-slate-800 flex items-center gap-2">
|
||||||
|
<Bike className="w-5 h-5 text-slate-400" /> My Portfolio Overview
|
||||||
|
</h2>
|
||||||
|
<Link href="/investor/plans" className="text-sm font-semibold text-investor hover:text-investor-dark flex items-center gap-1">
|
||||||
|
View All <ArrowRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 flex-1">
|
||||||
|
{investorBikes.length > 0 ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{investorBikes.slice(0, 3).map(bike => (
|
||||||
|
<Link
|
||||||
|
key={bike.id}
|
||||||
|
href={`/investor/investments/${investor.investments?.[0].id || 'ip1'}`}
|
||||||
|
className="flex items-center gap-4 p-3 hover:bg-slate-50 rounded-xl transition-colors border border-transparent hover:border-slate-100 group"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 bg-slate-100 rounded-lg overflow-hidden shrink-0">
|
||||||
|
<img src={bike.image} alt={bike.model} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className="font-bold text-slate-800 truncate group-hover:text-investor transition-colors">{bike.model}</h4>
|
||||||
|
<p className="text-xs text-slate-500">{bike.plateNumber}</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="font-bold text-green-600">৳{bike.currentRent || 0}</p>
|
||||||
|
<p className="text-[10px] text-slate-400 uppercase">Daily Rent</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className={`inline-flex px-2 py-1 rounded text-[10px] font-bold uppercase ${
|
||||||
bike.status === 'rented' ? 'bg-green-100 text-green-700' :
|
bike.status === 'rented' ? 'bg-green-100 text-green-700' :
|
||||||
bike.status === 'available' ? 'bg-blue-100 text-blue-700' :
|
bike.status === 'available' ? 'bg-blue-100 text-blue-700' : 'bg-amber-100 text-amber-700'
|
||||||
'bg-amber-100 text-amber-700'
|
|
||||||
}`}>
|
}`}>
|
||||||
{bike.status}
|
{bike.status}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="h-full flex flex-col items-center justify-center text-center py-8">
|
||||||
|
<div className="w-12 h-12 bg-slate-50 rounded-full flex items-center justify-center mb-3">
|
||||||
|
<Bike className="w-6 h-6 text-slate-300" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-semibold text-slate-700">No bikes assigned yet</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1 max-w-[200px]">Once you make an investment, assigned bikes will appear here.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-white rounded-xl p-5 shadow-sm border border-slate-100">
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm flex flex-col">
|
||||||
<h2 className="font-bold text-slate-800 mb-4">Quick Actions</h2>
|
<div className="p-5 border-b border-slate-100">
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<h2 className="font-bold text-slate-800">Quick Actions</h2>
|
||||||
<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">
|
</div>
|
||||||
<DollarSign className="w-4 h-4" /> Withdraw
|
<div className="p-5 flex-1 flex flex-col gap-3">
|
||||||
</button>
|
<div className="bg-investor/5 border border-investor/10 rounded-xl p-4 mb-2">
|
||||||
<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">
|
<p className="text-xs text-investor font-semibold mb-1 uppercase">Available to Withdraw</p>
|
||||||
<FileText className="w-4 h-4" /> Statement
|
<p className="text-2xl font-extrabold text-investor mb-3">৳{availableBalance.toLocaleString()}</p>
|
||||||
</button>
|
<Link href="/investor/withdraw" className="w-full py-2.5 bg-investor text-white rounded-lg font-bold text-sm hover:bg-investor-dark flex items-center justify-center gap-2 shadow-sm shadow-investor/20 transition-all">
|
||||||
<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">
|
<DollarSign className="w-4 h-4" /> Withdraw Funds
|
||||||
<Phone className="w-4 h-4" /> Support
|
</Link>
|
||||||
</button>
|
</div>
|
||||||
<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
|
<Link href="/investor/profile" className="flex items-center gap-3 p-3 border border-slate-100 rounded-xl hover:bg-slate-50 transition-colors group">
|
||||||
</button>
|
<div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-white group-hover:shadow-sm transition-all">
|
||||||
|
<FileText className="w-5 h-5 text-slate-500 group-hover:text-investor" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-semibold text-sm text-slate-800">Update KYC</p>
|
||||||
|
<p className="text-xs text-slate-500">Manage documents</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link href="/investor/plans" className="flex items-center gap-3 p-3 border border-slate-100 rounded-xl hover:bg-slate-50 transition-colors group">
|
||||||
|
<div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center group-hover:bg-white group-hover:shadow-sm transition-all">
|
||||||
|
<BarChart3 className="w-5 h-5 text-slate-500 group-hover:text-investor" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-semibold text-sm text-slate-800">Earnings & P&L</p>
|
||||||
|
<p className="text-xs text-slate-500">View detailed reports</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm">
|
||||||
<h2 className="text-lg font-bold text-slate-800 mb-3">Transaction History</h2>
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
||||||
<TransactionList transactions={transactions.filter(t => t.userId === 'u7')} />
|
<h2 className="font-bold text-slate-800 flex items-center gap-2">
|
||||||
|
<Clock className="w-5 h-5 text-slate-400" /> Recent Transactions
|
||||||
|
</h2>
|
||||||
|
<button className="text-sm font-semibold text-investor hover:text-investor-dark flex items-center gap-1">
|
||||||
|
View All <ArrowRight className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-0">
|
||||||
|
<TransactionList transactions={recentTransactions} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
394
src/app/investor/plans/new/page.tsx
Normal file
394
src/app/investor/plans/new/page.tsx
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ArrowLeft, Zap, Shield, TrendingUp, Check, Info,
|
||||||
|
Calendar, DollarSign, CreditCard, FileText, ChevronRight,
|
||||||
|
AlertCircle, ArrowDown, Wallet, Clock, Activity
|
||||||
|
} from 'lucide-react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
const PLAN_TEMPLATES = [
|
||||||
|
{
|
||||||
|
id: '1bike',
|
||||||
|
name: '1 Bike Plan',
|
||||||
|
description: 'Investment plan for 1 bike - perfect for small investors',
|
||||||
|
evBasePrice: 200000,
|
||||||
|
minQty: 1,
|
||||||
|
minInvestment: 200000,
|
||||||
|
maxInvestment: 1000000,
|
||||||
|
duration: 12,
|
||||||
|
lockIn: 3,
|
||||||
|
exitPenalty: 10,
|
||||||
|
ficoShare: { single: 45, own: 55, ev: 60 },
|
||||||
|
icon: Zap,
|
||||||
|
color: 'bg-blue-600',
|
||||||
|
lightColor: 'bg-blue-50 text-blue-700'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5bike',
|
||||||
|
name: '5 Bike Plan',
|
||||||
|
description: 'Perfect for established investors looking for better returns',
|
||||||
|
evBasePrice: 180000,
|
||||||
|
minQty: 5,
|
||||||
|
minInvestment: 900000,
|
||||||
|
maxInvestment: 5000000,
|
||||||
|
duration: 24,
|
||||||
|
lockIn: 6,
|
||||||
|
exitPenalty: 15,
|
||||||
|
ficoShare: { single: 40, own: 50, ev: 55 },
|
||||||
|
icon: TrendingUp,
|
||||||
|
color: 'bg-purple-600',
|
||||||
|
lightColor: 'bg-purple-50 text-purple-700'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function NewInvestmentPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [step, setStep] = useState<'select' | 'form'>('select');
|
||||||
|
const [selectedTemplate, setSelectedTemplate] = useState<typeof PLAN_TEMPLATES[0] | null>(null);
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
planName: '',
|
||||||
|
planType: 'Gold',
|
||||||
|
investmentAmount: 0,
|
||||||
|
initialPayment: 0,
|
||||||
|
startDate: new Date().toISOString().split('T')[0],
|
||||||
|
endDate: '',
|
||||||
|
paymentMethod: 'Bank Transfer',
|
||||||
|
transactionRef: '',
|
||||||
|
description: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSelectTemplate = (template: typeof PLAN_TEMPLATES[0]) => {
|
||||||
|
setSelectedTemplate(template);
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
planName: template.name,
|
||||||
|
investmentAmount: template.minInvestment,
|
||||||
|
initialPayment: Math.floor(template.minInvestment * 0.5) // Default 50% initial
|
||||||
|
});
|
||||||
|
setStep('form');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateInvestment = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (formData.investmentAmount < (selectedTemplate?.minInvestment || 0)) {
|
||||||
|
toast.error(`Minimum investment for this plan is ৳${selectedTemplate?.minInvestment.toLocaleString()}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success('Investment request created successfully! Admin will review and assign bikes.');
|
||||||
|
router.push('/investor/plans');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 lg:p-6 max-w-5xl mx-auto mb-20 lg:mb-0">
|
||||||
|
<div className="flex items-center gap-4 mb-8">
|
||||||
|
<button
|
||||||
|
onClick={() => step === 'form' ? setStep('select') : router.back()}
|
||||||
|
className="p-2 hover:bg-slate-100 rounded-xl transition-colors border border-slate-200"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">
|
||||||
|
{step === 'select' ? 'Select Investment Plan' : 'Configure New Investment'}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-slate-500">
|
||||||
|
{step === 'select' ? 'Choose a template to start' : `Set up investment under ${selectedTemplate?.name}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{step === 'select' && (
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{PLAN_TEMPLATES.map((plan) => {
|
||||||
|
const Icon = plan.icon;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={plan.id}
|
||||||
|
className="bg-white rounded-2xl border-2 border-slate-100 p-6 hover:border-investor transition-all group cursor-pointer shadow-sm hover:shadow-md"
|
||||||
|
onClick={() => handleSelectTemplate(plan)}
|
||||||
|
>
|
||||||
|
<div className={`w-14 h-14 rounded-2xl mb-6 flex items-center justify-center ${plan.lightColor}`}>
|
||||||
|
<Icon className="w-7 h-7" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-extrabold text-slate-800 mb-2">{plan.name}</h3>
|
||||||
|
<p className="text-sm text-slate-500 mb-6 leading-relaxed">{plan.description}</p>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-8">
|
||||||
|
<div className="flex justify-between items-center text-sm">
|
||||||
|
<span className="text-slate-400 font-medium">Min Investment</span>
|
||||||
|
<span className="text-slate-800 font-extrabold">৳{plan.minInvestment.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center text-sm">
|
||||||
|
<span className="text-slate-400 font-medium">EV Base Price</span>
|
||||||
|
<span className="text-slate-800 font-extrabold">৳{plan.evBasePrice.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center text-sm">
|
||||||
|
<span className="text-slate-400 font-medium">Duration</span>
|
||||||
|
<span className="text-slate-800 font-extrabold">{plan.duration} Months</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="w-full py-3.5 bg-slate-50 text-slate-800 rounded-xl font-bold group-hover:bg-investor group-hover:text-white transition-all flex items-center justify-center gap-2">
|
||||||
|
Select Template <ChevronRight className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{step === 'form' && selectedTemplate && (
|
||||||
|
<form onSubmit={handleCreateInvestment} className="space-y-6">
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2 space-y-6">
|
||||||
|
{/* Core Configuration */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<h3 className="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
|
||||||
|
<FileText className="w-5 h-5 text-investor" /> Plan Configuration
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-5 mb-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-bold text-slate-700 mb-2">Plan Name *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.planName}
|
||||||
|
onChange={(e) => setFormData({...formData, planName: e.target.value})}
|
||||||
|
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 focus:border-investor outline-none transition-all font-medium"
|
||||||
|
placeholder="e.g. My First Bike"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-bold text-slate-700 mb-2">Plan Type</label>
|
||||||
|
<select
|
||||||
|
value={formData.planType}
|
||||||
|
onChange={(e) => setFormData({...formData, planType: e.target.value})}
|
||||||
|
className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 focus:border-investor outline-none transition-all font-medium"
|
||||||
|
>
|
||||||
|
<option>Gold</option>
|
||||||
|
<option>Silver</option>
|
||||||
|
<option>Platinum</option>
|
||||||
|
<option>Diamond</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100 mb-6 text-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase mb-1">EV Base Price</p>
|
||||||
|
<p className="text-sm font-bold text-slate-800">৳{selectedTemplate.evBasePrice.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase mb-1">Min Qty</p>
|
||||||
|
<p className="text-sm font-bold text-slate-800">{selectedTemplate.minQty} Bike(s)</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase mb-1">Min Invest</p>
|
||||||
|
<p className="text-sm font-bold text-slate-800">৳{selectedTemplate.minInvestment.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase mb-1">Max Invest</p>
|
||||||
|
<p className="text-sm font-bold text-slate-800">৳{selectedTemplate.maxInvestment.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-5">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-bold text-slate-700 mb-2">Investment Amount (৳) *</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.investmentAmount}
|
||||||
|
onChange={(e) => setFormData({...formData, investmentAmount: Number(e.target.value)})}
|
||||||
|
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 focus:border-investor outline-none transition-all font-extrabold"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-bold text-slate-700 mb-2">Initial Payment (৳) *</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.initialPayment}
|
||||||
|
onChange={(e) => setFormData({...formData, initialPayment: Number(e.target.value)})}
|
||||||
|
className="w-full px-4 py-3 border border-investor rounded-xl text-sm focus:ring-2 focus:ring-investor/20 outline-none transition-all font-extrabold text-investor"
|
||||||
|
placeholder="Amount to pay now"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="text-[10px] text-slate-400 mt-1 font-medium">Pay part of your investment now to confirm</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profit Sharing Policy */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<TrendingUp className="w-5 h-5 text-investor" /> FICO Share - Jaiben's Profit per Ride
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-slate-500 mb-6 font-medium">Profit sharing when bikes are rented to end customers</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div className="bg-slate-50 rounded-xl p-4 border border-slate-100 text-center">
|
||||||
|
<p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Single Rent</p>
|
||||||
|
<p className="text-xl font-extrabold text-slate-800">{selectedTemplate.ficoShare.single}%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-xl p-4 border border-slate-100 text-center">
|
||||||
|
<p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Rent to Own</p>
|
||||||
|
<p className="text-xl font-extrabold text-slate-800">{selectedTemplate.ficoShare.own}%</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-xl p-4 border border-slate-100 text-center">
|
||||||
|
<p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Share an EV</p>
|
||||||
|
<p className="text-xl font-extrabold text-slate-800">{selectedTemplate.ficoShare.ev}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auto-Journal Entry Visualization */}
|
||||||
|
<div className="bg-slate-900 rounded-2xl p-6 shadow-xl overflow-hidden relative">
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-investor/10 rounded-full blur-3xl -mr-16 -mt-16" />
|
||||||
|
<h3 className="text-lg font-bold text-white mb-6 flex items-center gap-2">
|
||||||
|
<Activity className="w-5 h-5 text-investor" /> Auto-Journal Entry (Draft)
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4 relative z-10">
|
||||||
|
<div className="flex justify-between items-center text-xs font-bold uppercase text-slate-400 mb-2 px-2">
|
||||||
|
<span>Account Details</span>
|
||||||
|
<span>Amount (৳)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/5 border border-white/10 rounded-xl p-4 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-green-400 font-bold uppercase mb-1">Debit (Dr)</p>
|
||||||
|
<p className="text-sm font-bold text-white">Bank - City Bank</p>
|
||||||
|
<p className="text-[10px] text-slate-500 font-mono">CODE: 1200</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg font-extrabold text-green-400">৳{formData.investmentAmount.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center -my-2 relative z-20">
|
||||||
|
<div className="bg-investor w-8 h-8 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
<ArrowDown className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white/5 border border-white/10 rounded-xl p-4 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-blue-400 font-bold uppercase mb-1">Credit (Cr)</p>
|
||||||
|
<p className="text-sm font-bold text-white">Investor Liabilities</p>
|
||||||
|
<p className="text-[10px] text-slate-500 font-mono">CODE: 2200</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg font-extrabold text-blue-400">৳{formData.investmentAmount.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4 border-t border-white/10 mt-2 flex justify-between items-center px-2">
|
||||||
|
<p className="text-[10px] text-slate-500 font-medium">Reference: <span className="text-slate-300 font-mono">INV/{new Date().getFullYear()}/AUTO-{Math.random().toString(36).substring(7).toUpperCase()}</span></p>
|
||||||
|
<p className="text-[10px] text-slate-500 font-medium tracking-tight uppercase">Status: <span className="text-amber-400">Draft - On Creation</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Time & Period */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<h3 className="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<Calendar className="w-5 h-5 text-investor" /> Schedule
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Start Date *</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={formData.startDate}
|
||||||
|
onChange={(e) => setFormData({...formData, startDate: e.target.value})}
|
||||||
|
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 outline-none font-bold"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">End Date (Optional)</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={formData.endDate}
|
||||||
|
onChange={(e) => setFormData({...formData, endDate: e.target.value})}
|
||||||
|
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 outline-none font-bold"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-blue-50 rounded-xl border border-blue-100 flex items-start gap-3">
|
||||||
|
<AlertCircle className="w-4 h-4 text-blue-600 shrink-0 mt-0.5" />
|
||||||
|
<p className="text-[10px] text-blue-700 font-medium leading-relaxed">
|
||||||
|
Duration is fixed at <strong>{selectedTemplate.duration} months</strong> with a <strong>{selectedTemplate.lockIn} month</strong> lock-in period as per template.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Details */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<h3 className="text-base font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<CreditCard className="w-5 h-5 text-investor" /> Payment
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Method</label>
|
||||||
|
<select
|
||||||
|
value={formData.paymentMethod}
|
||||||
|
onChange={(e) => setFormData({...formData, paymentMethod: e.target.value})}
|
||||||
|
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 outline-none font-bold"
|
||||||
|
>
|
||||||
|
<option>Bank Transfer</option>
|
||||||
|
<option>Mobile Banking</option>
|
||||||
|
<option>Cheque</option>
|
||||||
|
<option>Cash</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-[11px] font-bold text-slate-500 uppercase tracking-wider mb-2">Reference ID</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.transactionRef}
|
||||||
|
onChange={(e) => setFormData({...formData, transactionRef: e.target.value})}
|
||||||
|
className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-investor/20 outline-none font-bold"
|
||||||
|
placeholder="Auto-generated if empty"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="pt-4 border-t border-slate-100">
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<span className="text-xs text-slate-500 font-bold uppercase">Pay Now</span>
|
||||||
|
<span className="text-lg font-extrabold text-investor">৳{formData.initialPayment.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<span className="text-xs text-slate-500 font-bold uppercase">Balance Due</span>
|
||||||
|
<span className="text-sm font-bold text-slate-800">৳{(formData.investmentAmount - formData.initialPayment).toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-4 bg-investor text-white rounded-2xl font-bold text-lg shadow-lg shadow-investor/30 hover:bg-investor-dark transition-all transform hover:-translate-y-1 active:scale-95"
|
||||||
|
>
|
||||||
|
Create Investment
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep('select')}
|
||||||
|
className="w-full py-3 text-slate-600 font-bold text-sm hover:bg-slate-100 rounded-xl transition-colors"
|
||||||
|
>
|
||||||
|
Cancel & Back
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
139
src/app/investor/plans/page.tsx
Normal file
139
src/app/investor/plans/page.tsx
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Target, ArrowRight, Zap, TrendingUp, CreditCard, Plus, FileText, ChevronRight, Wallet, Clock, Percent } from 'lucide-react';
|
||||||
|
import { investors } from '@/data/mockData';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export default function MyInvestmentsPage() {
|
||||||
|
const investor = investors[0]; // mock logged-in investor
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 lg:p-6 max-w-6xl mx-auto mb-20 lg:mb-0">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800 mb-2">My Investments</h1>
|
||||||
|
<p className="text-slate-500">Manage your active portfolios and track your earnings.</p>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/investor/plans/new"
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-investor text-white rounded-xl font-bold shadow-lg shadow-investor/20 hover:bg-investor-dark transition-all transform hover:-translate-y-0.5 active:scale-95"
|
||||||
|
>
|
||||||
|
<Plus className="w-5 h-5" /> New Investment
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Portfolio Summary */}
|
||||||
|
<div className="mb-10 bg-slate-50 rounded-2xl p-6 border border-slate-200">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
|
||||||
|
<Target className="w-5 h-5 text-investor" /> Portfolio Overview
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||||
|
<Wallet className="w-5 h-5 text-purple-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Total Invested</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">৳{investor.totalInvested.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||||
|
<TrendingUp className="w-5 h-5 text-green-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Total Returns</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-green-600">৳{investor.totalEarnings.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-5 rounded-xl shadow-sm border border-slate-200">
|
||||||
|
<div className="flex items-center gap-3 mb-3">
|
||||||
|
<div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
|
||||||
|
<Clock className="w-5 h-5 text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 font-bold uppercase tracking-wider">Active Bikes</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl font-extrabold text-slate-800">{investor.activeBikes} Units</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* My Active Investments List */}
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
||||||
|
<h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
|
||||||
|
<Zap className="w-5 h-5 text-investor" /> Active Investment Plans
|
||||||
|
</h2>
|
||||||
|
<span className="text-xs font-bold px-3 py-1 bg-investor/10 text-investor rounded-full">
|
||||||
|
{investor.investments?.length || 0} Total
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-slate-50 border-b border-slate-100">
|
||||||
|
<th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Investment Plan</th>
|
||||||
|
<th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Capital Invested</th>
|
||||||
|
<th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Actual Returns</th>
|
||||||
|
<th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider">Status</th>
|
||||||
|
<th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-100">
|
||||||
|
{investor.investments && investor.investments.length > 0 ? investor.investments.map((inv) => (
|
||||||
|
<tr key={inv.id} className="hover:bg-slate-50 transition-colors group">
|
||||||
|
<td className="px-6 py-5">
|
||||||
|
<p className="text-base font-bold text-slate-800">{inv.planName}</p>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<span className="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded font-bold uppercase">{inv.planType}</span>
|
||||||
|
<span className="text-[10px] text-slate-400 font-medium">Started: {inv.startDate}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-5">
|
||||||
|
<p className="text-sm font-extrabold text-slate-700">৳{inv.totalInvestment.toLocaleString()}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-5 text-right">
|
||||||
|
<p className="text-sm font-extrabold text-green-600">৳{inv.actualEarnings.toLocaleString()}</p>
|
||||||
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">+{inv.expectedRoi}% ROI</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-5">
|
||||||
|
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[10px] font-bold uppercase ${
|
||||||
|
inv.status === 'active' ? 'bg-green-50 text-green-700 border border-green-100' : 'bg-slate-50 text-slate-600 border border-slate-100'
|
||||||
|
}`}>
|
||||||
|
<div className={`w-1.5 h-1.5 rounded-full ${inv.status === 'active' ? 'bg-green-500' : 'bg-slate-400'}`} />
|
||||||
|
{inv.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-5 text-right">
|
||||||
|
<Link
|
||||||
|
href={`/investor/investments/${inv.id}`}
|
||||||
|
className="inline-flex items-center gap-2 text-investor hover:text-investor-dark font-bold text-sm transition-all group-hover:gap-3"
|
||||||
|
>
|
||||||
|
View Details <ChevronRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="px-6 py-16 text-center">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<Target className="w-12 h-12 text-slate-200 mb-3" />
|
||||||
|
<p className="text-slate-500 font-bold">No active investments found.</p>
|
||||||
|
<Link href="/investor/plans/new" className="mt-4 text-invest-600 font-bold text-sm hover:underline">
|
||||||
|
Start your first investment
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1106
src/app/investor/profile/page.tsx
Normal file
1106
src/app/investor/profile/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
224
src/app/investor/withdraw/page.tsx
Normal file
224
src/app/investor/withdraw/page.tsx
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { CreditCard, Wallet, ArrowUpRight, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, ChevronDown } from 'lucide-react';
|
||||||
|
import { investors, transactions } from '@/data/mockData';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export default function InvestorWithdrawPage() {
|
||||||
|
const investor = investors[0]; // mock logged-in investor
|
||||||
|
const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.withdrawalPending;
|
||||||
|
|
||||||
|
const withdrawHistory = transactions.filter(t => t.investorId === investor.id && t.type === 'withdrawal').sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
|
||||||
|
|
||||||
|
const [amount, setAmount] = useState('');
|
||||||
|
const [method, setMethod] = useState<'bank' | 'mobile'>('bank');
|
||||||
|
const [selectedAccount, setSelectedAccount] = useState('');
|
||||||
|
|
||||||
|
const handleWithdraw = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const withdrawAmount = Number(amount);
|
||||||
|
if (!withdrawAmount || withdrawAmount <= 0) {
|
||||||
|
toast.error('Please enter a valid amount');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (withdrawAmount > availableBalance) {
|
||||||
|
toast.error('Insufficient available balance');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!selectedAccount) {
|
||||||
|
toast.error('Please select an account to receive funds');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success(`Withdrawal request for ৳${withdrawAmount.toLocaleString()} submitted successfully.`);
|
||||||
|
setAmount('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Withdraw Funds</h1>
|
||||||
|
<p className="text-sm text-slate-500">Request withdrawals to your bank or mobile banking accounts</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6 mb-8">
|
||||||
|
{/* Balance Overview */}
|
||||||
|
<div className="lg:col-span-1 space-y-4">
|
||||||
|
<div className="bg-investor rounded-2xl p-6 text-white shadow-lg shadow-investor/20 relative overflow-hidden">
|
||||||
|
<div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/3 blur-2xl"></div>
|
||||||
|
<div className="relative z-10">
|
||||||
|
<div className="flex items-center gap-2 text-investor-light mb-2">
|
||||||
|
<Wallet className="w-5 h-5" />
|
||||||
|
<span className="font-medium text-sm">Available Balance</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-extrabold mb-1">
|
||||||
|
৳{availableBalance.toLocaleString()}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xs text-white/80">Ready to withdraw</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 pt-4 border-t border-white/20 grid grid-cols-2 gap-4 relative z-10">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/70 mb-1">Total Earnings</p>
|
||||||
|
<p className="font-semibold">৳{investor.totalEarnings.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-white/70 mb-1">Total Withdrawn</p>
|
||||||
|
<p className="font-semibold">৳{investor.totalWithdrawn.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
|
||||||
|
<AlertCircle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<h4 className="text-sm font-bold text-amber-800 mb-1">Pending Requests</h4>
|
||||||
|
<p className="text-xs text-amber-700">You currently have <b>৳{investor.withdrawalPending.toLocaleString()}</b> in pending withdrawals. Processing takes 1-3 business days.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Withdrawal Form */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm">
|
||||||
|
<h3 className="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
|
||||||
|
<ArrowUpRight className="w-5 h-5 text-investor" /> Create Withdrawal Request
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<form onSubmit={handleWithdraw} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-700 mb-2">Amount (৳)</label>
|
||||||
|
<div className="relative">
|
||||||
|
<span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 font-bold">৳</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={amount}
|
||||||
|
onChange={(e) => setAmount(e.target.value)}
|
||||||
|
placeholder="0.00"
|
||||||
|
className="w-full pl-8 pr-4 py-3 border border-slate-200 rounded-xl text-lg font-semibold focus:outline-none focus:border-investor focus:ring-1 focus:ring-investor transition-all"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setAmount(availableBalance.toString())}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 px-3 py-1 bg-slate-100 text-xs font-bold text-slate-600 rounded-lg hover:bg-slate-200"
|
||||||
|
>
|
||||||
|
MAX
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-700 mb-3">Withdrawal Method</label>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div
|
||||||
|
onClick={() => setMethod('bank')}
|
||||||
|
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${method === 'bank' ? 'border-investor bg-investor/5' : 'border-slate-100 bg-white hover:border-slate-200'}`}
|
||||||
|
>
|
||||||
|
<Building2 className={`w-6 h-6 mb-2 ${method === 'bank' ? 'text-investor' : 'text-slate-400'}`} />
|
||||||
|
<p className={`font-semibold text-sm ${method === 'bank' ? 'text-investor' : 'text-slate-600'}`}>Bank Transfer</p>
|
||||||
|
<p className="text-xs text-slate-500">1-3 business days</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
onClick={() => setMethod('mobile')}
|
||||||
|
className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${method === 'mobile' ? 'border-investor bg-investor/5' : 'border-slate-100 bg-white hover:border-slate-200'}`}
|
||||||
|
>
|
||||||
|
<Smartphone className={`w-6 h-6 mb-2 ${method === 'mobile' ? 'text-investor' : 'text-slate-400'}`} />
|
||||||
|
<p className={`font-semibold text-sm ${method === 'mobile' ? 'text-investor' : 'text-slate-600'}`}>Mobile Banking</p>
|
||||||
|
<p className="text-xs text-slate-500">Instant transfer</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold text-slate-700 mb-2">Select Account</label>
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={selectedAccount}
|
||||||
|
onChange={(e) => setSelectedAccount(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm appearance-none focus:outline-none focus:border-investor focus:ring-1 focus:ring-investor transition-all bg-white"
|
||||||
|
>
|
||||||
|
<option value="" disabled>Choose an account...</option>
|
||||||
|
{method === 'bank' ? (
|
||||||
|
investor.bankAccounts?.map(acc => (
|
||||||
|
<option key={acc.id} value={acc.id}>{acc.bankName} - {acc.accountNumber} {acc.isPrimary ? '(Primary)' : ''}</option>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<option value="bkash">{investor.mobileBanking} - {investor.mobileBankingNumber}</option>
|
||||||
|
{investor.additionalMobileBanking?.map((acc, idx) => (
|
||||||
|
<option key={idx} value={`mob-${idx}`}>{acc.provider} - {acc.number}</option>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
<ChevronDown className="w-4 h-4 text-slate-500 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-3.5 bg-investor text-white rounded-xl font-bold text-sm shadow-md shadow-investor/20 hover:bg-investor-dark transition-all flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<CreditCard className="w-4 h-4" /> Submit Withdrawal Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Withdrawal History */}
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
|
||||||
|
<History className="w-5 h-5 text-slate-400" /> Recent Withdrawals
|
||||||
|
</h3>
|
||||||
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-slate-50 border-b border-slate-100">
|
||||||
|
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
|
||||||
|
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Ref / Desc</th>
|
||||||
|
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Method</th>
|
||||||
|
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-100">
|
||||||
|
{withdrawHistory.length > 0 ? withdrawHistory.map((t) => (
|
||||||
|
<tr key={t.id} className="hover:bg-slate-50 transition-colors">
|
||||||
|
<td className="px-5 py-4 text-sm text-slate-600 whitespace-nowrap">{t.createdAt}</td>
|
||||||
|
<td className="px-5 py-4">
|
||||||
|
<p className="text-sm font-medium text-slate-800">{t.referenceNumber || 'Withdrawal'}</p>
|
||||||
|
<p className="text-xs text-slate-500 truncate max-w-[200px]">{t.description}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-5 py-4 text-sm text-slate-600 capitalize">{t.paymentMethod}</td>
|
||||||
|
<td className="px-5 py-4 text-sm font-bold text-slate-800">৳{t.amount.toLocaleString()}</td>
|
||||||
|
<td className="px-5 py-4">
|
||||||
|
<span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs font-semibold ${t.status === 'completed' ? 'bg-green-100 text-green-700' :
|
||||||
|
t.status === 'pending' ? 'bg-amber-100 text-amber-700' :
|
||||||
|
'bg-red-100 text-red-700'
|
||||||
|
}`}>
|
||||||
|
{t.status === 'completed' && <CheckCircle className="w-3 h-3" />}
|
||||||
|
{t.status === 'pending' && <Clock className="w-3 h-3" />}
|
||||||
|
{t.status}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="px-5 py-8 text-center text-sm text-slate-500">
|
||||||
|
No withdrawal history found.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -22,7 +22,8 @@ import {
|
|||||||
ChevronDown,
|
ChevronDown,
|
||||||
LogOut,
|
LogOut,
|
||||||
Calculator,
|
Calculator,
|
||||||
Wrench
|
Wrench,
|
||||||
|
Target, User
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { getUserName, getUserRole, logout } from '@/lib/auth';
|
import { getUserName, getUserRole, logout } from '@/lib/auth';
|
||||||
|
|
||||||
@@ -64,7 +65,10 @@ const bikerNavItems = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const investorNavItems = [
|
const investorNavItems = [
|
||||||
{ label: 'Dashboard', href: '/investor', icon: Wallet },
|
{ label: 'Dashboard', href: '/investor', icon: BarChart3 },
|
||||||
|
{ label: 'My Investments', href: '/investor/plans', icon: Target },
|
||||||
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
||||||
|
{ label: 'My Profile', href: '/investor/profile', icon: User },
|
||||||
];
|
];
|
||||||
|
|
||||||
const shopNavItems = [
|
const shopNavItems = [
|
||||||
@@ -100,8 +104,8 @@ export default function Sidebar() {
|
|||||||
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
|
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
|
||||||
{ label: 'Users', href: '/admin/users', icon: Users },
|
{ label: 'Users', href: '/admin/users', icon: Users },
|
||||||
] : isInvestor ? [
|
] : isInvestor ? [
|
||||||
{ label: 'Home', href: '/investor', icon: Wallet },
|
{ label: 'Home', href: '/investor', icon: BarChart3 },
|
||||||
{ label: 'Portfolio', href: '/investor/portfolio', icon: BarChart3 },
|
{ label: 'Investments', href: '/investor/plans', icon: Target },
|
||||||
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
||||||
] : isShop ? [
|
] : isShop ? [
|
||||||
{ label: 'Home', href: '/shop', icon: Store },
|
{ label: 'Home', href: '/shop', icon: Store },
|
||||||
|
|||||||
Reference in New Issue
Block a user