feat: introduce tabbed navigation for plan settings in admin panel

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,7 +1470,7 @@ export default function CompanySettingsPage() {
               </div>
             </div>
           )}
-          {activeTab === 'plans' && (
+{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>
@@ -1478,22 +1479,26 @@ export default function CompanySettingsPage() {
             </button>
           </div>
 
-              <div className="space-y-8">
+          <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">1. SINGLE RENT - ৳{plan.dailyRent}/day</h4>
+                    <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-2 gap-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">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" />
@@ -1502,6 +1507,10 @@ export default function CompanySettingsPage() {
                         <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" />
@@ -1511,39 +1520,36 @@ export default function CompanySettingsPage() {
                         <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 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 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>
+          )}
 
+          {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">2. RENT TO OWN - ৳{plan.dailyRent}/day</h4>
+                    <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-2 gap-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">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" />
@@ -1552,6 +1558,10 @@ export default function CompanySettingsPage() {
                         <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" />
@@ -1577,31 +1587,32 @@ export default function CompanySettingsPage() {
                         <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 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>
+          )}
 
+          {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">3. SHARE AN EV - ৳{plan.dailyRentEach}/day each</h4>
+                    <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-2 gap-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" />
@@ -1610,14 +1621,6 @@ export default function CompanySettingsPage() {
                         <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" />
@@ -1634,29 +1637,34 @@ export default function CompanySettingsPage() {
                         <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 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>