From 00cc8cf4830132a7bb5906c918f2054d627861d5 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Tue, 5 May 2026 03:19:10 +0600
Subject: [PATCH] feat: introduce tabbed navigation for plan settings in admin
 panel

---
 src/app/admin/settings/page.tsx | 374 ++++++++++++++++----------------
 1 file changed, 191 insertions(+), 183 deletions(-)

diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 854bc06..d072d7d 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -371,6 +371,7 @@ export default function CompanySettingsPage() {
   const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental' | 'plans'>('general');
   const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
   const [saved, setSaved] = useState(false);
+  const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
   const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
   const [newDocName, setNewDocName] = useState('');
   const [newDocDesc, setNewDocDesc] = useState('');
@@ -1469,196 +1470,203 @@ 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>
-                <button onClick={handleSave} className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium flex items-center gap-2">
-                  <Save className="w-4 h-4" /> Save Changes
-                </button>
-              </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>
+            <button onClick={handleSave} className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium flex items-center gap-2">
+              <Save className="w-4 h-4" /> Save Changes
+            </button>
+          </div>
 
-              <div className="space-y-8">
-                {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">
-                      <h4 className="font-semibold text-blue-800">1. SINGLE RENT - ৳{plan.dailyRent}/day</h4>
+          <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">
+                    <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>
+                  <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={plan.jaibenKeepPercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].jaibenKeepPercent = 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>
-                    <div className="p-4">
-                      <div className="grid lg:grid-cols-2 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">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">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">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={plan.jaibenKeepPercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].jaibenKeepPercent = 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>
-                      <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 className="mt-4">
-                        <label className="text-sm text-slate-600">Features</label>
-                        <div className="space-y-2 mt-1">
-                          {plan.features.map((feature, fidx) => (
-                            <div key={fidx} className="flex items-center gap-2">
-                              <span className="text-sm text-slate-700">• {feature}</span>
-                            </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 + plan.jaibenKeepPercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + plan.jaibenKeepPercent}%</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>
-                ))}
-
-                {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">
-                      <h4 className="font-semibold text-purple-800">2. RENT TO OWN - ৳{plan.dailyRent}/day</h4>
-                    </div>
-                    <div className="p-4">
-                      <div className="grid lg:grid-cols-2 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">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">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">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>
-                      <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 className="mt-4">
-                        <label className="text-sm text-slate-600">Features</label>
-                        <div className="space-y-2 mt-1">
-                          {plan.features.map((feature, fidx) => (
-                            <div key={fidx} className="flex items-center gap-2">
-                              <span className="text-sm text-slate-700">• {feature}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-
-                {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">
-                      <h4 className="font-semibold text-green-800">3. SHARE AN EV - ৳{plan.dailyRentEach}/day each</h4>
-                    </div>
-                    <div className="p-4">
-                      <div className="grid lg:grid-cols-2 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">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">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">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>
-                      <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 className="mt-4">
-                        <label className="text-sm text-slate-600">Features</label>
-                        <div className="space-y-2 mt-1">
-                          {plan.features.map((feature, fidx) => (
-                            <div key={fidx} className="flex items-center gap-2">
-                              <span className="text-sm text-slate-700">• {feature}</span>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </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">
+                    <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>
+                  <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>
+                    <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 Rent + Profit Share =</span>
+                        <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{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">
+                    <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>
+                  <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>
+                    <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 ? 'text-green-600' : 'text-red-600'}`}>{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>