From 775299fc6c4be62dedc84d7f41b82f966e85a66f Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Fri, 15 May 2026 01:48:56 +0600
Subject: [PATCH] refactor: redesign withdrawal page layout and UI components
 for improved clarity

---
 src/app/investor/withdraw/page.tsx | 347 ++++++++++++++---------------
 1 file changed, 167 insertions(+), 180 deletions(-)

diff --git a/src/app/investor/withdraw/page.tsx b/src/app/investor/withdraw/page.tsx
index 8814501..2433d54 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, ChevronDown, Settings, X, Bike } from 'lucide-react';
+import { CreditCard, Wallet, ArrowUpRight, History, CheckCircle, Clock, Building2, Smartphone, AlertCircle, Settings, X, Bike } from 'lucide-react';
 import { investors, transactions, bikes } from '@/data/mockData';
 import toast from 'react-hot-toast';
 
@@ -96,115 +96,110 @@ export default function InvestorWithdrawPage() {
   };
 
   return (
-    <div className="p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
-      <div className="mb-6">
-        <h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Withdraw Funds</h1>
-        <p className="text-sm text-slate-500">Request withdrawals to your bank or mobile banking accounts</p>
+    <div className="p-4 lg:p-6 max-w-7xl mx-auto">
+      {/* Header */}
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl lg:text-2xl font-bold text-slate-800">Withdraw Funds</h1>
+          <p className="text-sm text-slate-500">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"
+        >
+          <Settings className="w-4 h-4" /> Configure Auto-Withdraw
+        </button>
       </div>
 
-      <div className="grid lg:grid-cols-3 gap-6 mb-8">
-        {/* Balance Overview */}
-        <div className="lg:col-span-1 space-y-4">
-          <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-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="flex items-center gap-2 text-investor-light mb-2">
-                <Wallet className="w-5 h-5" />
-                <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">Pending Request</p>
-                <p className="font-semibold">৳{investor.pendingEarnings.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>
-
-          <div className="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>
+      {/* Balance Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <div className="md:col-span-2 bg-investor rounded-xl p-5 text-white shadow-lg relative overflow-hidden">
+          <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="flex items-center gap-2 text-investor-light mb-2">
+              <Wallet className="w-5 h-5" />
+              <span className="font-medium text-sm">Available Balance</span>
             </div>
+            <h2 className="text-3xl font-bold mb-1">৳{availableBalance.toLocaleString()}</h2>
+            <p className="text-xs text-white/80">Ready to withdraw</p>
           </div>
         </div>
-
-        {/* Right Side */}
-        <div className="lg:col-span-2 space-y-6">
-          <button
-            onClick={() => setShowAutoWithdrawModal(true)}
-            className="px-4 py-2 text-sm text-slate-600 hover:text-investor flex items-center gap-1"
-          >
-            <Settings className="w-4 h-4" /> Configure Auto-Withdraw
-          </button>
-          {/* Withdraw Button */}
-          <button
-            onClick={() => setShowWithdrawModal(true)}
-            className="w-full py-4 bg-investor text-white rounded-xl font-bold text-base shadow-md shadow-investor/20 hover:bg-investor-dark transition-all flex items-center justify-center gap-2"
-          >
-            <CreditCard className="w-5 h-5" /> Withdrawal Request
-          </button>
+        <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>
+        <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>
+          <p className="text-2xl font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
         </div>
       </div>
 
-      {/* Withdrawal History */}
-      <div>
-        <h3 className="text-lg font-bold text-slate-800 mb-4 flex items-center gap-2">
-          <History className="w-5 h-5 text-slate-400" /> Recent Withdrawals
-        </h3>
-        <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="bg-slate-50 border-b border-slate-100">
-                  <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
-                  <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Ref / Desc</th>
-                  <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Method</th>
-                  <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Amount</th>
-                  <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-slate-100">
-                {withdrawHistory.length > 0 ? withdrawHistory.map((t) => (
-                  <tr key={t.id} className="hover:bg-slate-50 transition-colors">
-                    <td className="px-5 py-4 text-sm text-slate-600 whitespace-nowrap">{t.createdAt}</td>
-                    <td className="px-5 py-4">
-                      <p className="text-sm font-medium text-slate-800">{t.referenceNumber || 'Withdrawal'}</p>
-                      <p className="text-xs text-slate-500 truncate max-w-[200px]">{t.description}</p>
-                    </td>
-                    <td className="px-5 py-4 text-sm text-slate-600 capitalize">{t.paymentMethod}</td>
-                    <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' :
+      {/* 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 */}
+      <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">
+          <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>
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead>
+              <tr className="bg-slate-50 border-b border-slate-100">
+                <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Date</th>
+                <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Ref / Desc</th>
+                <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Method</th>
+                <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Amount</th>
+                <th className="px-5 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {withdrawHistory.length > 0 ? withdrawHistory.map((t) => (
+                <tr key={t.id} className="hover:bg-slate-50 transition-colors">
+                  <td className="px-5 py-4 text-sm text-slate-600 whitespace-nowrap">{t.createdAt}</td>
+                  <td className="px-5 py-4">
+                    <p className="text-sm font-medium text-slate-800">{t.referenceNumber || 'Withdrawal'}</p>
+                    <p className="text-xs text-slate-500 truncate max-w-[200px]">{t.description}</p>
+                  </td>
+                  <td className="px-5 py-4 text-sm text-slate-600 capitalize">{t.paymentMethod}</td>
+                  <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 === '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-5 py-8 text-center text-sm text-slate-500">
-                      No withdrawal history found.
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
-          </div>
+                      }`}>
+                      {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-5 py-12 text-center text-sm text-slate-500">
+                    <History className="w-10 h-10 mx-auto mb-2 text-slate-300" />
+                    No withdrawal history found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
         </div>
       </div>
 
@@ -212,9 +207,9 @@ export default function InvestorWithdrawPage() {
       {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-5 border-b border-slate-100 flex items-center justify-between">
+            <div className="p-5 border-b border-slate-100 flex items-center justify-between bg-gradient-to-r from-slate-50 to-white">
               <h3 className="text-lg font-bold text-slate-800">Create Withdrawal Request</h3>
-              <button onClick={() => setShowWithdrawModal(false)} className="p-1 hover:bg-slate-100 rounded-lg">
+              <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>
@@ -222,15 +217,15 @@ export default function InvestorWithdrawPage() {
             <div className="p-5 overflow-y-auto flex-1 space-y-5">
               {/* Balance Cards */}
               <div className="grid grid-cols-3 gap-4">
-                <div className="bg-green-50 rounded-lg p-4 border border-green-100">
+                <div className="bg-green-50 rounded-lg p-4 border border-green-200">
                   <p className="text-xs text-green-600 font-medium">Available Balance</p>
                   <p className="text-lg font-bold text-green-700">৳{availableBalance.toLocaleString()}</p>
                 </div>
-                <div className="bg-amber-50 rounded-lg p-4 border border-amber-100">
+                <div className="bg-amber-50 rounded-lg p-4 border border-amber-200">
                   <p className="text-xs text-amber-600 font-medium">Pending Request</p>
                   <p className="text-lg font-bold text-amber-700">৳{investor.pendingEarnings.toLocaleString()}</p>
                 </div>
-                <div className="bg-slate-50 rounded-lg p-4 border border-slate-100">
+                <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
                   <p className="text-xs text-slate-600 font-medium">Total Withdrawn</p>
                   <p className="text-lg font-bold text-slate-700">৳{investor.totalWithdrawn.toLocaleString()}</p>
                 </div>
@@ -247,18 +242,18 @@ export default function InvestorWithdrawPage() {
                       id="selectAll"
                       checked={selectAll}
                       onChange={(e) => toggleSelectAll(e.target.checked)}
-                      className="w-4 h-4 text-investor rounded"
+                      className="w-5 h-5 text-investor rounded border-slate-300"
                     />
-                    <label htmlFor="selectAll" className="flex-1">
-                      <span className="font-medium text-slate-800">Select All</span>
+                    <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>
 
                   {/* Investment Plans with Bikes */}
                   <div className="border border-slate-200 rounded-lg overflow-hidden">
-                    <div className="bg-slate-50 px-4 py-2 border-b border-slate-200">
-                      <p className="text-sm font-medium text-slate-700">Investment Plans</p>
+                    <div className="bg-slate-100 px-4 py-3 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) => {
@@ -273,34 +268,37 @@ export default function InvestorWithdrawPage() {
                                 checked={selectAll || selectedPlans.includes(inv.id)}
                                 disabled={selectAll}
                                 onChange={() => togglePlan(inv.id, invBikes)}
-                                className="w-4 h-4 text-investor rounded"
+                                className="w-5 h-5 text-investor rounded border-slate-300"
                               />
-                              <label htmlFor={`plan-${inv.id}`} className="flex-1 flex items-center justify-between">
-                                <div>
-                                  <span className="font-medium text-slate-800">{inv.planName}</span>
-                                  <span className={`ml-2 px-2 py-0.5 rounded text-xs capitalize ${planColors[inv.planType]}`}>{inv.planType}</span>
+                              <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-semibold text-slate-800">{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>
+                                <span className="text-base font-bold text-green-600">৳{invEarnings.toLocaleString()}</span>
                               </label>
                             </div>
                             {!selectAll && invBikes.length > 0 && (
-                              <div className="ml-7 pl-4 border-l-2 border-slate-200 space-y-2">
+                              <div className="ml-8 pl-4 border-l-2 border-slate-200 space-y-2">
                                 {invBikes.map((bike: any) => {
                                   const statusStyle = bikeStatusColors[bike.status] || bikeStatusColors.available;
                                   return (
-                                    <div key={bike.id} className="flex items-center gap-2">
+                                    <div key={bike.id} className="flex items-center gap-3 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-3 h-3 text-investor rounded"
+                                        className="w-4 h-4 text-investor rounded border-slate-300"
                                       />
-                                      <label htmlFor={`bike-${bike.id}`} className="flex-1 text-sm text-slate-600">
-                                        <span className="font-medium">{bike.model}</span>
-                                        <span className="text-xs text-slate-400 ml-2">{bike.plateNumber}</span>
+                                      <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-medium">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
+                                      <span className="text-xs text-green-600 font-semibold">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
                                     </div>
                                   );
                                 })}
@@ -315,22 +313,17 @@ export default function InvestorWithdrawPage() {
               </div>
 
               {/* Withdrawal Amount */}
-              <div>
-                <h4 className="font-semibold text-slate-800 mb-3">Withdrawal Amount</h4>
-                <div className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-5">
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-sm text-slate-600">Calculated Amount</span>
-                    <span className={`text-xs px-2 py-0.5 rounded-full ${selectAll ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
-                      {selectAll ? 'All Selected' : `${selectedBikes.length} bikes`}
-                    </span>
-                  </div>
-                  <p className="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 className="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-5">
+                <div className="flex items-center justify-between mb-3">
+                  <h4 className="font-semibold text-slate-800">Withdrawal Amount</h4>
+                  <span className={`text-xs px-3 py-1 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-3xl font-bold text-green-700 mb-2">৳{calculatedAmount.toLocaleString()}</p>
+                <p className="text-xs text-slate-500">
+                  Based on {selectAll ? 'all' : selectedBikes.length} selected bike(s) earnings
+                </p>
               </div>
 
               {/* Payment Method */}
@@ -341,33 +334,32 @@ export default function InvestorWithdrawPage() {
                     <div
                       key={account.id}
                       onClick={() => { setPaymentMethod('bank'); setSelectedAccount(account.id); }}
-                      className={`p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === account.id ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}
+                      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'}`}
                     >
-                      <div className="flex items-center gap-2 mb-1">
-                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${account.isPrimary ? 'bg-green-100' : 'bg-slate-100'}`}>
-                          <Building2 className={`w-4 h-4 ${account.isPrimary ? 'text-green-600' : 'text-slate-500'}`} />
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg flex items-center justify-center bg-slate-100">
+                          <Building2 className="w-5 h-5 text-slate-500" />
                         </div>
                         <div>
-                          <p className="text-sm font-medium text-slate-800">{account.bankName}</p>
-                          {account.isPrimary && <span className="text-xs text-green-600">Primary</span>}
+                          <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>
-                      <p className="text-xs text-slate-500">{account.accountNumber}</p>
                     </div>
                   ))}
                 </div>
                 {(investor as any).mobileBanking && (
                   <div
                     onClick={() => { setPaymentMethod('mobile'); setSelectedAccount('mobile'); }}
-                    className={`mt-3 p-4 rounded-lg border cursor-pointer transition-all ${selectedAccount === 'mobile' ? 'border-investor bg-investor/5' : 'border-slate-200 hover:border-slate-300'}`}
+                    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'}`}
                   >
-                    <div className="flex items-center gap-2">
-                      <div className="w-8 h-8 rounded-lg bg-pink-100 flex items-center justify-center">
-                        <Smartphone className="w-4 h-4 text-pink-600" />
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-lg bg-pink-100 flex items-center justify-center">
+                        <Smartphone className="w-5 h-5 text-pink-600" />
                       </div>
                       <div>
-                        <p className="text-sm font-medium text-slate-800">{(investor as any).mobileBanking}</p>
-                        <p className="text-xs text-slate-500">{(investor as any).mobileBankingNumber}</p>
+                        <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>
@@ -375,20 +367,17 @@ export default function InvestorWithdrawPage() {
               </div>
             </div>
 
-            <div className="p-5 border-t border-slate-100 flex justify-between items-center">
-
-              <div className="flex gap-3">
-                <button onClick={() => setShowWithdrawModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
-                  Cancel
-                </button>
-                <button
-                  onClick={handleSubmitWithdraw}
-                  disabled={!selectedAccount || (selectedBikes.length === 0 && !selectAll)}
-                  className="px-6 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark disabled:opacity-50 disabled:cursor-not-allowed"
-                >
-                  Submit Request
-                </button>
-              </div>
+            <div className="p-5 border-t border-slate-200 flex justify-end gap-3 bg-slate-50">
+              <button onClick={() => setShowWithdrawModal(false)} className="px-5 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
+                onClick={handleSubmitWithdraw}
+                disabled={!selectedAccount || (selectedBikes.length === 0 && !selectAll)}
+                className="px-6 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 Request
+              </button>
             </div>
           </div>
         </div>
@@ -400,11 +389,11 @@ export default function InvestorWithdrawPage() {
           <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
             <div className="p-5 border-b border-slate-100 flex items-center justify-between">
               <h3 className="text-lg font-bold text-slate-800">Auto-Withdraw Settings</h3>
-              <button onClick={() => setShowAutoWithdrawModal(false)} className="p-1 hover:bg-slate-100 rounded-lg">
+              <button onClick={() => setShowAutoWithdrawModal(false)} className="p-1.5 hover:bg-slate-100 rounded-lg">
                 <X className="w-5 h-5 text-slate-400" />
               </button>
             </div>
-            <div className="p-5 space-y-4">
+            <div className="p-5 space-y-5">
               <div>
                 <label className="text-sm font-medium text-slate-700 mb-2 block">Enable Auto-Withdraw</label>
                 <div className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
@@ -423,7 +412,7 @@ export default function InvestorWithdrawPage() {
                 <select
                   value={autoWithdrawFreq}
                   onChange={(e) => setAutoWithdrawFreq(e.target.value)}
-                  className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                  className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm bg-white"
                 >
                   <option value="as_per_request">As Requested</option>
                   <option value="weekly">Weekly</option>
@@ -434,59 +423,57 @@ export default function InvestorWithdrawPage() {
               <div>
                 <label className="text-sm font-medium text-slate-700 mb-2 block">Minimum Amount</label>
                 <div className="flex items-center gap-2">
-                  <span className="px-3 py-2 bg-slate-100 rounded-lg text-slate-500 font-bold">৳</span>
+                  <span className="px-3 py-2.5 bg-slate-100 rounded-lg text-slate-500 font-bold">৳</span>
                   <input
                     type="number"
                     value={autoWithdrawMin}
                     onChange={(e) => setAutoWithdrawMin(e.target.value)}
-                    className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                    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">Minimum balance required for auto-withdrawal</p>
+                <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">
+                    <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="text-investor"
+                        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>
-                      {account.isPrimary && <span className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Primary</span>}
                     </div>
                   ))}
                   {(investor as any).mobileBanking && (
-                    <div className="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
+                    <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="text-investor"
+                        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>
-                      <span className="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">Primary</span>
                     </div>
                   )}
                 </div>
               </div>
             </div>
-            <div className="p-5 border-t border-slate-100 flex justify-end gap-3">
-              <button onClick={() => setShowAutoWithdrawModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
-              <button onClick={handleSaveAutoWithdraw} className="px-4 py-2 bg-investor text-white rounded-lg text-sm font-medium hover:bg-investor-dark">Save Settings</button>
+            <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>