diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 26a4bba..923d75c 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -350,61 +350,67 @@ const initialSettings: CompanySettings = {
     { id: 'SC-002', name: 'JAIBEN Service Center - Banani', address: 'Road 11, Banani, Dhaka', phone: '+8801712345671', rating: 4.5 },
   ],
   companyPolicy: {
-    investor: { 
-      title: 'Investor Policy', 
-      description: '<h2>Investor Guidelines</h2><p>Welcome to our investor program. This document outlines the terms and conditions for all investors participating in our EV fleet sharing initiative.</p><h3>Key Requirements</h3><ul><li>All investors must complete KYC verification</li><li>Minimum investment amount: ৳100,000</li><li>Monthly returns are calculated based on fleet utilization</li></ul><p><strong>Note:</strong> Past performance does not guarantee future results. Please read all terms carefully before investing.</p>', 
+    investor: {
+      title: 'Investor Policy',
+      description: '<h2>Investor Guidelines</h2><p>Welcome to our investor program. This document outlines the terms and conditions for all investors participating in our EV fleet sharing initiative.</p><h3>Key Requirements</h3><ul><li>All investors must complete KYC verification</li><li>Minimum investment amount: ৳100,000</li><li>Monthly returns are calculated based on fleet utilization</li></ul><p><strong>Note:</strong> Past performance does not guarantee future results. Please read all terms carefully before investing.</p>',
       rules: [
         { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle in the fleet' },
         { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level as when rented' },
         { name: 'No unauthorized drivers', description: 'Only authorized drivers listed in the agreement are permitted to drive' },
         { name: 'Follow traffic rules', description: 'All traffic laws and regulations must be followed' },
         { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours of occurrence' }
-      ] 
+      ]
     },
-    merchant: { 
-      title: 'Merchant Policy', 
-      description: '<h2>Merchant Terms & Conditions</h2><p>Thank you for joining our merchant network. These guidelines ensure smooth operations for all participating merchants.</p><h3>Operational Requirements</h3><ul><li>Maintain minimum inventory levels</li><li>Provide excellent customer service</li><li>Accept all payment methods offered</li><li>Process orders within 24 hours</li></ul><h3>Commission Structure</h3><p>Merchants receive <strong>15% commission</strong> on each completed delivery plus monthly bonuses for high performance.</p>', 
+    merchant: {
+      title: 'Merchant Policy',
+      description: '<h2>Merchant Terms & Conditions</h2><p>Thank you for joining our merchant network. These guidelines ensure smooth operations for all participating merchants.</p><h3>Operational Requirements</h3><ul><li>Maintain minimum inventory levels</li><li>Provide excellent customer service</li><li>Accept all payment methods offered</li><li>Process orders within 24 hours</li></ul><h3>Commission Structure</h3><p>Merchants receive <strong>15% commission</strong> on each completed delivery plus monthly bonuses for high performance.</p>',
       rules: [
         { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle in the fleet' },
         { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level as when rented' },
         { name: 'No unauthorized drivers', description: 'Only authorized drivers listed in the agreement are permitted to drive' },
         { name: 'Follow traffic rules', description: 'All traffic laws and regulations must be followed' },
         { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours of occurrence' }
-      ] 
+      ]
     },
-    swapStation: { 
-      title: 'Swap Station Policy', 
-      description: '<h2>Swap Station Guidelines</h2><p>Welcome to our battery swap station network. Follow these safety and operational protocols for optimal service.</p><h3>Safety Protocols</h3><ul><li>Always wear protective gloves when handling batteries</li><li>Inspect batteries for damage before swapping</li><li>Keep swap station area clean and organized</li><li>Report any malfunctioning equipment immediately</li></ul><h3>Operating Hours</h3><p>Stations operate <strong>24/7</strong> for subscriber convenience. Emergency support available round the clock.</p>', 
+    swapStation: {
+      title: 'Swap Station Policy',
+      description: '<h2>Swap Station Guidelines</h2><p>Welcome to our battery swap station network. Follow these safety and operational protocols for optimal service.</p><h3>Safety Protocols</h3><ul><li>Always wear protective gloves when handling batteries</li><li>Inspect batteries for damage before swapping</li><li>Keep swap station area clean and organized</li><li>Report any malfunctioning equipment immediately</li></ul><h3>Operating Hours</h3><p>Stations operate <strong>24/7</strong> for subscriber convenience. Emergency support available round the clock.</p>',
       rules: [
         { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle in the fleet' },
         { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level as when rented' },
         { name: 'No unauthorized drivers', description: 'Only authorized drivers listed in the agreement are permitted to drive' },
         { name: 'Follow traffic rules', description: 'All traffic laws and regulations must be followed' },
         { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours of occurrence' }
-      ] 
+      ]
     },
     rentalTypes: [
-      { type: 'single', name: 'Rental (Single)', title: 'Rental (Single)', description: '<h2>Single Person Rental</h2><p>Perfect for individual riders who need a reliable vehicle for daily commute or delivery work.</p><h3>Plan Features</h3><ul><li>Daily, weekly, and monthly options available</li><li>Comprehensive insurance included</li><li>24/7 roadside assistance</li><li>Free maintenance during rental period</li></ul><h3>Pricing</h3><p>Starting from <strong>৳400/day</strong> with deposit of ৳5,000.</p>', rules: [
-        { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
-        { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
-        { name: 'No unauthorized drivers', description: 'Only the registered rider is permitted to drive' },
-        { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
-        { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
-      ], enabled: true },
-      { type: 'shared', name: 'Rental (2 Person Shared)', title: 'Rental (2 Person Shared)', description: '<h2>Shared Rental Plan</h2><p>Ideal for companions or delivery partners who want to share riding costs and responsibilities.</p><h3>Plan Features</h3><ul><li>Split costs between two riders</li><li>Both users must be verified</li><li>Shared liability coverage</li><li>Flexible switch driver feature</li></ul><h3>Pricing</h3><p>Starting from <strong>৳600/day</strong> (৳300 each) with deposit of ৳8,000.</p>', rules: [
-        { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
-        { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
-        { name: 'No unauthorized drivers', description: 'Both registered riders are permitted to drive' },
-        { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
-        { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
-      ], enabled: true },
-      { type: 'renttoown', name: 'Rent-to-Own', title: 'Rent-to-Own', description: '<h2>Rent-to-Own Plan</h2><p>Build ownership gradually with our rent-to-own program. After completing the tenure, own the EV outright.</p><h3>Program Benefits</h3><ul><li>50% of rental payments go toward purchase</li><li>Option to buyout anytime</li><li>Full ownership after 36 months</li><li>Transferable to family members</li></ul><h3>Requirements</h3><p>Good payment history required. Credit check applies.</p>', rules: [
-        { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
-        { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
-        { name: 'No unauthorized drivers', description: 'Only the registered rider is permitted to drive' },
-        { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
-        { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
-      ], enabled: true },
+      {
+        type: 'single', name: 'Rental (Single)', title: 'Rental (Single)', description: '<h2>Single Person Rental</h2><p>Perfect for individual riders who need a reliable vehicle for daily commute or delivery work.</p><h3>Plan Features</h3><ul><li>Daily, weekly, and monthly options available</li><li>Comprehensive insurance included</li><li>24/7 roadside assistance</li><li>Free maintenance during rental period</li></ul><h3>Pricing</h3><p>Starting from <strong>৳400/day</strong> with deposit of ৳5,000.</p>', rules: [
+          { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
+          { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
+          { name: 'No unauthorized drivers', description: 'Only the registered rider is permitted to drive' },
+          { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
+          { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
+        ], enabled: true
+      },
+      {
+        type: 'shared', name: 'Rental (2 Person Shared)', title: 'Rental (2 Person Shared)', description: '<h2>Shared Rental Plan</h2><p>Ideal for companions or delivery partners who want to share riding costs and responsibilities.</p><h3>Plan Features</h3><ul><li>Split costs between two riders</li><li>Both users must be verified</li><li>Shared liability coverage</li><li>Flexible switch driver feature</li></ul><h3>Pricing</h3><p>Starting from <strong>৳600/day</strong> (৳300 each) with deposit of ৳8,000.</p>', rules: [
+          { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
+          { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
+          { name: 'No unauthorized drivers', description: 'Both registered riders are permitted to drive' },
+          { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
+          { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
+        ], enabled: true
+      },
+      {
+        type: 'renttoown', name: 'Rent-to-Own', title: 'Rent-to-Own', description: '<h2>Rent-to-Own Plan</h2><p>Build ownership gradually with our rent-to-own program. After completing the tenure, own the EV outright.</p><h3>Program Benefits</h3><ul><li>50% of rental payments go toward purchase</li><li>Option to buyout anytime</li><li>Full ownership after 36 months</li><li>Transferable to family members</li></ul><h3>Requirements</h3><p>Good payment history required. Credit check applies.</p>', rules: [
+          { name: 'No smoking in vehicles', description: 'Smoking is strictly prohibited inside any vehicle' },
+          { name: 'Return with same fuel/charge level', description: 'Vehicles must be returned with the same fuel/charge level' },
+          { name: 'No unauthorized drivers', description: 'Only the registered rider is permitted to drive' },
+          { name: 'Follow traffic rules', description: 'All traffic laws must be followed' },
+          { name: 'Report accidents within 24 hours', description: 'Any accident must be reported within 24 hours' }
+        ], enabled: true
+      },
     ],
   },
   rentalPolicy: {
@@ -676,7 +682,7 @@ export default function CompanySettingsPage() {
   const [newDocName, setNewDocName] = useState('');
   const [newDocDesc, setNewDocDesc] = useState('');
   const [activeInvestTab, setActiveInvestTab] = useState(0);
-  const [editingPolicy, setEditingPolicy] = useState<{tab: string; index: number} | null>(null);
+  const [editingPolicy, setEditingPolicy] = useState<{ tab: string; index: number } | null>(null);
   const [editPolicyName, setEditPolicyName] = useState('');
   const [editPolicyDesc, setEditPolicyDesc] = useState('');
   const [editPolicyDescHtml, setEditPolicyDescHtml] = useState('');
@@ -760,7 +766,7 @@ export default function CompanySettingsPage() {
       setSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
       setActiveSwapTab(updatedPlans.length - 1);
       setAddSwapStationPlan(false);
-setNewSwapName('');
+      setNewSwapName('');
     }
   };
   const [activeRiderTab, setActiveRiderTab] = useState(0);
@@ -1869,7 +1875,7 @@ setNewSwapName('');
             <div className="p-6 space-y-6">
               <h3 className="text-lg font-semibold text-slate-800">Company's Policy</h3>
 
-              <div className="flex gap-2 border-b border-slate-200 pb-2">
+              <div className="flex gap-2 border-b border-slate-200">
                 <button onClick={() => setActiveMasterTab('investor')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'investor' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Investor</button>
                 <button onClick={() => setActiveMasterTab('merchant')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'merchant' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Merchant</button>
                 <button onClick={() => setActiveMasterTab('swapstation')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'swapstation' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Swap Station</button>
@@ -1878,294 +1884,251 @@ setNewSwapName('');
 
               {activeMasterTab === 'investor' && (
                 <div className="space-y-4">
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Title</label>
-                    <input type="text" value={settings.companyPolicy?.investor?.title || ''} onChange={(e) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { title: e.target.value, description: settings.companyPolicy?.investor?.description || '', rules: settings.companyPolicy?.investor?.rules || [] } } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
+                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
+                      <Plus className="w-3 h-3" /> Add Policy
+                    </button>
                   </div>
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Description</label>
-                    <RichTextEditor value={settings.companyPolicy?.investor?.description || ''} onChange={(val) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { title: settings.companyPolicy?.investor?.title || '', description: val, rules: settings.companyPolicy?.investor?.rules || [] } } })} placeholder="Enter policy description..." minHeight={160} />
-                  </div>
-                  <div className="flex justify-end">
-                    <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save Changes</button>
-                  </div>
-                  <div className="border-t border-slate-200 pt-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <label className="text-sm text-slate-600 font-medium">Policy List</label>
-                      <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
-                        <Plus className="w-3 h-3" /> Add Policy
-                      </button>
-                    </div>
-                    <div className="space-y-2">
-                      {(settings.companyPolicy?.investor?.rules || []).map((policy, i) => (
-                        <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
-                          {editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? (
-                            <div className="space-y-2">
-                              <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
-                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
-                              <div className="flex gap-2">
-                                <button onClick={() => { updatePolicyRule('investor', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                              </div>
+                  <div className="space-y-2">
+                    {(settings.companyPolicy?.investor?.rules || []).map((policy, i) => (
+                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
+                        {editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? (
+                          <div className="space-y-2">
+                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
+                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
+                            <div className="flex gap-2">
+                              <button onClick={() => { updatePolicyRule('investor', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
+                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                             </div>
-                          ) : (
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="flex items-center gap-2">
-                                  <span className="text-sm font-medium text-slate-700">{policy.name}</span>
-                                </div>
-                                <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
-                              </div>
-                              <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
-                                  <Pencil className="w-3.5 h-3.5" />
-                                </button>
-                                <button onClick={() => deletePolicyRule('investor', i)} className="p-1 text-slate-400 hover:text-red-600">
-                                  <Trash2 className="w-3.5 h-3.5" />
-                                </button>
+                          </div>
+                        ) : (
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-medium text-slate-700">{policy.name}</span>
                               </div>
+                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                             </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                    {showAddPolicy && (
-                      <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
-                        <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
-                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
-                        <div className="flex gap-2">
-                          <button onClick={() => addPolicyRule('investor')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
-                          <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                        </div>
+                            <div className="flex items-center gap-1 ml-2">
+                              <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <Pencil className="w-3.5 h-3.5" />
+                              </button>
+                              <button onClick={() => deletePolicyRule('investor', i)} className="p-1 text-slate-400 hover:text-red-600">
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </div>
+                          </div>
+                        )}
                       </div>
-                    )}
+                    ))}
                   </div>
+                  {showAddPolicy && (
+                    <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
+                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
+                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
+                      <div className="flex gap-2">
+                        <button onClick={() => addPolicyRule('investor')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
+                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                      </div>
+                    </div>
+                  )}
+
                 </div>
               )}
 
               {activeMasterTab === 'merchant' && (
                 <div className="space-y-4">
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Title</label>
-                    <input type="text" value={settings.companyPolicy?.merchant?.title || ''} onChange={(e) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { title: e.target.value, description: settings.companyPolicy?.merchant?.description || '', rules: settings.companyPolicy?.merchant?.rules || [] } } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
+                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
+                      <Plus className="w-3 h-3" /> Add Policy
+                    </button>
                   </div>
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Description</label>
-                    <RichTextEditor value={settings.companyPolicy?.merchant?.description || ''} onChange={(val) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { title: settings.companyPolicy?.merchant?.title || '', description: val, rules: settings.companyPolicy?.merchant?.rules || [] } } })} placeholder="Enter policy description..." minHeight={160} />
-                  </div>
-                  <div className="flex justify-end">
-                    <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save Changes</button>
-                  </div>
-                  <div className="border-t border-slate-200 pt-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <label className="text-sm text-slate-600 font-medium">Policy List</label>
-                      <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
-                        <Plus className="w-3 h-3" /> Add Policy
-                      </button>
-                    </div>
-                    <div className="space-y-2">
-                      {(settings.companyPolicy?.merchant?.rules || []).map((policy, i) => (
-                        <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
-                          {editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? (
-                            <div className="space-y-2">
-                              <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
-                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
-                              <div className="flex gap-2">
-                                <button onClick={() => { updatePolicyRule('merchant', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                              </div>
+                  <div className="space-y-2">
+                    {(settings.companyPolicy?.merchant?.rules || []).map((policy, i) => (
+                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
+                        {editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? (
+                          <div className="space-y-2">
+                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
+                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
+                            <div className="flex gap-2">
+                              <button onClick={() => { updatePolicyRule('merchant', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
+                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                             </div>
-                          ) : (
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="flex items-center gap-2">
-                                  <span className="text-sm font-medium text-slate-700">{policy.name}</span>
-                                </div>
-                                <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
-                              </div>
-                              <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
-                                  <Pencil className="w-3.5 h-3.5" />
-                                </button>
-                                <button onClick={() => deletePolicyRule('merchant', i)} className="p-1 text-slate-400 hover:text-red-600">
-                                  <Trash2 className="w-3.5 h-3.5" />
-                                </button>
+                          </div>
+                        ) : (
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-medium text-slate-700">{policy.name}</span>
                               </div>
+                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                             </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                    {showAddPolicy && (
-                      <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
-                        <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
-                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
-                        <div className="flex gap-2">
-                          <button onClick={() => addPolicyRule('merchant')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
-                          <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                        </div>
+                            <div className="flex items-center gap-1 ml-2">
+                              <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <Pencil className="w-3.5 h-3.5" />
+                              </button>
+                              <button onClick={() => deletePolicyRule('merchant', i)} className="p-1 text-slate-400 hover:text-red-600">
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </div>
+                          </div>
+                        )}
                       </div>
-                    )}
+                    ))}
                   </div>
+                  {showAddPolicy && (
+                    <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
+                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
+                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
+                      <div className="flex gap-2">
+                        <button onClick={() => addPolicyRule('merchant')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
+                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                      </div>
+                    </div>
+                  )}
                 </div>
+
               )}
 
               {activeMasterTab === 'swapstation' && (
                 <div className="space-y-4">
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Title</label>
-                    <input type="text" value={settings.companyPolicy?.swapStation?.title || ''} onChange={(e) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { title: e.target.value, description: settings.companyPolicy?.swapStation?.description || '', rules: settings.companyPolicy?.swapStation?.rules || [] } } })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+
+                  <div className="flex items-center justify-between mb-2">
+                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
+                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
+                      <Plus className="w-3 h-3" /> Add Policy
+                    </button>
                   </div>
-                  <div>
-                    <label className="text-sm text-slate-600">Policy Description</label>
-                    <RichTextEditor value={settings.companyPolicy?.swapStation?.description || ''} onChange={(val) => setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { title: settings.companyPolicy?.swapStation?.title || '', description: val, rules: settings.companyPolicy?.swapStation?.rules || [] } } })} placeholder="Enter policy description..." minHeight={160} />
-                  </div>
-                  <div className="flex justify-end">
-                    <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save Changes</button>
-                  </div>
-                  <div className="border-t border-slate-200 pt-4">
-                    <div className="flex items-center justify-between mb-2">
-                      <label className="text-sm text-slate-600 font-medium">Policy List</label>
-                      <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
-                        <Plus className="w-3 h-3" /> Add Policy
-                      </button>
-                    </div>
-                    <div className="space-y-2">
-                      {(settings.companyPolicy?.swapStation?.rules || []).map((policy, i) => (
-                        <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
-                          {editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? (
-                            <div className="space-y-2">
-                              <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
-                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
-                              <div className="flex gap-2">
-                                <button onClick={() => { updatePolicyRule('swapstation', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                              </div>
+                  <div className="space-y-2">
+                    {(settings.companyPolicy?.swapStation?.rules || []).map((policy, i) => (
+                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
+                        {editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? (
+                          <div className="space-y-2">
+                            <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
+                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
+                            <div className="flex gap-2">
+                              <button onClick={() => { updatePolicyRule('swapstation', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
+                              <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                             </div>
-                          ) : (
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="flex items-center gap-2">
-                                  <span className="text-sm font-medium text-slate-700">{policy.name}</span>
-                                </div>
-                                <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
-                              </div>
-                              <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
-                                  <Pencil className="w-3.5 h-3.5" />
-                                </button>
-                                <button onClick={() => deletePolicyRule('swapstation', i)} className="p-1 text-slate-400 hover:text-red-600">
-                                  <Trash2 className="w-3.5 h-3.5" />
-                                </button>
+                          </div>
+                        ) : (
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <span className="text-sm font-medium text-slate-700">{policy.name}</span>
                               </div>
+                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                             </div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                    {showAddPolicy && (
-                      <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
-                        <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
-                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
-                        <div className="flex gap-2">
-                          <button onClick={() => addPolicyRule('swapstation')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
-                          <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                        </div>
+                            <div className="flex items-center gap-1 ml-2">
+                              <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <Pencil className="w-3.5 h-3.5" />
+                              </button>
+                              <button onClick={() => deletePolicyRule('swapstation', i)} className="p-1 text-slate-400 hover:text-red-600">
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </div>
+                          </div>
+                        )}
                       </div>
-                    )}
+                    ))}
                   </div>
+                  {showAddPolicy && (
+                    <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
+                      <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
+                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
+                      <div className="flex gap-2">
+                        <button onClick={() => addPolicyRule('swapstation')} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
+                        <button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                      </div>
+                    </div>
+                  )}
                 </div>
+
               )}
 
               {activeMasterTab === 'rentalType' && (
                 <div className="space-y-6">
                   {(settings.companyPolicy?.rentalTypes || []).map((rtype, idx) => (
                     <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
-                      <div className="bg-slate-50 px-4 py-3 flex items-center justify-between">
+                      <div className="bg-slate-50 px-4 py-3">
                         <h4 className="font-medium text-slate-700">{rtype.name}</h4>
                       </div>
-                      <div className="p-4 space-y-3">
-                        <input type="text" value={rtype.title} onChange={(e) => {
-                          const updated = [...(settings.companyPolicy?.rentalTypes || [])];
-                          updated[idx] = { ...updated[idx], title: e.target.value };
-                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
-                        }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Policy Title" />
-                        <RichTextEditor value={rtype.description} onChange={(val) => {
-                          const updated = [...(settings.companyPolicy?.rentalTypes || [])];
-                          updated[idx] = { ...updated[idx], description: val };
-                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
-                        }} placeholder="Enter policy description..." minHeight={120} />
-                        <div className="border-t border-slate-200 pt-4 mt-4">
-                          <div className="flex items-center justify-between mb-2">
-                            <label className="text-sm text-slate-600 font-medium">Policy List</label>
-                          </div>
-                          <div className="space-y-2">
-                            {(rtype.rules || []).map((policy, policyIdx) => (
-                              <div key={policyIdx} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
-                                {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? (
-                                  <div className="space-y-2">
-                                    <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
-                                    <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
-                                    <div className="flex gap-2">
-                                      <button onClick={() => {
-                                        const updated = [...(settings.companyPolicy?.rentalTypes || [])];
-                                        const newDesc = editPolicyDescHtml || editPolicyDesc;
-                                        updated[idx].rules[policyIdx] = { name: editPolicyName, description: newDesc };
-                                        setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
-                                        setEditingPolicy(null);
-                                        setEditPolicyDescHtml('');
-                                      }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                      <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                                    </div>
-                                  </div>
-                                ) : (
-                                  <div className="flex items-start justify-between">
-                                    <div className="flex-1">
-                                      <div className="flex items-center gap-2">
-                                        <span className="text-sm font-medium text-slate-700">{policy.name}</span>
-                                      </div>
-                                      <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
-                                    </div>
-                                    <div className="flex items-center gap-1 ml-2">
-                                      <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: policyIdx }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
-                                        <Pencil className="w-3.5 h-3.5" />
-                                      </button>
-                                      <button onClick={() => {
-                                        const updated = [...(settings.companyPolicy?.rentalTypes || [])];
-                                        updated[idx].rules = updated[idx].rules?.filter((_, i) => i !== policyIdx);
-                                        setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
-                                      }} className="p-1 text-slate-400 hover:text-red-600">
-                                        <Trash2 className="w-3.5 h-3.5" />
-                                      </button>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                          <button onClick={() => setEditingPolicy({ tab: 'rentalTypeAdd', index: idx })} className="mt-2 text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
-                            <Plus className="w-3 h-3" /> Add Policy
-                          </button>
-                          {editingPolicy?.tab === 'rentalTypeAdd' && editingPolicy?.index === idx && (
-                            <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
-                              <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
-                              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
-                              <div className="flex gap-2">
-                                <button onClick={() => {
-                                  const updated = [...(settings.companyPolicy?.rentalTypes || [])];
-                                  updated[idx].rules = [...(updated[idx].rules || []), { name: newPolicyName, description: newPolicyDesc }];
-                                  setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
-                                  setNewPolicyName('');
-                                  setNewPolicyDesc('');
-                                  setEditingPolicy(null);
-                                }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
-                                <button onClick={() => { setEditingPolicy(null); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
-                              </div>
-                            </div>
-                          )}
+                      <div className="p-4 space-y-4">
+
+                        <div className="flex items-center justify-between mb-2">
+                          <label className="text-sm text-slate-600 font-medium">Policy List</label>
                         </div>
+                        <div className="space-y-2">
+                          {(rtype.rules || []).map((policy, policyIdx) => (
+                            <div key={policyIdx} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
+                              {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? (
+                                <div className="space-y-2">
+                                  <input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Name" />
+                                  <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
+                                  <div className="flex gap-2">
+                                    <button onClick={() => {
+                                      const updated = [...(settings.companyPolicy?.rentalTypes || [])];
+                                      const newDesc = editPolicyDescHtml || editPolicyDesc;
+                                      updated[idx].rules[policyIdx] = { name: editPolicyName, description: newDesc };
+                                      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
+                                      setEditingPolicy(null);
+                                      setEditPolicyDescHtml('');
+                                    }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
+                                    <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                                  </div>
+                                </div>
+                              ) : (
+                                <div className="flex items-start justify-between">
+                                  <div className="flex-1">
+                                    <div className="flex items-center gap-2">
+                                      <span className="text-sm font-medium text-slate-700">{policy.name}</span>
+                                    </div>
+                                    <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
+                                  </div>
+                                  <div className="flex items-center gap-1 ml-2">
+                                    <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: policyIdx }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                      <Pencil className="w-3.5 h-3.5" />
+                                    </button>
+                                    <button onClick={() => {
+                                      const updated = [...(settings.companyPolicy?.rentalTypes || [])];
+                                      updated[idx].rules = updated[idx].rules?.filter((_, i) => i !== policyIdx);
+                                      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
+                                    }} className="p-1 text-slate-400 hover:text-red-600">
+                                      <Trash2 className="w-3.5 h-3.5" />
+                                    </button>
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          ))}
+                        </div>
+                        <button onClick={() => setEditingPolicy({ tab: 'rentalTypeAdd', index: idx })} className="mt-2 text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
+                          <Plus className="w-3 h-3" /> Add Policy
+                        </button>
+                        {editingPolicy?.tab === 'rentalTypeAdd' && editingPolicy?.index === idx && (
+                          <div className="mt-2 p-3 bg-white rounded-lg border border-blue-200">
+                            <input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Name" />
+                            <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
+                            <div className="flex gap-2">
+                              <button onClick={() => {
+                                const updated = [...(settings.companyPolicy?.rentalTypes || [])];
+                                updated[idx].rules = [...(updated[idx].rules || []), { name: newPolicyName, description: newPolicyDesc }];
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
+                                setNewPolicyName('');
+                                setNewPolicyDesc('');
+                                setEditingPolicy(null);
+                              }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
+                              <button onClick={() => { setEditingPolicy(null); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                            </div>
+                          </div>
+                        )}
                       </div>
                     </div>
+
                   ))}
                   <div className="flex justify-end">
                     <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save Changes</button>
@@ -2173,754 +2136,763 @@ setNewSwapName('');
                 </div>
               )}
             </div>
-)}
+          )
+          }
 
-          {activeTab === 'plans' && (
-            <div className="p-6 space-y-6">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
-              </div>
-
-              <div className="flex gap-2 border-b border-slate-200">
-                <button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>1. Single Rent</button>
-                <button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>2. Rent to Own</button>
-                <button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>3. Share an EV</button>
-              </div>
-
-              {activePlanTab === 'singleRent' && (
-                <div className="space-y-6">
-                  {settings.plans.singleRent.map((plan, idx) => (
-                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                      <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
-                          <div>
-                            <h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
-                            <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
-                          </div>
-                        </div>
-                        <button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
-                          <Save className="w-3 h-3" /> Save
-                        </button>
-                      </div>
-                      <div className="p-4">
-                        <div className="grid lg:grid-cols-3 gap-4">
-                          <div>
-                            <label className="text-sm text-slate-600">Daily Rent (৳)</label>
-                            <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
-                            <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                            <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Deposit (৳)</label>
-                            <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">FICO Share (%)</label>
-                            <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
-                            <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
-                          </div>
-                        </div>
-                        <div className="mt-4 p-3 bg-slate-50 rounded-lg">
-                          <div className="flex items-center justify-between text-sm">
-                            <span className="text-slate-600">FICO + JAIBEN =</span>
-                            <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
-                          </div>
-                        </div>
-                        <div className="mt-4">
-                          <label className="text-sm text-slate-600">Description</label>
-                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                        </div>
-                      </div>
-                    </div>
-                  ))}
+          {
+            activeTab === 'plans' && (
+              <div className="p-6 space-y-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
                 </div>
-              )}
 
-              {activePlanTab === 'rentToOwn' && (
-                <div className="space-y-6">
-                  {settings.plans.rentToOwn.map((plan, idx) => (
-                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                      <div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
-                          <div>
-                            <h4 className="font-semibold text-purple-800">RENT TO OWN - {plan.tier} - ৳{plan.dailyRent}/day</h4>
-                            <p className="text-sm text-purple-600 mt-1">{plan.description}</p>
-                          </div>
-                        </div>
-                        <button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
-                          <Save className="w-3 h-3" /> Save
-                        </button>
-                      </div>
-                      <div className="p-4">
-                        <div className="grid lg:grid-cols-3 gap-4">
-                          <div>
-                            <label className="text-sm text-slate-600">Daily Rent (৳)</label>
-                            <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
-                            <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                            <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Deposit (৳)</label>
-                            <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Duration (Months)</label>
-                            <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">EV Price (৳)</label>
-                            <input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Total Payment (৳)</label>
-                            <input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Profit (৳)</label>
-                            <input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">FICO Rent Share (%)</label>
-                            <input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">FICO Profit Share (%)</label>
-                            <input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
-                            <input type="number" value={100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
-                          </div>
-                        </div>
-                        <div className="mt-4 p-3 bg-slate-50 rounded-lg">
-                          <div className="flex items-center justify-between text-sm">
-                            <span className="text-slate-600">FICO + JAIBEN =</span>
-                            <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent)}% (FICO Rent: {plan.ficoRentSharePercent}% + FICO Profit: {plan.ficoProfitSharePercent}% + JAIBEN: {100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent}%)</span>
-                          </div>
-                        </div>
-                        <div className="mt-4">
-                          <label className="text-sm text-slate-600">Description</label>
-                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                        </div>
-                      </div>
-                    </div>
-                  ))}
+                <div className="flex gap-2 border-b border-slate-200">
+                  <button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>1. Single Rent</button>
+                  <button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>2. Rent to Own</button>
+                  <button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>3. Share an EV</button>
                 </div>
-              )}
 
-              {activePlanTab === 'shareEv' && (
-                <div className="space-y-6">
-                  {settings.plans.shareEv.map((plan, idx) => (
-                    <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                      <div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
-                          <div>
-                            <h4 className="font-semibold text-green-800">SHARE AN EV - {plan.tier} - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
-                            <p className="text-sm text-green-600 mt-1">{plan.description}</p>
+                {activePlanTab === 'singleRent' && (
+                  <div className="space-y-6">
+                    {settings.plans.singleRent.map((plan, idx) => (
+                      <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                        <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
+                            <div>
+                              <h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
+                              <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
+                            </div>
                           </div>
+                          <button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
+                            <Save className="w-3 h-3" /> Save
+                          </button>
                         </div>
-                        <button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
-                          <Save className="w-3 h-3" /> Save
-                        </button>
-                      </div>
-                      <div className="p-4">
-                        <div className="grid lg:grid-cols-3 gap-4">
-                          <div>
-                            <label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
-                            <input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <div className="p-4">
+                          <div className="grid lg:grid-cols-3 gap-4">
+                            <div>
+                              <label className="text-sm text-slate-600">Daily Rent (৳)</label>
+                              <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
+                              <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                              <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Deposit (৳)</label>
+                              <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">FICO Share (%)</label>
+                              <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
+                              <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
+                            </div>
                           </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Total Daily Rent (৳)</label>
-                            <input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                          <div className="mt-4 p-3 bg-slate-50 rounded-lg">
+                            <div className="flex items-center justify-between text-sm">
+                              <span className="text-slate-600">FICO + JAIBEN =</span>
+                              <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
+                            </div>
                           </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Weekly Subscription Each (৳)</label>
-                            <input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                          <div className="mt-4">
+                            <label className="text-sm text-slate-600">Description</label>
+                            <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                           </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Total Weekly Subscription (৳)</label>
-                            <input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Monthly Subscription Each (৳)</label>
-                            <input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Total Monthly Subscription (৳)</label>
-                            <input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Deposit Each (৳)</label>
-                            <input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">Total Deposit (৳)</label>
-                            <input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">FICO Share (%)</label>
-                            <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                          </div>
-                          <div>
-                            <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
-                            <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
-                          </div>
-                        </div>
-                        <div className="mt-4 p-3 bg-slate-50 rounded-lg">
-                          <div className="flex items-center justify-between text-sm">
-                            <span className="text-slate-600">FICO + JAIBEN =</span>
-                            <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
-                          </div>
-                        </div>
-                        <div className="mt-4">
-                          <label className="text-sm text-slate-600">Description</label>
-                          <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                         </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-          {(activeTab as string) === 'investment' && (
-            <div className="p-6 space-y-6">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-slate-800">Investment Plans</h3>
-              </div>
-
-              <div className="flex items-center justify-between bg-amber-50 border border-amber-200 rounded-xl p-4">
-                <div>
-                  <h4 className="font-semibold text-amber-800">Investment Plans ({settings.plans.investment.length})</h4>
-                  <p className="text-sm text-amber-600">Manage investment plans for investors</p>
-                </div>
-                <button onClick={() => { setAddInvestPlan(true); setNewInvestName(''); }} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                  <Plus className="w-4 h-4" /> New Plan
-                </button>
-              </div>
-
-              {addInvestPlan && (
-                <div className="bg-white rounded-xl border border-amber-300 overflow-hidden">
-                  <div className="bg-amber-100 px-4 py-3 border-b border-amber-200 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-amber-800">New Investment Plan</h4>
-                      <p className="text-sm text-amber-600 mt-1">Fill in the details below</p>
-                    </div>
-                    <button onClick={() => setAddInvestPlan(false)} className="text-amber-600 hover:text-amber-800">
-                      <X className="w-5 h-5" />
-                    </button>
+                    ))}
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
-                      <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={newInvestName} onChange={(e) => setNewInvestName(e.target.value)} placeholder="e.g., 1 Bike Plan" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={newInvestStatus} onChange={(e) => setNewInvestStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Target Amount (৳)</label>
-                        <input type="number" value={newInvestTarget} onChange={(e) => setNewInvestTarget(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Start Date</label>
-                        <input type="date" value={newInvestStart} onChange={(e) => setNewInvestStart(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">End Date</label>
-                        <input type="date" value={newInvestEnd} onChange={(e) => setNewInvestEnd(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Investment (৳)</label>
-                        <input type="number" value={newInvestMin} onChange={(e) => setNewInvestMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Investment (৳)</label>
-                        <input type="number" value={newInvestMax} onChange={(e) => setNewInvestMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Return (%)</label>
-                        <input type="number" step="0.1" value={newInvestMonthly} onChange={(e) => setNewInvestMonthly(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Duration (Months)</label>
-                        <input type="number" value={newInvestDuration} onChange={(e) => setNewInvestDuration(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Lock-in Period (Months)</label>
-                        <input type="number" value={newInvestLock} onChange={(e) => setNewInvestLock(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Total Return (%)</label>
-                        <input type="number" step="0.1" value={newInvestTotal} onChange={(e) => setNewInvestTotal(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
-                        <input type="number" value={newInvestPenalty} onChange={(e) => setNewInvestPenalty(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                    </div>
-                    <div className="mt-4 p-3 bg-slate-50 rounded-lg">
-                      <div className="flex items-center justify-between text-sm">
-                        <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
-                        <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
-                      </div>
-                    </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={newInvestDesc} onChange={(e) => setNewInvestDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <button onClick={createInvestPlan} className="mt-4 px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
-                  </div>
-                </div>
-              )}
+                )}
 
-              <div className="flex gap-2 border-b border-slate-200">
-                {settings.plans.investment.map((plan, idx) => (
-                  <button key={idx} onClick={() => setActiveInvestTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeInvestTab === idx ? 'border-amber-500 text-amber-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
-                ))}
+                {activePlanTab === 'rentToOwn' && (
+                  <div className="space-y-6">
+                    {settings.plans.rentToOwn.map((plan, idx) => (
+                      <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                        <div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
+                            <div>
+                              <h4 className="font-semibold text-purple-800">RENT TO OWN - {plan.tier} - ৳{plan.dailyRent}/day</h4>
+                              <p className="text-sm text-purple-600 mt-1">{plan.description}</p>
+                            </div>
+                          </div>
+                          <button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
+                            <Save className="w-3 h-3" /> Save
+                          </button>
+                        </div>
+                        <div className="p-4">
+                          <div className="grid lg:grid-cols-3 gap-4">
+                            <div>
+                              <label className="text-sm text-slate-600">Daily Rent (৳)</label>
+                              <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
+                              <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                              <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Deposit (৳)</label>
+                              <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Duration (Months)</label>
+                              <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">EV Price (৳)</label>
+                              <input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Total Payment (৳)</label>
+                              <input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Profit (৳)</label>
+                              <input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">FICO Rent Share (%)</label>
+                              <input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">FICO Profit Share (%)</label>
+                              <input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
+                              <input type="number" value={100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
+                            </div>
+                          </div>
+                          <div className="mt-4 p-3 bg-slate-50 rounded-lg">
+                            <div className="flex items-center justify-between text-sm">
+                              <span className="text-slate-600">FICO + JAIBEN =</span>
+                              <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent)}% (FICO Rent: {plan.ficoRentSharePercent}% + FICO Profit: {plan.ficoProfitSharePercent}% + JAIBEN: {100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent}%)</span>
+                            </div>
+                          </div>
+                          <div className="mt-4">
+                            <label className="text-sm text-slate-600">Description</label>
+                            <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {activePlanTab === 'shareEv' && (
+                  <div className="space-y-6">
+                    {settings.plans.shareEv.map((plan, idx) => (
+                      <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                        <div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
+                          <div className="flex items-center gap-3">
+                            {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
+                            <div>
+                              <h4 className="font-semibold text-green-800">SHARE AN EV - {plan.tier} - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
+                              <p className="text-sm text-green-600 mt-1">{plan.description}</p>
+                            </div>
+                          </div>
+                          <button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
+                            <Save className="w-3 h-3" /> Save
+                          </button>
+                        </div>
+                        <div className="p-4">
+                          <div className="grid lg:grid-cols-3 gap-4">
+                            <div>
+                              <label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
+                              <input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Total Daily Rent (৳)</label>
+                              <input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Weekly Subscription Each (৳)</label>
+                              <input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Total Weekly Subscription (৳)</label>
+                              <input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Monthly Subscription Each (৳)</label>
+                              <input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Total Monthly Subscription (৳)</label>
+                              <input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Deposit Each (৳)</label>
+                              <input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">Total Deposit (৳)</label>
+                              <input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">FICO Share (%)</label>
+                              <input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                            </div>
+                            <div>
+                              <label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
+                              <input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
+                            </div>
+                          </div>
+                          <div className="mt-4 p-3 bg-slate-50 rounded-lg">
+                            <div className="flex items-center justify-between text-sm">
+                              <span className="text-slate-600">FICO + JAIBEN =</span>
+                              <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
+                            </div>
+                          </div>
+                          <div className="mt-4">
+                            <label className="text-sm text-slate-600">Description</label>
+                            <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
+            )
+          }
 
-              {settings.plans.investment.length > 0 && settings.plans.investment.map((plan, idx) => idx === activeInvestTab && (
-                <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                  <div className="bg-amber-50 px-4 py-3 border-b border-amber-100 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-amber-800">{plan.name} - {plan.monthlyReturnPercent}% per month</h4>
-                      <p className="text-sm text-amber-600 mt-1">{plan.description}</p>
-                    </div>
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+          {
+            (activeTab as string) === 'investment' && (
+              <div className="p-6 space-y-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-slate-800">Investment Plans</h3>
+                </div>
+
+                <div className="flex items-center justify-between bg-amber-50 border border-amber-200 rounded-xl p-4">
+                  <div>
+                    <h4 className="font-semibold text-amber-800">Investment Plans ({settings.plans.investment.length})</h4>
+                    <p className="text-sm text-amber-600">Manage investment plans for investors</p>
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
+                  <button onClick={() => { setAddInvestPlan(true); setNewInvestName(''); }} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                    <Plus className="w-4 h-4" /> New Plan
+                  </button>
+                </div>
+
+                {addInvestPlan && (
+                  <div className="bg-white rounded-xl border border-amber-300 overflow-hidden">
+                    <div className="bg-amber-100 px-4 py-3 border-b border-amber-200 flex items-center justify-between">
                       <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <h4 className="font-semibold text-amber-800">New Investment Plan</h4>
+                        <p className="text-sm text-amber-600 mt-1">Fill in the details below</p>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Target Amount (৳)</label>
-                        <input type="number" value={plan.targetAmount} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].targetAmount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Start Date</label>
-                        <input type="date" value={plan.startDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].startDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">End Date</label>
-                        <input type="date" value={plan.endDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].endDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Investment (৳)</label>
-                        <input type="number" value={plan.minInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Investment (৳)</label>
-                        <input type="number" value={plan.maxInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].maxInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Return (%)</label>
-                        <input type="number" step="0.1" value={plan.monthlyReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].monthlyReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Duration (Months)</label>
-                        <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Lock-in Period (Months)</label>
-                        <input type="number" value={plan.lockInMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].lockInMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Total Return (%)</label>
-                        <input type="number" step="0.1" value={plan.totalReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].totalReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
-                        <input type="number" value={plan.earlyExitPenalty} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].earlyExitPenalty = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                    </div>
-                    <div className="mt-4 p-3 bg-slate-50 rounded-lg">
-                      <div className="flex items-center justify-between text-sm">
-                        <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
-                        <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
-                      </div>
-                    </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <div className="mt-4 flex justify-end">
-                      <button onClick={handleSave} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                        <Save className="w-4 h-4" /> Save Changes
+                      <button onClick={() => setAddInvestPlan(false)} className="text-amber-600 hover:text-amber-800">
+                        <X className="w-5 h-5" />
                       </button>
                     </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {(activeTab as string) === 'swapstation' && (
-            <div className="p-6 space-y-6">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-slate-800">Swap Station Plans</h3>
-              </div>
-
-              <div className="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-xl p-4">
-                <div>
-                  <h4 className="font-semibold text-blue-800">Swap Station Plans ({settings.plans.swapStation.length})</h4>
-                  <p className="text-sm text-blue-600">Manage swap station plans for operators</p>
-                </div>
-                <button onClick={() => { setAddSwapStationPlan(true); setNewSwapName(''); }} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                  <Plus className="w-4 h-4" /> New Plan
-                </button>
-              </div>
-
-              {addSwapStationPlan && (
-                <div className="bg-white rounded-xl border border-blue-300 overflow-hidden">
-                  <div className="bg-blue-100 px-4 py-3 border-b border-blue-200 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-blue-800">New Swap Station Plan</h4>
-                      <p className="text-sm text-blue-600 mt-1">Fill in the details below</p>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={newInvestName} onChange={(e) => setNewInvestName(e.target.value)} placeholder="e.g., 1 Bike Plan" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={newInvestStatus} onChange={(e) => setNewInvestStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Target Amount (৳)</label>
+                          <input type="number" value={newInvestTarget} onChange={(e) => setNewInvestTarget(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Start Date</label>
+                          <input type="date" value={newInvestStart} onChange={(e) => setNewInvestStart(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">End Date</label>
+                          <input type="date" value={newInvestEnd} onChange={(e) => setNewInvestEnd(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Investment (৳)</label>
+                          <input type="number" value={newInvestMin} onChange={(e) => setNewInvestMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Investment (৳)</label>
+                          <input type="number" value={newInvestMax} onChange={(e) => setNewInvestMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Return (%)</label>
+                          <input type="number" step="0.1" value={newInvestMonthly} onChange={(e) => setNewInvestMonthly(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Duration (Months)</label>
+                          <input type="number" value={newInvestDuration} onChange={(e) => setNewInvestDuration(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Lock-in Period (Months)</label>
+                          <input type="number" value={newInvestLock} onChange={(e) => setNewInvestLock(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Total Return (%)</label>
+                          <input type="number" step="0.1" value={newInvestTotal} onChange={(e) => setNewInvestTotal(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
+                          <input type="number" value={newInvestPenalty} onChange={(e) => setNewInvestPenalty(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                      </div>
+                      <div className="mt-4 p-3 bg-slate-50 rounded-lg">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
+                          <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
+                        </div>
+                      </div>
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={newInvestDesc} onChange={(e) => setNewInvestDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                      </div>
+                      <button onClick={createInvestPlan} className="mt-4 px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                     </div>
-                    <button onClick={() => setAddSwapStationPlan(false)} className="text-blue-600 hover:text-blue-800">
-                      <X className="w-5 h-5" />
-                    </button>
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
+                )}
+
+                <div className="flex gap-2 border-b border-slate-200">
+                  {settings.plans.investment.map((plan, idx) => (
+                    <button key={idx} onClick={() => setActiveInvestTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeInvestTab === idx ? 'border-amber-500 text-amber-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
+                  ))}
+                </div>
+
+                {settings.plans.investment.length > 0 && settings.plans.investment.map((plan, idx) => idx === activeInvestTab && (
+                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                    <div className="bg-amber-50 px-4 py-3 border-b border-amber-100 flex items-center justify-between">
                       <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={newSwapName} onChange={(e) => setNewSwapName(e.target.value)} placeholder="e.g., Standard Station" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <h4 className="font-semibold text-amber-800">{plan.name} - {plan.monthlyReturnPercent}% per month</h4>
+                        <p className="text-sm text-amber-600 mt-1">{plan.description}</p>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={newSwapStatus} onChange={(e) => setNewSwapStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+                    </div>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Target Amount (৳)</label>
+                          <input type="number" value={plan.targetAmount} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].targetAmount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Start Date</label>
+                          <input type="date" value={plan.startDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].startDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">End Date</label>
+                          <input type="date" value={plan.endDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].endDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Investment (৳)</label>
+                          <input type="number" value={plan.minInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Investment (৳)</label>
+                          <input type="number" value={plan.maxInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].maxInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Return (%)</label>
+                          <input type="number" step="0.1" value={plan.monthlyReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].monthlyReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Duration (Months)</label>
+                          <input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Lock-in Period (Months)</label>
+                          <input type="number" value={plan.lockInMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].lockInMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Total Return (%)</label>
+                          <input type="number" step="0.1" value={plan.totalReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].totalReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
+                          <input type="number" value={plan.earlyExitPenalty} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].earlyExitPenalty = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Battery Count</label>
-                        <input type="number" value={newSwapBatteryCount} onChange={(e) => setNewSwapBatteryCount(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      <div className="mt-4 p-3 bg-slate-50 rounded-lg">
+                        <div className="flex items-center justify-between text-sm">
+                          <span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
+                          <span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
+                        </div>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Swap Price (৳)</label>
-                        <input type="number" value={newSwapPrice} onChange={(e) => setNewSwapPrice(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                        <input type="number" value={newSwapMonthly} onChange={(e) => setNewSwapMonthly(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
-                        <input type="number" value={newSwapDaily} onChange={(e) => setNewSwapDaily(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Batteries</label>
-                        <input type="number" value={newSwapMin} onChange={(e) => setNewSwapMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Batteries</label>
-                        <input type="number" value={newSwapMax} onChange={(e) => setNewSwapMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Profit Share (%)</label>
-                        <input type="number" value={newSwapProfit} onChange={(e) => setNewSwapProfit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      <div className="mt-4 flex justify-end">
+                        <button onClick={handleSave} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                          <Save className="w-4 h-4" /> Save Changes
+                        </button>
                       </div>
                     </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={newSwapDesc} onChange={(e) => setNewSwapDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <button onClick={createSwapStationPlan} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                   </div>
-                </div>
-              )}
-
-              <div className="flex gap-2 border-b border-slate-200">
-                {settings.plans.swapStation.map((plan, idx) => (
-                  <button key={idx} onClick={() => setActiveSwapTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeSwapTab === idx ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
                 ))}
               </div>
+            )
+          }
 
-              {settings.plans.swapStation.length > 0 && settings.plans.swapStation.map((plan, idx) => idx === activeSwapTab && (
-                <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                  <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-blue-800">{plan.name}</h4>
-                      <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
-                    </div>
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+          {
+            (activeTab as string) === 'swapstation' && (
+              <div className="p-6 space-y-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-slate-800">Swap Station Plans</h3>
+                </div>
+
+                <div className="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-xl p-4">
+                  <div>
+                    <h4 className="font-semibold text-blue-800">Swap Station Plans ({settings.plans.swapStation.length})</h4>
+                    <p className="text-sm text-blue-600">Manage swap station plans for operators</p>
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
+                  <button onClick={() => { setAddSwapStationPlan(true); setNewSwapName(''); }} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                    <Plus className="w-4 h-4" /> New Plan
+                  </button>
+                </div>
+
+                {addSwapStationPlan && (
+                  <div className="bg-white rounded-xl border border-blue-300 overflow-hidden">
+                    <div className="bg-blue-100 px-4 py-3 border-b border-blue-200 flex items-center justify-between">
                       <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <h4 className="font-semibold text-blue-800">New Swap Station Plan</h4>
+                        <p className="text-sm text-blue-600 mt-1">Fill in the details below</p>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Battery Count</label>
-                        <input type="number" value={plan.batteryCount} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].batteryCount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Swap Price (৳)</label>
-                        <input type="number" value={plan.swapPrice} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].swapPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                        <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
-                        <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Batteries</label>
-                        <input type="number" value={plan.minBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].minBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Batteries</label>
-                        <input type="number" value={plan.maxBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].maxBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Profit Share (%)</label>
-                        <input type="number" value={plan.profitSharePercent} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].profitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                    </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <div className="mt-4 flex justify-end">
-                      <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                        <Save className="w-4 h-4" /> Save Changes
+                      <button onClick={() => setAddSwapStationPlan(false)} className="text-blue-600 hover:text-blue-800">
+                        <X className="w-5 h-5" />
                       </button>
                     </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {(activeTab as string) === 'riderrequest' && (
-            <div className="p-6 space-y-6">
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
-              </div>
-
-              <div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
-                <div>
-                  <h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
-                  <p className="text-sm text-rose-600">Manage rider request plans for operators</p>
-                </div>
-                <button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                  <Plus className="w-4 h-4" /> New Plan
-                </button>
-              </div>
-
-              {addRiderPlan && (
-                <div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
-                  <div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
-                      <p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={newSwapName} onChange={(e) => setNewSwapName(e.target.value)} placeholder="e.g., Standard Station" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={newSwapStatus} onChange={(e) => setNewSwapStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Battery Count</label>
+                          <input type="number" value={newSwapBatteryCount} onChange={(e) => setNewSwapBatteryCount(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Swap Price (৳)</label>
+                          <input type="number" value={newSwapPrice} onChange={(e) => setNewSwapPrice(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                          <input type="number" value={newSwapMonthly} onChange={(e) => setNewSwapMonthly(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                          <input type="number" value={newSwapDaily} onChange={(e) => setNewSwapDaily(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Batteries</label>
+                          <input type="number" value={newSwapMin} onChange={(e) => setNewSwapMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Batteries</label>
+                          <input type="number" value={newSwapMax} onChange={(e) => setNewSwapMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Profit Share (%)</label>
+                          <input type="number" value={newSwapProfit} onChange={(e) => setNewSwapProfit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                      </div>
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={newSwapDesc} onChange={(e) => setNewSwapDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                      </div>
+                      <button onClick={createSwapStationPlan} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                     </div>
-                    <button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-800">
-                      <X className="w-5 h-5" />
-                    </button>
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
+                )}
+
+                <div className="flex gap-2 border-b border-slate-200">
+                  {settings.plans.swapStation.map((plan, idx) => (
+                    <button key={idx} onClick={() => setActiveSwapTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeSwapTab === idx ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
+                  ))}
+                </div>
+
+                {settings.plans.swapStation.length > 0 && settings.plans.swapStation.map((plan, idx) => idx === activeSwapTab && (
+                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                    <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
                       <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider Plan" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <h4 className="font-semibold text-blue-800">{plan.name}</h4>
+                        <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Tier</label>
-                        <select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="Premium">Premium</option>
-                          <option value="Standard">Standard</option>
-                          <option value="Economy">Economy</option>
-                        </select>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+                    </div>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Battery Count</label>
+                          <input type="number" value={plan.batteryCount} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].batteryCount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Swap Price (৳)</label>
+                          <input type="number" value={plan.swapPrice} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].swapPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                          <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                          <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Batteries</label>
+                          <input type="number" value={plan.minBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].minBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Batteries</label>
+                          <input type="number" value={plan.maxBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].maxBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Profit Share (%)</label>
+                          <input type="number" value={plan.profitSharePercent} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].profitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={newRiderStatus} onChange={(e) => setNewRiderStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Riders</label>
-                        <input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Riders</label>
-                        <input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                        <input type="number" value={newRiderMonthly} onChange={(e) => setNewRiderMonthly(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
-                        <input type="number" value={newRiderDaily} onChange={(e) => setNewRiderDaily(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Deposit (৳)</label>
-                        <input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Commission (%)</label>
-                        <input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Ride Target</label>
-                        <input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Weekly Holiday</label>
-                        <input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      <div className="mt-4 flex justify-end">
+                        <button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                          <Save className="w-4 h-4" /> Save Changes
+                        </button>
                       </div>
                     </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={newRiderDesc} onChange={(e) => setNewRiderDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <button onClick={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
                   </div>
-                </div>
-              )}
-
-              <div className="flex gap-2 border-b border-slate-200">
-                {settings.plans.riderRequest.map((plan, idx) => (
-                  <button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
                 ))}
               </div>
+            )
+          }
 
-              {settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
-                <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-                  <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
-                    <div>
-                      <h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
-                      <p className="text-sm text-rose-600 mt-1">{plan.description}</p>
-                    </div>
-                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+          {
+            (activeTab as string) === 'riderrequest' && (
+              <div className="p-6 space-y-6">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
+                </div>
+
+                <div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
+                  <div>
+                    <h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
+                    <p className="text-sm text-rose-600">Manage rider request plans for operators</p>
                   </div>
-                  <div className="p-4">
-                    <div className="grid lg:grid-cols-3 gap-4">
+                  <button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                    <Plus className="w-4 h-4" /> New Plan
+                  </button>
+                </div>
+
+                {addRiderPlan && (
+                  <div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
+                    <div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
                       <div>
-                        <label className="text-sm text-slate-600">Plan Name</label>
-                        <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        <h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
+                        <p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
                       </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Tier</label>
-                        <select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="Premium">Premium</option>
-                          <option value="Standard">Standard</option>
-                          <option value="Economy">Economy</option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Status</label>
-                        <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
-                          <option value="active">Active</option>
-                          <option value="paused">Paused</option>
-                          <option value="closed">Closed</option>
-                        </select>
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Min Riders</label>
-                        <input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Max Riders</label>
-                        <input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
-                        <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
-                        <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Deposit (৳)</label>
-                        <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Commission (%)</label>
-                        <input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Daily Ride Target</label>
-                        <input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                      <div>
-                        <label className="text-sm text-slate-600">Weekly Holiday</label>
-                        <input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-                      </div>
-                    </div>
-                    <div className="mt-4">
-                      <label className="text-sm text-slate-600">Description</label>
-                      <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
-                    </div>
-                    <div className="mt-4 flex justify-end">
-                      <button onClick={handleSave} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                        <Save className="w-4 h-4" /> Save Changes
+                      <button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-800">
+                        <X className="w-5 h-5" />
                       </button>
                     </div>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider Plan" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Tier</label>
+                          <select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="Premium">Premium</option>
+                            <option value="Standard">Standard</option>
+                            <option value="Economy">Economy</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={newRiderStatus} onChange={(e) => setNewRiderStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Riders</label>
+                          <input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Riders</label>
+                          <input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                          <input type="number" value={newRiderMonthly} onChange={(e) => setNewRiderMonthly(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                          <input type="number" value={newRiderDaily} onChange={(e) => setNewRiderDaily(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Deposit (৳)</label>
+                          <input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Commission (%)</label>
+                          <input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Ride Target</label>
+                          <input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Weekly Holiday</label>
+                          <input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                      </div>
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={newRiderDesc} onChange={(e) => setNewRiderDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                      </div>
+                      <button onClick={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
+                    </div>
                   </div>
+                )}
+
+                <div className="flex gap-2 border-b border-slate-200">
+                  {settings.plans.riderRequest.map((plan, idx) => (
+                    <button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
+
+                {settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
+                  <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                    <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
+                      <div>
+                        <h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
+                        <p className="text-sm text-rose-600 mt-1">{plan.description}</p>
+                      </div>
+                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+                    </div>
+                    <div className="p-4">
+                      <div className="grid lg:grid-cols-3 gap-4">
+                        <div>
+                          <label className="text-sm text-slate-600">Plan Name</label>
+                          <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Tier</label>
+                          <select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="Premium">Premium</option>
+                            <option value="Standard">Standard</option>
+                            <option value="Economy">Economy</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Status</label>
+                          <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                            <option value="active">Active</option>
+                            <option value="paused">Paused</option>
+                            <option value="closed">Closed</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Min Riders</label>
+                          <input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Max Riders</label>
+                          <input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                          <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                          <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Deposit (৳)</label>
+                          <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Commission (%)</label>
+                          <input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Daily Ride Target</label>
+                          <input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                        <div>
+                          <label className="text-sm text-slate-600">Weekly Holiday</label>
+                          <input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                        </div>
+                      </div>
+                      <div className="mt-4">
+                        <label className="text-sm text-slate-600">Description</label>
+                        <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                      </div>
+                      <div className="mt-4 flex justify-end">
+                        <button onClick={handleSave} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                          <Save className="w-4 h-4" /> Save Changes
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )
+          }
+        </div >
+      </div >
 
 
-    </div>
+    </div >
   );
 }
\ No newline at end of file