From 12f1e5c4456253d3bccc5cc21f5c927a13ee7e0e Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Fri, 15 May 2026 01:53:35 +0600
Subject: [PATCH] feat: expand container width and reorganize withdrawal
 request UI components

---
 src/app/investor/withdraw/page.tsx | 36 ++++++++++++++----------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/app/investor/withdraw/page.tsx b/src/app/investor/withdraw/page.tsx
index 2433d54..9995529 100644
--- a/src/app/investor/withdraw/page.tsx
+++ b/src/app/investor/withdraw/page.tsx
@@ -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" />}