Compare commits
4 Commits
c1ab1eb0a3
...
918b6c543d
| Author | SHA1 | Date | |
|---|---|---|---|
|
918b6c543d | ||
|
|
12f1e5c445 | ||
|
|
775299fc6c | ||
|
|
0ff4fcf351 |
@@ -1,224 +1,584 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { CreditCard, Wallet, ArrowUpRight, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, ChevronDown } 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 } from '@/data/mockData';
|
import { investors, transactions, bikes } from '@/data/mockData';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
export default function InvestorWithdrawPage() {
|
export default function InvestorWithdrawPage() {
|
||||||
const investor = investors[0]; // mock logged-in investor
|
const investor = investors.find(i => i.id === 'inv1') || investors[0];
|
||||||
const availableBalance = investor.totalEarnings - investor.totalWithdrawn - investor.withdrawalPending;
|
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 [amount, setAmount] = useState('');
|
const [showWithdrawModal, setShowWithdrawModal] = useState(false);
|
||||||
const [method, setMethod] = useState<'bank' | 'mobile'>('bank');
|
const [selectAll, setSelectAll] = useState(false);
|
||||||
|
const [selectedPlans, setSelectedPlans] = useState<string[]>([]);
|
||||||
|
const [selectedBikes, setSelectedBikes] = useState<string[]>([]);
|
||||||
|
const [paymentMethod, setPaymentMethod] = useState<'bank' | 'mobile'>('bank');
|
||||||
const [selectedAccount, setSelectedAccount] = useState('');
|
const [selectedAccount, setSelectedAccount] = useState('');
|
||||||
|
const [showAutoWithdrawModal, setShowAutoWithdrawModal] = useState(false);
|
||||||
|
const [autoWithdrawEnabled, setAutoWithdrawEnabled] = useState(false);
|
||||||
|
const [autoWithdrawFreq, setAutoWithdrawFreq] = useState('as_per_request');
|
||||||
|
const [autoWithdrawMin, setAutoWithdrawMin] = useState('1000');
|
||||||
|
const [autoWithdrawAccount, setAutoWithdrawAccount] = useState('');
|
||||||
|
|
||||||
const handleWithdraw = (e: React.FormEvent) => {
|
const [withdrawPage, setWithdrawPage] = useState(1);
|
||||||
e.preventDefault();
|
const [withdrawPageSize, setWithdrawPageSize] = useState(5);
|
||||||
const withdrawAmount = Number(amount);
|
const [withdrawFilter, setWithdrawFilter] = useState('all');
|
||||||
if (!withdrawAmount || withdrawAmount <= 0) {
|
|
||||||
toast.error('Please enter a valid amount');
|
const planColors: Record<string, string> = {
|
||||||
return;
|
silver: 'bg-slate-100 text-slate-700',
|
||||||
|
gold: 'bg-amber-100 text-amber-700',
|
||||||
|
platinum: 'bg-purple-100 text-purple-700',
|
||||||
|
diamond: 'bg-blue-100 text-blue-700',
|
||||||
|
};
|
||||||
|
|
||||||
|
const bikeStatusColors: Record<string, { bg: string; text: string }> = {
|
||||||
|
available: { bg: 'bg-blue-50', text: 'text-blue-600' },
|
||||||
|
rented: { bg: 'bg-green-50', text: 'text-green-600' },
|
||||||
|
maintenance: { bg: 'bg-amber-50', text: 'text-amber-600' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const assignedBikes = investorBikes;
|
||||||
|
|
||||||
|
const calculatedAmount = selectAll
|
||||||
|
? assignedBikes.reduce((sum: number, b: any) => sum + (b.totalEarnings || 0), 0)
|
||||||
|
: selectedBikes.reduce((sum: number, bikeId: string) => {
|
||||||
|
const bike = assignedBikes.find((b: any) => b.id === bikeId);
|
||||||
|
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) {
|
||||||
|
setSelectedPlans(investor.investments?.map((inv: any) => inv.id) || []);
|
||||||
|
setSelectedBikes(assignedBikes.map(b => b.id));
|
||||||
|
} else {
|
||||||
|
setSelectedPlans([]);
|
||||||
|
setSelectedBikes([]);
|
||||||
}
|
}
|
||||||
if (withdrawAmount > availableBalance) {
|
};
|
||||||
toast.error('Insufficient available balance');
|
|
||||||
return;
|
const togglePlan = (planId: string, invBikes: any[]) => {
|
||||||
|
const isSelected = selectedPlans.includes(planId);
|
||||||
|
if (isSelected) {
|
||||||
|
setSelectedPlans(selectedPlans.filter(p => p !== planId));
|
||||||
|
setSelectedBikes(selectedBikes.filter(b => !invBikes.find((ib: any) => ib.id === b)));
|
||||||
|
} else {
|
||||||
|
setSelectedPlans([...selectedPlans, planId]);
|
||||||
|
setSelectedBikes([...new Set([...selectedBikes, ...invBikes.map((b: any) => b.id)])]);
|
||||||
}
|
}
|
||||||
|
setSelectAll(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleBike = (bikeId: string) => {
|
||||||
|
setSelectedBikes(prev => prev.includes(bikeId) ? prev.filter(b => b !== bikeId) : [...prev, bikeId]);
|
||||||
|
setSelectAll(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmitWithdraw = () => {
|
||||||
if (!selectedAccount) {
|
if (!selectedAccount) {
|
||||||
toast.error('Please select an account to receive funds');
|
toast.error('Please select a payment method');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (selectedBikes.length === 0 && !selectAll) {
|
||||||
|
toast.error('Please select at least one bike or select all');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(`Withdrawal request for ৳${calculatedAmount.toLocaleString()} submitted successfully.`);
|
||||||
|
setSelectedPlans([]);
|
||||||
|
setSelectedBikes([]);
|
||||||
|
setSelectAll(false);
|
||||||
|
setShowWithdrawModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
toast.success(`Withdrawal request for ৳${withdrawAmount.toLocaleString()} submitted successfully.`);
|
const handleSaveAutoWithdraw = () => {
|
||||||
setAmount('');
|
toast.success('Auto-withdraw settings saved!');
|
||||||
|
setShowAutoWithdrawModal(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
|
<div className="p-4 lg:p-6 max-w-7xl mx-auto">
|
||||||
<div className="mb-6">
|
{/* Header */}
|
||||||
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Withdraw Funds</h1>
|
<div className="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
<p className="text-sm text-slate-500">Request withdrawals to your bank or mobile banking accounts</p>
|
<div>
|
||||||
|
<h1 className="text-xl lg:text-2xl font-bold text-slate-800">Withdraw Funds</h1>
|
||||||
|
<p className="text-sm text-slate-500 mt-1">Request withdrawals to your bank or mobile banking accounts</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAutoWithdrawModal(true)}
|
||||||
|
className="px-4 py-2.5 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2 shadow-sm bg-white w-fit"
|
||||||
|
>
|
||||||
|
<Settings className="w-4 h-4" /> Configure Auto-Withdraw
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid lg:grid-cols-3 gap-6 mb-8">
|
{/* Balance Cards - Mobile Responsive Grid */}
|
||||||
{/* Balance Overview */}
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
|
||||||
<div className="lg:col-span-1 space-y-4">
|
<div className="sm:col-span-2 bg-investor to-investor-dark rounded-xl p-5 text-white shadow-lg relative overflow-hidden order-first lg:order-first">
|
||||||
<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-24 h-24 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/3 blur-2xl"></div>
|
||||||
<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="relative z-10">
|
<div className="flex items-center gap-2 text-investor-light mb-2">
|
||||||
<div className="flex items-center gap-2 text-investor-light mb-2">
|
<Wallet className="w-4 h-4" />
|
||||||
<Wallet className="w-5 h-5" />
|
<span className="font-medium text-xs">Available Balance</span>
|
||||||
<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>
|
||||||
|
<p className="text-3xl font-bold mb-1">৳{availableBalance.toLocaleString()}</p>
|
||||||
|
<p className="text-xs text-white/80">Ready to withdraw</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-4 border border-slate-200 shadow-sm">
|
||||||
|
<p className="text-xs text-amber-600 font-medium mb-1">Pending Request</p>
|
||||||
|
<p className="text-xl font-bold text-amber-600">৳{investor.pendingEarnings.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white rounded-xl p-4 border border-slate-200 shadow-sm">
|
||||||
|
<p className="text-xs text-slate-600 font-medium mb-1">Total Withdrawn</p>
|
||||||
|
<p className="text-xl font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3">
|
{/* Alert + Action Button */}
|
||||||
<AlertCircle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-6">
|
||||||
<div>
|
<div className="flex-1 bg-amber-50 border border-amber-200 rounded-xl p-4 flex gap-3 order-last sm:order-first">
|
||||||
<h4 className="text-sm font-bold text-amber-800 mb-1">Pending Requests</h4>
|
<AlertCircle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
|
||||||
<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>
|
||||||
|
<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.pendingEarnings.toLocaleString()}</b> in pending withdrawals. Processing takes 1-3 business days.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowWithdrawModal(true)}
|
||||||
|
className="px-5 py-3 bg-investor text-white rounded-xl font-semibold text-sm shadow-md hover:bg-investor-dark transition-all flex items-center justify-center gap-2 whitespace-nowrap sm:w-auto"
|
||||||
|
>
|
||||||
|
<CreditCard className="w-4 h-4" /> Withdrawal Request
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recent Withdrawals Card */}
|
||||||
|
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||||
|
<div className="p-4 border-b border-slate-100 bg-slate-50">
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||||
|
<h3 className="font-semibold text-slate-800 flex items-center gap-2">
|
||||||
|
<History className="w-5 h-5 text-slate-400" /> Recent Withdrawals
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
value={withdrawFilter}
|
||||||
|
onChange={(e) => { setWithdrawFilter(e.target.value); setWithdrawPage(1); }}
|
||||||
|
className="px-3 py-1.5 border border-slate-200 rounded-lg text-xs bg-white"
|
||||||
|
>
|
||||||
|
<option value="all">All</option>
|
||||||
|
<option value="completed">Completed</option>
|
||||||
|
<option value="pending">Pending</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
{/* Card View - Mobile/Tablet */}
|
||||||
<label className="block text-sm font-semibold text-slate-700 mb-3">Withdrawal Method</label>
|
<div className="lg:hidden divide-y divide-slate-100">
|
||||||
<div className="grid grid-cols-2 gap-4">
|
{paginatedWithdrawals.length > 0 ? paginatedWithdrawals.map((t) => (
|
||||||
<div
|
<div key={t.id} className="p-4 sm:p-5 hover:bg-slate-50 transition-colors">
|
||||||
onClick={() => setMethod('bank')}
|
<div className="flex items-start justify-between gap-3 mb-3">
|
||||||
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'}`}
|
<div className="flex-1 min-w-0">
|
||||||
>
|
<p className="text-sm font-medium text-slate-800 mb-1">{t.description || 'Withdrawal'}</p>
|
||||||
<Building2 className={`w-6 h-6 mb-2 ${method === 'bank' ? 'text-investor' : 'text-slate-400'}`} />
|
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||||
<p className={`font-semibold text-sm ${method === 'bank' ? 'text-investor' : 'text-slate-600'}`}>Bank Transfer</p>
|
<span>{t.createdAt}</span>
|
||||||
<p className="text-xs text-slate-500">1-3 business days</p>
|
{t.referenceNumber && (
|
||||||
</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>
|
<span>•</span>
|
||||||
{investor.additionalMobileBanking?.map((acc, idx) => (
|
<span className="hidden sm:inline">{t.referenceNumber}</span>
|
||||||
<option key={idx} value={`mob-${idx}`}>{acc.provider} - {acc.number}</option>
|
|
||||||
))}
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</select>
|
</div>
|
||||||
<ChevronDown className="w-4 h-4 text-slate-500 absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none" />
|
</div>
|
||||||
|
<div className="text-right shrink-0">
|
||||||
|
<p className="text-base font-bold text-slate-800">৳{t.amount.toLocaleString()}</p>
|
||||||
|
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-semibold mt-1 ${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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)) : (
|
||||||
|
<div className="px-4 py-12 text-center text-sm text-slate-500">
|
||||||
|
<History className="w-10 h-10 mx-auto mb-2 text-slate-300" />
|
||||||
|
No withdrawals found.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table View - Desktop */}
|
||||||
|
|
||||||
|
|
||||||
|
<div className="hidden lg:block overflow-x-auto">
|
||||||
|
<table className="w-full text-left border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-white border-b border-slate-100">
|
||||||
|
<th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider hidden sm:table-cell">Ref</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Description</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Amount</th>
|
||||||
|
<th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-slate-100">
|
||||||
|
{paginatedWithdrawals.length > 0 ? paginatedWithdrawals.map((t) => (
|
||||||
|
<tr key={t.id} className="hover:bg-slate-50 transition-colors">
|
||||||
|
<td className="px-4 py-3.5 text-xs text-slate-600 whitespace-nowrap">{t.createdAt}</td>
|
||||||
|
<td className="px-4 py-3.5 text-xs text-slate-500 hidden sm:table-cell">{t.referenceNumber || '-'}</td>
|
||||||
|
<td className="px-4 py-3.5">
|
||||||
|
<p className="text-sm font-medium text-slate-800">{t.description || 'Withdrawal'}</p>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-3.5 text-sm font-bold text-slate-800">৳{t.amount.toLocaleString()}</td>
|
||||||
|
<td className="px-4 py-3.5">
|
||||||
|
<span className={`inline-flex items-center gap-1 px-2 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-4 py-12 text-center text-sm text-slate-500">
|
||||||
|
<History className="w-10 h-10 mx-auto mb-2 text-slate-300" />
|
||||||
|
No withdrawals found.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{totalWithdrawPages > 1 && (
|
||||||
|
<div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||||
|
<p className="text-xs text-slate-500">
|
||||||
|
Showing {((withdrawPage - 1) * withdrawPageSize) + 1} to {Math.min(withdrawPage * withdrawPageSize, filteredWithdrawals.length)} of {filteredWithdrawals.length}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setWithdrawPage(p => Math.max(1, p - 1))}
|
||||||
|
disabled={withdrawPage === 1}
|
||||||
|
className="p-1.5 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-4 h-4 text-slate-500" />
|
||||||
|
</button>
|
||||||
|
{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 (
|
||||||
|
<button
|
||||||
|
key={page}
|
||||||
|
onClick={() => setWithdrawPage(page)}
|
||||||
|
className={`w-8 h-8 rounded-lg text-xs font-medium ${withdrawPage === page ? 'bg-investor text-white' : 'border border-slate-200 hover:bg-slate-50'}`}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
onClick={() => setWithdrawPage(p => Math.min(totalWithdrawPages, p + 1))}
|
||||||
|
disabled={withdrawPage === totalWithdrawPages}
|
||||||
|
className="p-1.5 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50"
|
||||||
|
>
|
||||||
|
<ChevronRight className="w-4 h-4 text-slate-500" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Withdrawal Request Modal */}
|
||||||
|
{
|
||||||
|
showWithdrawModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
|
||||||
|
<div className="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-slate-50 to-white">
|
||||||
|
<h3 className="text-base sm:text-lg font-bold text-slate-800">Create Withdrawal Request</h3>
|
||||||
|
<button onClick={() => setShowWithdrawModal(false)} className="p-1.5 hover:bg-slate-100 rounded-lg transition-colors">
|
||||||
|
<X className="w-5 h-5 text-slate-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4 sm:p-5 overflow-y-auto flex-1 space-y-4 sm:space-y-5">
|
||||||
|
{/* Balance Cards */}
|
||||||
|
<div className="grid grid-cols-3 gap-2 sm:gap-3">
|
||||||
|
<div className="bg-green-50 rounded-lg p-3 border border-green-200">
|
||||||
|
<p className="text-xs text-green-600 font-medium">Available</p>
|
||||||
|
<p className="text-sm font-bold text-green-700">৳{availableBalance.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-amber-50 rounded-lg p-3 border border-amber-200">
|
||||||
|
<p className="text-xs text-amber-600 font-medium">Pending</p>
|
||||||
|
<p className="text-sm font-bold text-amber-700">৳{investor.pendingEarnings.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-slate-50 rounded-lg p-3 border border-slate-200">
|
||||||
|
<p className="text-xs text-slate-600 font-medium">Withdrawn</p>
|
||||||
|
<p className="text-sm font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Select Investment Plans & Bikes */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-slate-800 mb-2">Select Investment Plans & Bikes</h4>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="selectAll"
|
||||||
|
checked={selectAll}
|
||||||
|
onChange={(e) => toggleSelectAll(e.target.checked)}
|
||||||
|
className="w-5 h-5 text-investor rounded border-slate-300"
|
||||||
|
/>
|
||||||
|
<label htmlFor="selectAll" className="flex-1 cursor-pointer">
|
||||||
|
<span className="font-semibold text-slate-800">Select All</span>
|
||||||
|
<p className="text-xs text-slate-500">Include all investments and bikes</p>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border border-slate-200 rounded-lg overflow-hidden">
|
||||||
|
<div className="bg-slate-100 px-3 py-2 border-b border-slate-200">
|
||||||
|
<p className="text-sm font-semibold text-slate-700">Investment Plans</p>
|
||||||
|
</div>
|
||||||
|
<div className="divide-y divide-slate-100">
|
||||||
|
{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 (
|
||||||
|
<div key={inv.id} className="p-3 sm:p-4">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id={`plan-${inv.id}`}
|
||||||
|
checked={selectAll || selectedPlans.includes(inv.id)}
|
||||||
|
disabled={selectAll}
|
||||||
|
onChange={() => togglePlan(inv.id, invBikes)}
|
||||||
|
className="w-4 h-4 text-investor rounded border-slate-300"
|
||||||
|
/>
|
||||||
|
<label htmlFor={`plan-${inv.id}`} className="flex-1 flex items-center justify-between cursor-pointer">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-medium text-slate-800 text-sm">{inv.planName}</span>
|
||||||
|
<span className={`px-2 py-0.5 rounded text-xs capitalize font-medium ${planColors[inv.planType]}`}>{inv.planType}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-bold text-green-600">৳{invEarnings.toLocaleString()}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
{!selectAll && invBikes.length > 0 && (
|
||||||
|
<div className="ml-6 sm:ml-8 pl-3 sm:pl-4 border-l-2 border-slate-200 space-y-2">
|
||||||
|
{invBikes.map((bike: any) => (
|
||||||
|
<div key={bike.id} className="flex items-center gap-2 p-2 bg-white rounded-lg border border-slate-100">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id={`bike-${bike.id}`}
|
||||||
|
checked={selectAll || selectedBikes.includes(bike.id)}
|
||||||
|
onChange={() => toggleBike(bike.id)}
|
||||||
|
className="w-4 h-4 text-investor rounded border-slate-300"
|
||||||
|
/>
|
||||||
|
<label htmlFor={`bike-${bike.id}`} className="flex-1 flex items-center gap-2 cursor-pointer">
|
||||||
|
<Bike className="w-4 h-4 text-slate-400" />
|
||||||
|
<div>
|
||||||
|
<span className="text-sm font-medium text-slate-700">{bike.model}</span>
|
||||||
|
<span className="text-xs text-slate-400 ml-2">{bike.plateNumber}</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<span className="text-xs text-green-600 font-semibold">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Withdrawal Amount */}
|
||||||
|
<div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-4">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<h4 className="font-semibold text-slate-800 text-sm">Withdrawal Amount</h4>
|
||||||
|
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${selectAll ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
|
||||||
|
{selectAll ? 'All Selected' : `${selectedBikes.length} bikes`}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-2xl sm:text-3xl font-bold text-green-700 mb-1">৳{calculatedAmount.toLocaleString()}</p>
|
||||||
|
<p className="text-xs text-slate-500">Based on {selectAll ? 'all' : selectedBikes.length} selected bike(s) earnings</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Payment Method */}
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-slate-800 mb-2">Payment Method</h4>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||||
|
{(investor as any).bankAccounts?.map((account: any) => (
|
||||||
|
<div
|
||||||
|
key={account.id}
|
||||||
|
onClick={() => { 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'}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg flex items-center justify-center bg-slate-100">
|
||||||
|
<Building2 className="w-4 h-4 sm:w-5 sm:h-5 text-slate-500" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-slate-800">{account.bankName}</p>
|
||||||
|
<p className="text-xs text-slate-500 font-mono">{account.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{(investor as any).mobileBanking && (
|
||||||
|
<div
|
||||||
|
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'}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-pink-100 flex items-center justify-center">
|
||||||
|
<Smartphone className="w-4 h-4 sm:w-5 sm:h-5 text-pink-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-slate-800">{(investor as any).mobileBanking}</p>
|
||||||
|
<p className="text-xs text-slate-500 font-mono">{(investor as any).mobileBankingNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-2">
|
<div className="p-4 sm:p-5 border-t border-slate-200 flex justify-end gap-2 sm:gap-3 bg-slate-50">
|
||||||
|
<button onClick={() => setShowWithdrawModal(false)} className="px-4 py-2 sm:py-2.5 border border-slate-300 text-slate-600 rounded-lg text-sm font-medium hover:bg-white hover:shadow-sm transition-all">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
onClick={handleSubmitWithdraw}
|
||||||
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"
|
disabled={!selectedAccount || (selectedBikes.length === 0 && !selectAll)}
|
||||||
|
className="px-5 py-2 sm:py-2.5 bg-investor text-white rounded-lg text-sm font-semibold hover:bg-investor-dark disabled:opacity-50 disabled:cursor-not-allowed shadow-sm transition-all flex items-center gap-2"
|
||||||
>
|
>
|
||||||
<CreditCard className="w-4 h-4" /> Submit Withdrawal Request
|
<CreditCard className="w-4 h-4" /> Submit Request
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
}
|
||||||
|
|
||||||
{/* Withdrawal History */}
|
{/* Auto-Withdraw Modal */}
|
||||||
<div>
|
{
|
||||||
<h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
|
showAutoWithdrawModal && (
|
||||||
<History className="w-5 h-5 text-slate-400" /> Recent Withdrawals
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[60] p-4">
|
||||||
</h3>
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-md">
|
||||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
||||||
<div className="overflow-x-auto">
|
<h3 className="text-lg font-bold text-slate-800">Auto-Withdraw Settings</h3>
|
||||||
<table className="w-full text-left border-collapse">
|
<button onClick={() => setShowAutoWithdrawModal(false)} className="p-1.5 hover:bg-slate-100 rounded-lg">
|
||||||
<thead>
|
<X className="w-5 h-5 text-slate-400" />
|
||||||
<tr className="bg-slate-50 border-b border-slate-100">
|
</button>
|
||||||
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
|
</div>
|
||||||
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Ref / Desc</th>
|
<div className="p-5 space-y-4">
|
||||||
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Method</th>
|
<div>
|
||||||
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Amount</th>
|
<label className="text-sm font-medium text-slate-700 mb-2 block">Enable Auto-Withdraw</label>
|
||||||
<th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
|
<div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
|
||||||
</tr>
|
<button
|
||||||
</thead>
|
onClick={() => setAutoWithdrawEnabled(!autoWithdrawEnabled)}
|
||||||
<tbody className="divide-y divide-slate-100">
|
className={`w-12 h-6 rounded-full transition-colors ${autoWithdrawEnabled ? 'bg-green-500' : 'bg-slate-200'}`}
|
||||||
{withdrawHistory.length > 0 ? withdrawHistory.map((t) => (
|
>
|
||||||
<tr key={t.id} className="hover:bg-slate-50 transition-colors">
|
<span className={`block w-5 h-5 bg-white rounded-full shadow transition-transform ${autoWithdrawEnabled ? 'translate-x-6' : 'translate-x-0.5'}`} />
|
||||||
<td className="px-5 py-4 text-sm text-slate-600 whitespace-nowrap">{t.createdAt}</td>
|
</button>
|
||||||
<td className="px-5 py-4">
|
<span className="text-sm text-slate-600">Automatically withdraw earnings</span>
|
||||||
<p className="text-sm font-medium text-slate-800">{t.referenceNumber || 'Withdrawal'}</p>
|
</div>
|
||||||
<p className="text-xs text-slate-500 truncate max-w-[200px]">{t.description}</p>
|
</div>
|
||||||
</td>
|
|
||||||
<td className="px-5 py-4 text-sm text-slate-600 capitalize">{t.paymentMethod}</td>
|
<div>
|
||||||
<td className="px-5 py-4 text-sm font-bold text-slate-800">৳{t.amount.toLocaleString()}</td>
|
<label className="text-sm font-medium text-slate-700 mb-2 block">Withdrawal Frequency</label>
|
||||||
<td className="px-5 py-4">
|
<select
|
||||||
<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' :
|
value={autoWithdrawFreq}
|
||||||
t.status === 'pending' ? 'bg-amber-100 text-amber-700' :
|
onChange={(e) => setAutoWithdrawFreq(e.target.value)}
|
||||||
'bg-red-100 text-red-700'
|
className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm bg-white"
|
||||||
}`}>
|
>
|
||||||
{t.status === 'completed' && <CheckCircle className="w-3 h-3" />}
|
<option value="as_per_request">As Requested</option>
|
||||||
{t.status === 'pending' && <Clock className="w-3 h-3" />}
|
<option value="weekly">Weekly</option>
|
||||||
{t.status}
|
<option value="monthly">Monthly</option>
|
||||||
</span>
|
</select>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
|
||||||
)) : (
|
<div>
|
||||||
<tr>
|
<label className="text-sm font-medium text-slate-700 mb-2 block">Minimum Amount</label>
|
||||||
<td colSpan={5} className="px-5 py-8 text-center text-sm text-slate-500">
|
<div className="flex items-center gap-2">
|
||||||
No withdrawal history found.
|
<span className="px-3 py-2.5 bg-slate-100 rounded-lg text-slate-500 font-bold">৳</span>
|
||||||
</td>
|
<input
|
||||||
</tr>
|
type="number"
|
||||||
)}
|
value={autoWithdrawMin}
|
||||||
</tbody>
|
onChange={(e) => setAutoWithdrawMin(e.target.value)}
|
||||||
</table>
|
className="flex-1 px-3 py-2.5 border border-slate-200 rounded-lg text-sm"
|
||||||
|
placeholder="1000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 mt-1.5">Minimum balance required for auto-withdrawal</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-sm font-medium text-slate-700 mb-2 block">Destination Account</label>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{(investor as any).bankAccounts?.map((account: any) => (
|
||||||
|
<div key={account.id} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg border border-slate-100">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="destAccount"
|
||||||
|
checked={autoWithdrawAccount === account.id}
|
||||||
|
onChange={() => setAutoWithdrawAccount(account.id)}
|
||||||
|
className="w-4 h-4 text-investor"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium text-slate-700">{account.bankName}</p>
|
||||||
|
<p className="text-xs text-slate-500 font-mono">{account.accountNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{(investor as any).mobileBanking && (
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg border border-purple-100">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="destAccount"
|
||||||
|
checked={autoWithdrawAccount === 'mobile'}
|
||||||
|
onChange={() => setAutoWithdrawAccount('mobile')}
|
||||||
|
className="w-4 h-4 text-investor"
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<p className="font-medium text-slate-700">{(investor as any).mobileBanking}</p>
|
||||||
|
<p className="text-xs text-slate-500 font-mono">{(investor as any).mobileBankingNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-5 border-t border-slate-100 flex justify-end gap-3 bg-slate-50">
|
||||||
|
<button onClick={() => setShowAutoWithdrawModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-white">Cancel</button>
|
||||||
|
<button onClick={handleSaveAutoWithdraw} className="px-5 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark shadow-sm">Save Settings</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
}
|
||||||
</div>
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user