From da0df6db3e3306c51196daf21358ad9e1455385d Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Tue, 5 May 2026 04:20:17 +0600
Subject: [PATCH] refactor: implement plan tiering and expand rental options
 across all service categories

---
 src/app/admin/settings/page.tsx | 535 ++++++++++++++++++--------------
 1 file changed, 310 insertions(+), 225 deletions(-)

diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index c65ef5e..813827f 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -82,17 +82,17 @@ interface CompanySettings {
   };
   plans: {
     singleRent: {
+      tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
       dailyRent: number;
       deposit: number;
       weeklySubscription: number;
       monthlySubscription: number;
       ficoSharePercent: number;
-      jaibenKeepPercent: number;
       description: string;
-      features: string[];
     }[];
     rentToOwn: {
+      tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
       dailyRent: number;
       deposit: number;
@@ -105,9 +105,9 @@ interface CompanySettings {
       ficoRentSharePercent: number;
       ficoProfitSharePercent: number;
       description: string;
-      features: string[];
     }[];
     shareEv: {
+      tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
       dailyRentEach: number;
       totalDailyRent: number;
@@ -119,7 +119,6 @@ interface CompanySettings {
       totalMonthlySubscription: number;
       ficoSharePercent: number;
       description: string;
-      features: string[];
     }[];
   };
 }
@@ -319,20 +318,55 @@ const initialSettings: CompanySettings = {
   plans: {
     singleRent: [
       {
-        name: 'Single Rent',
+        tier: 'Premium',
+        name: 'Single Rent - Premium',
+        dailyRent: 400,
+        deposit: 25000,
+        weeklySubscription: 2800,
+        monthlySubscription: 12000,
+        ficoSharePercent: 50,
+        description: 'Premium single person rental plan with extra benefits',
+      },
+      {
+        tier: 'Standard',
+        name: 'Single Rent - Standard',
         dailyRent: 300,
         deposit: 20000,
         weeklySubscription: 2100,
         monthlySubscription: 9000,
         ficoSharePercent: 45,
-        jaibenKeepPercent: 55,
-        description: 'Single person rental plan with deposit and weekly/monthly subscription',
-        features: ['Deposit Money > 20,000TK', '1st Day Rent Advance', 'Weekly Subscription > 2,100TK', 'Monthly Subscription > 9,000TK', 'Auto Deduct from Wallet Balance', 'FICO gets 45% > 135TK', 'JAIBEN keeps 55% > 165TK']
+        description: 'Standard single person rental plan',
+      },
+      {
+        tier: 'Economy',
+        name: 'Single Rent - Economy',
+        dailyRent: 250,
+        deposit: 15000,
+        weeklySubscription: 1750,
+        monthlySubscription: 7500,
+        ficoSharePercent: 40,
+        description: 'Economy single person rental plan',
       }
     ],
     rentToOwn: [
       {
-        name: 'Rent to Own',
+        tier: 'Premium',
+        name: 'Rent to Own - Premium',
+        dailyRent: 350,
+        deposit: 25000,
+        weeklySubscription: 2450,
+        monthlySubscription: 10500,
+        durationMonths: 18,
+        evPrice: 150000,
+        totalPayment: 170000,
+        profit: 20000,
+        ficoRentSharePercent: 50,
+        ficoProfitSharePercent: 45,
+        description: 'Premium rent to own plan with high-end EV',
+      },
+      {
+        tier: 'Standard',
+        name: 'Rent to Own - Standard',
         dailyRent: 250,
         deposit: 18000,
         weeklySubscription: 1750,
@@ -343,13 +377,42 @@ const initialSettings: CompanySettings = {
         profit: 15000,
         ficoRentSharePercent: 45,
         ficoProfitSharePercent: 45,
-        description: 'Rent to own plan - get ownership after 18 months',
-        features: ['Daily Rent = 250TK', 'Deposit Money > 18,000TK', 'Weekly Subscription > 1,750TK or 1,875TK', 'Monthly Subscription > 7,000TK or 7,500TK', 'Duration > 18 Months', 'In 18 months Total Pay > 1,35,000TK (EV Price 1,20,000TK)', 'Profit > 15,000TK', 'FICO gets 45% of the rent > 112 TK and Profit Share 45% > 6,750TK', 'Rider gets a brand new EV after 18 months']
+        description: 'Standard rent to own plan',
+      },
+      {
+        tier: 'Economy',
+        name: 'Rent to Own - Economy',
+        dailyRent: 200,
+        deposit: 15000,
+        weeklySubscription: 1400,
+        monthlySubscription: 6000,
+        durationMonths: 18,
+        evPrice: 100000,
+        totalPayment: 115000,
+        profit: 15000,
+        ficoRentSharePercent: 40,
+        ficoProfitSharePercent: 40,
+        description: 'Economy rent to own plan',
       }
     ],
     shareEv: [
       {
-        name: 'Share an EV',
+        tier: 'Premium',
+        name: 'Share an EV - Premium',
+        dailyRentEach: 300,
+        totalDailyRent: 600,
+        depositEach: 20000,
+        totalDeposit: 40000,
+        weeklySubscriptionEach: 2100,
+        totalWeeklySubscription: 4200,
+        monthlySubscriptionEach: 8400,
+        totalMonthlySubscription: 16800,
+        ficoSharePercent: 50,
+        description: 'Premium shared EV with premium bikes',
+      },
+      {
+        tier: 'Standard',
+        name: 'Share an EV - Standard',
         dailyRentEach: 200,
         totalDailyRent: 400,
         depositEach: 15000,
@@ -359,11 +422,24 @@ const initialSettings: CompanySettings = {
         monthlySubscriptionEach: 5600,
         totalMonthlySubscription: 11200,
         ficoSharePercent: 45,
-        description: 'Share EV between 2 riders - split earnings',
-        features: ['Daily Rent = 200TK each (Total = 400TK)', 'Deposit Money > 15,000TK each (Total = 30,000TK)', 'Weekly Subscription > 1,400TK or 1,500TK each (Total = 2,800TK or 3,000TK)', 'Monthly Subscription > 5,600TK or 6,000TK each (Total = 11,200TK or 12,000TK)', 'FICO gets 45% of daily rent 90+90 > 180TK from two riders one EV', 'No ownership']
+        description: 'Standard shared EV plan',
+      },
+      {
+        tier: 'Economy',
+        name: 'Share an EV - Economy',
+        dailyRentEach: 150,
+        totalDailyRent: 300,
+        depositEach: 12000,
+        totalDeposit: 24000,
+        weeklySubscriptionEach: 1050,
+        totalWeeklySubscription: 2100,
+        monthlySubscriptionEach: 4200,
+        totalMonthlySubscription: 8400,
+        ficoSharePercent: 40,
+        description: 'Economy shared EV plan',
       }
-    ]
-  }
+    ],
+  },
 };
 
 export default function CompanySettingsPage() {
@@ -1470,223 +1546,232 @@ export default function CompanySettingsPage() {
               </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>
+          {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>
+              <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>
-                      <h4 className="font-semibold text-blue-800">SINGLE RENT - ৳{plan.dailyRent}/day</h4>
-                      <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
-                    </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" />
+              {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>
-                        <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 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 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>
-              ))}
+              )}
+
+              {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>
           )}
-
-          {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>
-                      <h4 className="font-semibold text-purple-800">RENT TO OWN - ৳{plan.dailyRent}/day</h4>
-                      <p className="text-sm text-purple-600 mt-1">{plan.description}</p>
-                    </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>
-                      <h4 className="font-semibold text-green-800">SHARE AN EV - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
-                      <p className="text-sm text-green-600 mt-1">{plan.description}</p>
-                    </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>
-      )}
         </div>
       </div>