refactor: restructure company policy schema to use arrays of objects and update rental type categorization logic

src/app/admin/settings/page.tsx

@@ -73,10 +73,14 @@ interface CompanySettings {
   parts: { id: string; name: string; price?: number; minPrice?: number; maxPrice?: number; inStock: number }[];
   serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
   companyPolicy: {
-    investor: { title: string; description: string; rules: { name: string; description: string }[] };
+    investor: { title: string; description: string }[];
-    merchant: { title: string; description: string; rules: { name: string; description: string }[] };
+    merchant: { title: string; description: string }[];
-    swapStation: { title: string; description: string; rules: { name: string; description: string }[] };
+    swapStation: { title: string; description: string }[];
-    rentalTypes: { type: string; name: string; title: string; description: string; rules: { name: string; description: string }[]; enabled: boolean }[];
+    rentalTypes: {
+      single: { title: string; description: string }[];
+      shared: { title: string; description: string }[];
+      renttoown: { title: string; description: string }[];
+    };
   };
   rentalPolicy: {
     minAge: number;
@@ -645,7 +649,8 @@ const initialSettings: CompanySettings = {
 export default function CompanySettingsPage() {
   const [settings, setSettings] = useState<CompanySettings>(initialSettings);
   const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'companyPolicy' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general');
-  const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | 'rentalType'>('investor');
+  const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rentalType'>('investor');
+  const [activeRentalTypeTab, setActiveRentalTypeTab] = useState<'single' | 'shared' | 'renttoown'>('single');
   const [saved, setSaved] = useState(false);
   const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
   const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
@@ -784,13 +789,13 @@ export default function CompanySettingsPage() {
 
   const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
     if (!newPolicyName.trim()) return;
-    const newRule = { name: newPolicyName, description: newPolicyDesc || '<p></p>' };
+    const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
     if (tab === 'investor') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: [...settings.companyPolicy.investor.rules, newRule] } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
     } else if (tab === 'merchant') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: [...settings.companyPolicy.merchant.rules, newRule] } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
     } else if (tab === 'swapstation') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: [...settings.companyPolicy.swapStation.rules, newRule] } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
     }
     setNewPolicyName('');
     setNewPolicyDesc('');
@@ -799,31 +804,31 @@ export default function CompanySettingsPage() {
 
   const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
     if (tab === 'investor') {
-      const newRules = settings.companyPolicy.investor.rules.filter((_, i) => i !== index);
+      const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
     } else if (tab === 'merchant') {
-      const newRules = settings.companyPolicy.merchant.rules.filter((_, i) => i !== index);
+      const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
     } else if (tab === 'swapstation') {
-      const newRules = settings.companyPolicy.swapStation.rules.filter((_, i) => i !== index);
+      const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
     }
   };
 
   const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
     const newDesc = editPolicyDescHtml || editPolicyDesc;
     if (tab === 'investor') {
-      const newRules = [...settings.companyPolicy.investor.rules];
+      const newRules = [...settings.companyPolicy.investor];
-      newRules[index] = { name: editPolicyName, description: newDesc };
+      newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
     } else if (tab === 'merchant') {
-      const newRules = [...settings.companyPolicy.merchant.rules];
+      const newRules = [...settings.companyPolicy.merchant];
-      newRules[index] = { name: editPolicyName, description: newDesc };
+      newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
     } else if (tab === 'swapstation') {
-      const newRules = [...settings.companyPolicy.swapStation.rules];
+      const newRules = [...settings.companyPolicy.swapStation];
-      newRules[index] = { name: editPolicyName, description: newDesc };
+      newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } });
+      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
     }
     setEditingPolicy(null);
   };
@@ -1699,7 +1704,7 @@ export default function CompanySettingsPage() {
                 </div>
               )}
 
-              {activeMasterTab === 'rental' && (
+              {activeMasterTab === 'rentalType' && (
                 <div className="space-y-6">
                   {settings.masterData.rentalDocuments.map((rental, ri) => (
                     <div key={rental.type} className="border border-slate-200 rounded-lg p-4">
@@ -1854,7 +1859,6 @@ export default function CompanySettingsPage() {
 
               {activeMasterTab === 'investor' && (
                 <div className="space-y-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">
@@ -1862,14 +1866,20 @@ export default function CompanySettingsPage() {
                     </button>
                   </div>
                   <div className="space-y-2">
-                    {(settings.companyPolicy?.investor?.rules || []).map((policy, i) => (
+                    {(settings.companyPolicy?.investor || []).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" />
+                            <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 Title" />
                             <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={() => {
+                                const updated = [...settings.companyPolicy.investor];
+                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: 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>
@@ -1877,15 +1887,18 @@ export default function CompanySettingsPage() {
                           <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>
+                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                               </div>
-                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
+                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                             </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">
+                              <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.title); 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">
+                              <button onClick={() => {
+                                const updated = settings.companyPolicy.investor.filter((_, idx) => idx !== i);
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
+                              }} className="p-1 text-slate-400 hover:text-red-600">
                                 <Trash2 className="w-3.5 h-3.5" />
                               </button>
                             </div>
@@ -1896,21 +1909,25 @@ export default function CompanySettingsPage() {
                   </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" />
+                      <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 Title" />
                       <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={() => {
+                          if (!newPolicyName.trim()) return;
+                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, { title: newPolicyName, description: newPolicyDesc }] } });
+                          setNewPolicyName('');
+                          setNewPolicyDesc('');
+                          setShowAddPolicy(false);
+                        }} 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 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">
@@ -1918,14 +1935,20 @@ export default function CompanySettingsPage() {
                     </button>
                   </div>
                   <div className="space-y-2">
-                    {(settings.companyPolicy?.merchant?.rules || []).map((policy, i) => (
+                    {(settings.companyPolicy?.merchant || []).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" />
+                            <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 Title" />
                             <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={() => {
+                                const updated = [...settings.companyPolicy.merchant];
+                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: 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>
@@ -1933,15 +1956,18 @@ export default function CompanySettingsPage() {
                           <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>
+                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                               </div>
-                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
+                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                             </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">
+                              <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.title); 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">
+                              <button onClick={() => {
+                                const updated = settings.companyPolicy.merchant.filter((_, idx) => idx !== i);
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
+                              }} className="p-1 text-slate-400 hover:text-red-600">
                                 <Trash2 className="w-3.5 h-3.5" />
                               </button>
                             </div>
@@ -1952,21 +1978,25 @@ export default function CompanySettingsPage() {
                   </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" />
+                      <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 Title" />
                       <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={() => {
+                          if (!newPolicyName.trim()) return;
+                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, { title: newPolicyName, description: newPolicyDesc }] } });
+                          setNewPolicyName('');
+                          setNewPolicyDesc('');
+                          setShowAddPolicy(false);
+                        }} 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 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">
@@ -1974,14 +2004,20 @@ export default function CompanySettingsPage() {
                     </button>
                   </div>
                   <div className="space-y-2">
-                    {(settings.companyPolicy?.swapStation?.rules || []).map((policy, i) => (
+                    {(settings.companyPolicy?.swapStation || []).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" />
+                            <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 Title" />
                             <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={() => {
+                                const updated = [...settings.companyPolicy.swapStation];
+                                updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: 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>
@@ -1989,15 +2025,18 @@ export default function CompanySettingsPage() {
                           <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>
+                                <span className="text-sm font-medium text-slate-700">{policy.title}</span>
                               </div>
-                              <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
+                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
                             </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">
+                              <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.title); 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">
+                              <button onClick={() => {
+                                const updated = settings.companyPolicy.swapStation.filter((_, idx) => idx !== i);
+                                setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
+                              }} className="p-1 text-slate-400 hover:text-red-600">
                                 <Trash2 className="w-3.5 h-3.5" />
                               </button>
                             </div>
@@ -2008,336 +2047,331 @@ export default function CompanySettingsPage() {
                   </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" />
+                      <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 Title" />
                       <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={() => {
+                          if (!newPolicyName.trim()) return;
+                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, { title: newPolicyName, description: newPolicyDesc }] } });
+                          setNewPolicyName('');
+                          setNewPolicyDesc('');
+                          setShowAddPolicy(false);
+                        }} 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">
+                <div className="space-y-4">
-                  {(settings.companyPolicy?.rentalTypes || []).map((rtype, idx) => (
+                  <div className="flex gap-2 border-b border-slate-200">
-                    <div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
+                    <button onClick={() => setActiveRentalTypeTab('single')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'single' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (Single)</button>
-                      <div className="bg-slate-50 px-4 py-3">
+                    <button onClick={() => setActiveRentalTypeTab('shared')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'shared' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (2 Person Shared)</button>
-                        <h4 className="font-medium text-slate-700">{rtype.name}</h4>
+                    <button onClick={() => setActiveRentalTypeTab('renttoown')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'renttoown' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent-to-Own</button>
-                      </div>
+                  </div>
-                      <div className="p-4 space-y-4">
 
-                        <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center justify-between mb-2">
-                          <label className="text-sm text-slate-600 font-medium">Policy List</label>
+                    <label className="text-sm text-slate-600 font-medium">Policy List</label>
-                        </div>
+                    <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
-                        <div className="space-y-2">
+                      <Plus className="w-3 h-3" /> Add Policy
-                          {(rtype.rules || []).map((policy, policyIdx) => (
+                    </button>
-                            <div key={policyIdx} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
+                  </div>
-                              {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? (
+                  <div className="space-y-2">
-                                <div className="space-y-2">
+                    {(settings.companyPolicy?.rentalTypes[activeRentalTypeTab] || []).map((policy, i) => (
-                                  <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" />
+                      <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
-                                  <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
+                        {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === i ? (
-                                  <div className="flex gap-2">
+                          <div className="space-y-2">
-                                    <button onClick={() => {
+                            <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 Title" />
-                                      const updated = [...(settings.companyPolicy?.rentalTypes || [])];
+                            <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
-                                      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 || [])];
+                                const updated = { ...settings.companyPolicy.rentalTypes };
-                                updated[idx].rules = [...(updated[idx].rules || []), { name: newPolicyName, description: newPolicyDesc }];
+                                updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml };
                                 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>
+                                setEditPolicyDescHtml('');
-                              <button onClick={() => { setEditingPolicy(null); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                              }} 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.title}</span>
+                              </div>
+                              <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
+                            </div>
+                            <div className="flex items-center gap-1 ml-2">
+                              <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: i }); setEditPolicyName(policy.title); 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[activeRentalTypeTab] = updated[activeRentalTypeTab].filter((_, idx) => idx !== i);
+                                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>
+                    ))}
-
-                  ))}
-                  <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>
+                  {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 Title" />
+                      <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
+                      <div className="flex gap-2">
+                        <button onClick={() => {
+                          if (!newPolicyName.trim()) return;
+                          const updated = { ...settings.companyPolicy.rentalTypes };
+                          updated[activeRentalTypeTab] = [...updated[activeRentalTypeTab], { title: newPolicyName, description: newPolicyDesc }];
+                          setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
+                          setNewPolicyName('');
+                          setNewPolicyDesc('');
+                          setShowAddPolicy(false);
+                        }} 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>
+              )}
+            </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>
+                  ))}
+                </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>
+              )}
+
+              {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>
           )
           }
 
-          {
-            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>
-                    ))}
-                  </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>
-                )}
-
-                {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>
-            )
-          }
-
           {
             (activeTab as string) === 'investment' && (
               <div className="p-6 space-y-6">