diff --git a/src/app/investor/withdraw/page.tsx b/src/app/investor/withdraw/page.tsx index 9995529..b8bd81c 100644 --- a/src/app/investor/withdraw/page.tsx +++ b/src/app/investor/withdraw/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState } from 'react'; -import { CreditCard, Wallet, ArrowUpRight, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, Settings, X, Bike } from 'lucide-react'; +import { CreditCard, Wallet, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, Settings, X, Bike, ChevronDown, Search, Filter, ChevronLeft, ChevronRight } from 'lucide-react'; import { investors, transactions, bikes } from '@/data/mockData'; import toast from 'react-hot-toast'; @@ -10,7 +10,7 @@ export default function InvestorWithdrawPage() { const investorBikes = bikes.filter(b => b.investorId === investor.id); const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.pendingEarnings; - 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 allWithdrawals = transactions.filter(t => t.investorId === investor.id && t.type === 'withdrawal').sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()); const [showWithdrawModal, setShowWithdrawModal] = useState(false); const [selectAll, setSelectAll] = useState(false); @@ -24,6 +24,10 @@ export default function InvestorWithdrawPage() { const [autoWithdrawMin, setAutoWithdrawMin] = useState('1000'); const [autoWithdrawAccount, setAutoWithdrawAccount] = useState(''); + const [withdrawPage, setWithdrawPage] = useState(1); + const [withdrawPageSize, setWithdrawPageSize] = useState(5); + const [withdrawFilter, setWithdrawFilter] = useState('all'); + const planColors: Record = { silver: 'bg-slate-100 text-slate-700', gold: 'bg-amber-100 text-amber-700', @@ -46,6 +50,13 @@ export default function InvestorWithdrawPage() { return sum + (bike?.totalEarnings || 0); }, 0); + const filteredWithdrawals = allWithdrawals.filter(w => withdrawFilter === 'all' || w.status === withdrawFilter); + const totalWithdrawPages = Math.ceil(filteredWithdrawals.length / withdrawPageSize); + const paginatedWithdrawals = filteredWithdrawals.slice((withdrawPage - 1) * withdrawPageSize, withdrawPage * withdrawPageSize); + + const totalCompleted = allWithdrawals.filter(w => w.status === 'completed').reduce((sum, w) => sum + w.amount, 0); + const totalPending = allWithdrawals.filter(w => w.status === 'pending').reduce((sum, w) => sum + w.amount, 0); + const toggleSelectAll = (checked: boolean) => { setSelectAll(checked); if (checked) { @@ -96,89 +107,147 @@ export default function InvestorWithdrawPage() { }; return ( -
+
{/* Header */} -
+

Withdraw Funds

-

Request withdrawals to your bank or mobile banking accounts

+

Request withdrawals to your bank or mobile banking accounts

- -
- {/* Balance Cards */} -
-
-
+ {/* Balance Cards - Mobile Responsive Grid */} +
+
+
- - Available Balance + + Available Balance
-

৳{availableBalance.toLocaleString()}

+

৳{availableBalance.toLocaleString()}

Ready to withdraw

-
+
+

Pending Request

+

৳{investor.pendingEarnings.toLocaleString()}

+
+
+

Total Withdrawn

+

৳{investor.totalWithdrawn.toLocaleString()}

+
+
+ + {/* Alert + Action Button */} +
+

Pending Requests

You currently have ৳{investor.pendingEarnings.toLocaleString()} in pending withdrawals. Processing takes 1-3 business days.

-
-

Total Withdrawn

-

৳{investor.totalWithdrawn.toLocaleString()}

-
+
- {/* Alert + Action Button */} -
- -
- - {/* Recent Withdrawals */} + {/* Recent Withdrawals Card */}
-

- Recent Withdrawals -

+
+

+ Recent Withdrawals +

+
+ +
+
-
+ + + + {/* Card View - Mobile/Tablet */} +
+ {paginatedWithdrawals.length > 0 ? paginatedWithdrawals.map((t) => ( +
+
+
+

{t.description || 'Withdrawal'}

+
+ {t.createdAt} + {t.referenceNumber && ( + <> + • + {t.referenceNumber} + + )} +
+
+
+

৳{t.amount.toLocaleString()}

+ + {t.status === 'completed' && } + {t.status === 'pending' && } + {t.status} + +
+
+
+ )) : ( +
+ + No withdrawals found. +
+ )} +
+ + {/* Table View - Desktop */} + + +
- - - - - - + + + + + + - {withdrawHistory.length > 0 ? withdrawHistory.map((t) => ( + {paginatedWithdrawals.length > 0 ? paginatedWithdrawals.map((t) => ( - - + + - - - + )) : ( - )}
DateRef / DescMethodAmountStatus
DateRefDescriptionAmountStatus
{t.createdAt} -

{t.referenceNumber || 'Withdrawal'}

-

{t.description}

+ 		{t.createdAt}{t.referenceNumber || '-'} +

{t.description || 'Withdrawal'}

{t.paymentMethod}৳{t.amount.toLocaleString()} - ৳{t.amount.toLocaleString()} + @@ -190,98 +259,132 @@ export default function InvestorWithdrawPage() {
+ - No withdrawal history found. + No withdrawals found.
+ + {/* Pagination */} + {totalWithdrawPages > 1 && ( +
+

+ Showing {((withdrawPage - 1) * withdrawPageSize) + 1} to {Math.min(withdrawPage * withdrawPageSize, filteredWithdrawals.length)} of {filteredWithdrawals.length} +

+
+ + {Array.from({ length: Math.min(5, totalWithdrawPages) }, (_, i) => { + const page = totalWithdrawPages <= 5 ? i + 1 : withdrawPage <= 3 ? i + 1 : withdrawPage >= totalWithdrawPages - 2 ? totalWithdrawPages - 4 + i : withdrawPage - 2 + i; + return ( + + ); + })} + +
+
+ )}
{/* Withdrawal Request Modal */} - {showWithdrawModal && ( -
-
-
-

Create Withdrawal Request

- -
- -
- {/* Balance Cards */} -
-
-

Available Balance

-

৳{availableBalance.toLocaleString()}

-
-
-

Pending Request

-

৳{investor.pendingEarnings.toLocaleString()}

-
-
-

Total Withdrawn

-

৳{investor.totalWithdrawn.toLocaleString()}

-
+ { + showWithdrawModal && ( +
+
+
+

Create Withdrawal Request

+
- {/* Select Investment Plans & Bikes */} -
-

Select Investment Plans & Bikes

-
- {/* Select All */} -
- toggleSelectAll(e.target.checked)} - className="w-5 h-5 text-investor rounded border-slate-300" - /> - +
+ {/* Balance Cards */} +
+
+

Available

+

৳{availableBalance.toLocaleString()}

+
+

Pending

+

৳{investor.pendingEarnings.toLocaleString()}

+
+
+

Withdrawn

+

৳{investor.totalWithdrawn.toLocaleString()}

+
+
- {/* Investment Plans with Bikes */} -
-
-

Investment Plans

+ {/* Select Investment Plans & Bikes */} +
+

Select Investment Plans & Bikes

+
+
+ toggleSelectAll(e.target.checked)} + className="w-5 h-5 text-investor rounded border-slate-300" + /> +
-
- {investor.investments?.map((inv: any) => { - const invBikes = assignedBikes.filter((b: any) => b.investmentId === inv.id); - const invEarnings = invBikes.reduce((sum: number, b: any) => sum + (b.totalEarnings || 0), 0); - return ( -
-
- togglePlan(inv.id, invBikes)} - className="w-5 h-5 text-investor rounded border-slate-300" - /> - -
- {!selectAll && invBikes.length > 0 && ( -
- {invBikes.map((bike: any) => { - const statusStyle = bikeStatusColors[bike.status] || bikeStatusColors.available; - return ( -
+ +
+
+

Investment Plans

+
+
+ {investor.investments?.map((inv: any) => { + const invBikes = assignedBikes.filter((b: any) => b.investmentId === inv.id); + const invEarnings = invBikes.reduce((sum: number, b: any) => sum + (b.totalEarnings || 0), 0); + return ( +
+
+ togglePlan(inv.id, invBikes)} + className="w-4 h-4 text-investor rounded border-slate-300" + /> + +
+ {!selectAll && invBikes.length > 0 && ( +
+ {invBikes.map((bike: any) => ( +
৳{bike.totalEarnings?.toLocaleString() || 0}
- ); - })} -
- )} -
- ); - })} + ))} +
+ )} +
+ ); + })} +
-
- {/* Withdrawal Amount */} -
-
-

Withdrawal Amount

- - {selectAll ? 'All Selected' : `${selectedBikes.length} bikes`} - + {/* Withdrawal Amount */} +
+
+

Withdrawal Amount

+ + {selectAll ? 'All Selected' : `${selectedBikes.length} bikes`} + +
+

৳{calculatedAmount.toLocaleString()}

+

Based on {selectAll ? 'all' : selectedBikes.length} selected bike(s) earnings

-

৳{calculatedAmount.toLocaleString()}

-

- Based on {selectAll ? 'all' : selectedBikes.length} selected bike(s) earnings -

-
- {/* Payment Method */} -
-

Payment Method

-
- {(investor as any).bankAccounts?.map((account: any) => ( + {/* Payment Method */} +
+

Payment Method

+
+ {(investor as any).bankAccounts?.map((account: any) => ( +
{ setPaymentMethod('bank'); setSelectedAccount(account.id); }} + className={`p-3 sm:p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === account.id ? 'border-investor bg-investor/5 ring-2 ring-investor/20' : 'border-slate-200 hover:border-slate-300'}`} + > +
+
+ +
+
+

{account.bankName}

+

{account.accountNumber}

+
+
+
+ ))} +
+ {(investor as any).mobileBanking && (
{ setPaymentMethod('bank'); setSelectedAccount(account.id); }} - className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === account.id ? 'border-investor bg-investor/5 ring-2 ring-investor/20' : 'border-slate-200 hover:border-slate-300 hover:shadow-sm'}`} + onClick={() => { setPaymentMethod('mobile'); setSelectedAccount('mobile'); }} + className={`mt-2 p-3 sm:p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === 'mobile' ? 'border-investor bg-investor/5 ring-2 ring-investor/20' : 'border-slate-200 hover:border-slate-300'}`} >
-
- +
+
-

{account.bankName}

-

{account.accountNumber}

+

{(investor as any).mobileBanking}

+

{(investor as any).mobileBankingNumber}

- ))} -
- {(investor as any).mobileBanking && ( -
{ setPaymentMethod('mobile'); setSelectedAccount('mobile'); }} - className={`mt-3 p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === 'mobile' ? 'border-investor bg-investor/5 ring-2 ring-investor/20' : 'border-slate-200 hover:border-slate-300 hover:shadow-sm'}`} - > -
-
- -
-
-

{(investor as any).mobileBanking}

-

{(investor as any).mobileBankingNumber}

-
-
-
- )} -
-
- -
- - -
-
-
- )} - - {/* Auto-Withdraw Modal */} - {showAutoWithdrawModal && ( -
-
-
-

Auto-Withdraw Settings

- -
-
-
- -
- - Automatically withdraw earnings -
-
- -
- - -
- -
- -
- ৳ - setAutoWithdrawMin(e.target.value)} - className="flex-1 px-3 py-2.5 border border-slate-200 rounded-lg text-sm" - placeholder="1000" - /> -
-

Minimum balance required for auto-withdrawal

-
- -
- -
- {(investor as any).bankAccounts?.map((account: any) => ( -
- setAutoWithdrawAccount(account.id)} - className="w-4 h-4 text-investor" - /> -
-

{account.bankName}

-

{account.accountNumber}

-
-
- ))} - {(investor as any).mobileBanking && ( -
- setAutoWithdrawAccount('mobile')} - className="w-4 h-4 text-investor" - /> -
-

{(investor as any).mobileBanking}

-

{(investor as any).mobileBankingNumber}

-
-
)}
-
-
- - + +
+ + +
-
- )} -
+ ) + } + + {/* Auto-Withdraw Modal */} + { + showAutoWithdrawModal && ( +
+
+
+

Auto-Withdraw Settings

+ +
+
+
+ +
+ + Automatically withdraw earnings +
+
+ +
+ + +
+ +
+ +
+ ৳ + setAutoWithdrawMin(e.target.value)} + className="flex-1 px-3 py-2.5 border border-slate-200 rounded-lg text-sm" + placeholder="1000" + /> +
+

Minimum balance required for auto-withdrawal

+
+ +
+ +
+ {(investor as any).bankAccounts?.map((account: any) => ( +
+ setAutoWithdrawAccount(account.id)} + className="w-4 h-4 text-investor" + /> +
+

{account.bankName}

+

{account.accountNumber}

+
+
+ ))} + {(investor as any).mobileBanking && ( +
+ setAutoWithdrawAccount('mobile')} + className="w-4 h-4 text-investor" + /> +
+

{(investor as any).mobileBanking}

+

{(investor as any).mobileBankingNumber}

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