shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: expand container width and reorganize withdrawal request UI components

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-15 01:53:35 +06:00
parent 775299fc6c
commit 12f1e5c445
1 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/investor/withdraw/page.tsx
View File

@@ -96,7 +96,7 @@ export default function InvestorWithdrawPage() {
};
return (
<div className="p-4 lg:p-6 max-w-7xl mx-auto">
<div className="p-4 lg:p-6 max-w-8xl mx-auto">
{/* Header */}
<div className="mb-6 flex items-center justify-between">
<div>
@@ -109,6 +109,13 @@ export default function InvestorWithdrawPage() {
>
<Settings className="w-4 h-4" /> Configure Auto-Withdraw
</button>
<button
onClick={() => setShowWithdrawModal(true)}
className="px-6 py-3 bg-investor text-white rounded-xl font-bold text-sm shadow-md hover:bg-investor-dark transition-all flex items-center gap-2 whitespace-nowrap"
>
<CreditCard className="w-4 h-4" /> Withdrawal Request
</button>
</div>
{/* Balance Cards */}
@@ -124,9 +131,12 @@ export default function InvestorWithdrawPage() {
<p className="text-xs text-white/80">Ready to withdraw</p>
</div>
</div>
<div className="bg-white rounded-xl p-5 border border-slate-200 shadow-sm">
<p className="text-sm text-amber-600 font-medium mb-1">Pending Request</p>
<p className="text-2xl font-bold text-amber-600">৳{investor.pendingEarnings.toLocaleString()}</p>
<div className="flex-1 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.pendingEarnings.toLocaleString()}</b> in pending withdrawals. Processing takes 1-3 business days.</p>
</div>
</div>
<div className="bg-white rounded-xl p-5 border border-slate-200 shadow-sm">
<p className="text-sm text-slate-600 font-medium mb-1">Total Withdrawn</p>
@@ -136,19 +146,7 @@ export default function InvestorWithdrawPage() {
{/* Alert + Action Button */}
<div className="flex items-center gap-4 mb-6">
<div className="flex-1 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.pendingEarnings.toLocaleString()}</b> in pending withdrawals. Processing takes 1-3 business days.</p>
</div>
</div>
<button
onClick={() => setShowWithdrawModal(true)}
className="px-6 py-3 bg-investor text-white rounded-xl font-bold text-sm shadow-md hover:bg-investor-dark transition-all flex items-center gap-2 whitespace-nowrap"
>
<CreditCard className="w-4 h-4" /> Withdrawal Request
</button>
</div>
{/* Recent Withdrawals */}
@@ -181,8 +179,8 @@ export default function InvestorWithdrawPage() {
<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 === '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" />}