From 18b29d535b19343b96575940f00b6d09cc2aeb5c Mon Sep 17 00:00:00 2001 From: sazzadulalambd Date: Fri, 15 May 2026 18:49:26 +0600 Subject: [PATCH] feat: update investment details page with mock data, navigation enhancements, and refined layout --- src/app/investor/investments/[id]/page.tsx | 559 +++++++++++---------- 1 file changed, 287 insertions(+), 272 deletions(-) diff --git a/src/app/investor/investments/[id]/page.tsx b/src/app/investor/investments/[id]/page.tsx index 9560dd9..0ae2825 100644 --- a/src/app/investor/investments/[id]/page.tsx +++ b/src/app/investor/investments/[id]/page.tsx @@ -7,9 +7,9 @@ import { ArrowLeft, TrendingUp, Bike, DollarSign, Calendar, CreditCard, FileText, Download, Check, Printer, BarChart3, Wallet, Clock, Shield, Percent, Activity, AlertTriangle, - Receipt, CreditCardIcon, Zap, Smartphone, ChevronRight, Target + Receipt, Zap, Smartphone, ChevronRight, Target, Battery, MapPin, Gauge, User } from 'lucide-react'; -import { investors, bikes, transactions } from '@/data/mockData'; +import { investors, bikes, transactions, rentalPayments } from '@/data/mockData'; import toast from 'react-hot-toast'; import InvestorNotification from '@/components/InvestorNotification'; @@ -18,20 +18,23 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi const { id: investmentId } = resolvedParams; const router = useRouter(); - const investor = investors[0]; // mock logged-in investor + const investor = investors[0]; const investment = investor.investments?.find((inv: any) => inv.id === investmentId); const [activeTab, setActiveTab] = useState('overview'); if (!investment) { return ( -
-
-

Investment Not Found

-

The investment you're looking for doesn't exist.

- - Back to Portfolio - +
+ +
+
+

Investment Not Found

+

The investment you're looking for doesn't exist.

+ + Back to Investments + +
); @@ -45,307 +48,319 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi }; 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 demoBikes = [ + { + id: 'b1', model: 'Yadea DT3', brand: 'Yadea', plateNumber: 'AB-1234', + image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop', + status: 'rented', currentRent: 450, totalEarnings: 45000, + batteryLevel: 85, range: 60, location: 'Dhaka Central Hub' + }, + { + id: 'b2', model: 'Apex E-Bike Pro', brand: 'Apex', plateNumber: 'CD-5678', + image: 'https://images.unsplash.com/photo-1622185135505-2d795043906a?w=400&h=300&fit=crop', + status: 'rented', currentRent: 500, totalEarnings: 52000, + batteryLevel: 72, range: 55, location: 'Gulshan Area' + }, + { + id: 'b3', model: 'Niu NQi Sport', brand: 'Niu', plateNumber: 'EF-9012', + image: 'https://images.unsplash.com/photo-1591353230407-2b14a8e4c8d3?w=400&h=300&fit=crop', + status: 'available', currentRent: 0, totalEarnings: 28000, + batteryLevel: 95, range: 70, location: 'Mirpur Depot' + }, + { + id: 'b4', model: 'Yadea DT3', brand: 'Yadea', plateNumber: 'GH-3456', + image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop', + status: 'maintenance', currentRent: 0, totalEarnings: 15000, + batteryLevel: 0, range: 0, location: 'Service Center' + }, + ]; - const investmentTransactions = transactions.filter((t: any) => t.investorId === investor.id && t.type === 'investment_return'); + const demoPnl = { + grossRevenue: 185000, + platformFee: 83250, + insurance: 15000, + maintenance: 8500, + netProfit: 78250, + }; + + const demoTransactions = [ + { id: 'tx1', date: '2024-05-15', description: 'Rental Income - Bike AB-1234', amount: 450, status: 'completed' }, + { id: 'tx2', date: '2024-05-14', description: 'Rental Income - Bike CD-5678', amount: 500, status: 'completed' }, + { id: 'tx3', date: '2024-05-13', description: 'Rental Income - Bike AB-1234', amount: 450, status: 'completed' }, + { id: 'tx4', date: '2024-05-12', description: 'Rental Income - Bike EF-9012', amount: 350, status: 'completed' }, + { id: 'tx5', date: '2024-05-11', description: 'Rental Income - Bike CD-5678', amount: 500, status: 'completed' }, + { id: 'tx6', date: '2024-05-10', description: 'Withdrawal to Bank', amount: -10000, status: 'completed' }, + { id: 'tx7', date: '2024-05-09', description: 'Rental Income - Bike AB-1234', amount: 450, status: 'completed' }, + { id: 'tx8', date: '2024-05-08', description: 'Rental Income - Bike CD-5678', amount: 500, status: 'completed' }, + ]; return (
-
-
-
- -
-
-

- {investment.planName}

- - {investment.planType} Plan - - - {investment.status} - +
+
+
+
+ +
+
+

+ {investment.planName} +

+ + {investment.planType} + + + {investment.status} + +
+

ID: #{investment.id?.toUpperCase()} • Started: {investment.startDate}

-

- ID: #{investment.id?.toUpperCase()} - • Started: {investment.startDate} -

-
-
-
-
-
-
-
- +
+
+
+
+
-

Invested

+

Invested

-

৳{investment.totalInvestment.toLocaleString()}

+

৳{(investment.totalInvestment / 1000).toFixed(0)}k

-
-
-
- +
+
+
+
-

Total Return

+

Total Return

-

৳{investment.actualEarnings.toLocaleString()}

+

৳{(investment.actualEarnings / 1000).toFixed(0)}k

-
-
-
- +
+
+
+
-

Pending

+

Pending

-

৳{(investment.totalInvestment * 0.24 - investment.actualEarnings).toLocaleString()}

+

৳{(investment.totalInvestment * 0.24 - investment.actualEarnings).toLocaleString()}

-
-
-
- +
+
+
+
-

ROI

+

ROI

-

{investment.expectedRoi}%

+

{investment.expectedRoi}%

-
-
-
-
- {['overview', 'bikes', 'pnl', 'transactions'].map((tab) => ( - +
+
+ {['overview', 'bikes', 'transactions', 'statement'].map((tab) => ( + + ))} +
+ +
+ {activeTab === 'overview' && ( +
+
+
+

+ Investment Details +

+
+
+ Plan Name + {investment.planName} +
+
+ Plan Type + {investment.planType} +
+
+ Period + {investment.startDate} - {investment.endDate || 'Ongoing'} +
+
+ Payment Method + {investment.paymentMethod} +
+
+
+ +
+

+ Plan Policy +

+
+
+ Min Duration + 12 Months +
+
+ Lock-in Period + 3 Months +
+
+ Exit Penalty + 10% +
+
+ Maintenance + Included +
+
+
+
+ +
+

+ Profit Sharing +

+

Your share based on rental model

+
+
+

Single Rent

+

55%

+
+
+

Rent to Own

+

45%

+
+
+

Share EV

+

40%

+
+
+
+
+ )} + + {activeTab === 'bikes' && ( +
+
+

{demoBikes.length} bikes assigned to this investment

+
+ {demoBikes.map((bike) => ( +
+
+ {bike.model} +
+
+
+
{bike.model}
+ + {bike.status} + +
+

{bike.plateNumber} • {bike.brand}

+
+ {bike.batteryLevel}% + {bike.range} km + {bike.location} +
+
+
+

Daily Rent

+

৳{bike.currentRent}

+

Total: ৳{bike.totalEarnings.toLocaleString()}

+
+
))}
+ )} -
- {activeTab === 'overview' && ( -
-
-
-

- Investment Details -

-
-
- Plan Name - {investment.planName} -
-
- Plan Type - {investment.planType} -
-
- Period - {investment.startDate} - {investment.endDate || 'Ongoing'} -
-
- Payment Method - {investment.paymentMethod} -
-
-
- -
-

- Plan Policy -

-
-
- Min Duration - 12 Months -
-
- Lock-in Period - 3 Months -
-
- Exit Penalty - 10% -
-
- Maintenance - Included -
-
-
-
- -
-

- Profit Sharing Configuration -

-

Your share based on rental model

-
-
-

Single Rent

-

55%

-
-
-

Rent to Own

-

45%

-
-
-

Share EV

-

40%

-
-
-
-
- )} - - {activeTab === 'bikes' && ( + {activeTab === 'statement' && ( +
+
+

Profit & Loss Statement

- {assignedBikes.length > 0 ? assignedBikes.map(bike => ( -
-
- {bike.model} -
-
-
{bike.model}
-

{bike.plateNumber} • {bike.brand}

-
- - {bike.status} - - - Daily: ৳{bike.currentRent} - -
-
-
-

Total Earnings

-

৳{bike.totalEarnings?.toLocaleString()}

- - Live Track - -
+
+ Gross Rental Revenue + ৳{demoPnl.grossRevenue.toLocaleString()} +
+
+
+ Platform Fee (45%) + -৳{demoPnl.platformFee.toLocaleString()}
- )) : ( -
- -

No bikes assigned yet.

-

Admin will assign bikes to this investment shortly.

+
+ Insurance Coverage + -৳{demoPnl.insurance.toLocaleString()}
- )} -
- )} - - {activeTab === 'pnl' && ( -
-
-

Detailed P&L Statement

-
-
- Gross Rental Revenue - ৳{(investment.actualEarnings / 0.55).toFixed(0)} -
-
-
- Platform Management Fee (45%) - -৳{((investment.actualEarnings / 0.55) * 0.45).toFixed(0)} -
-
- Fleet Insurance & Maintenance - Included in Platform Fee -
-
-
- Net Return to Investor - ৳{investment.actualEarnings.toLocaleString()} -
+
+ Maintenance + -৳{demoPnl.maintenance.toLocaleString()}
+
+ Net Return + ৳{demoPnl.netProfit.toLocaleString()} +
- )} - - {activeTab === 'transactions' && ( -
- - - - - - - - - - - {investmentTransactions.map(t => ( - - - - - - - ))} - -
DateDescriptionAmountStatus
{t.createdAt} -

{t.description}

-

Ref: {t.id}

- 		- +৳{t.amount.toLocaleString()} - - - Completed - -
-
- )} +
-
-
+ )} -
-
-

- Quick Actions -

-
- - - + {activeTab === 'transactions' && ( +
+ + + + + + + + + + + {demoTransactions.map((tx) => ( + + + + + + + ))} + +
DateDescriptionAmountStatus
{tx.date} +

{tx.description}

+

Ref: {tx.id}

+ 		0 ? 'text-green-600' : 'text-red-500'}`}> + {tx.amount > 0 ? '+' : ''}৳{tx.amount.toLocaleString()} + + + {tx.status} + +
-
- -
-

- Support Desk -

-

- Need help with this investment or bike assignment? Our team is available 24/7. -

- -
+ )}
); -} +} \ No newline at end of file