feat: integrate granular save actions per plan and auto-calculate JAIBEN share percentages in settings page

src/app/admin/settings/page.tsx

@@ -1474,9 +1474,6 @@ export default function CompanySettingsPage() {
         <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="flex gap-2 border-b border-slate-200">
@@ -1489,10 +1486,15 @@ export default function CompanySettingsPage() {
             <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">
+                  <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>
@@ -1517,13 +1519,13 @@ export default function CompanySettingsPage() {
                       </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" />
+                        <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 + plan.jaibenKeepPercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + plan.jaibenKeepPercent}%</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">
@@ -1540,10 +1542,15 @@ export default function CompanySettingsPage() {
             <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">
+                  <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>
@@ -1586,11 +1593,15 @@ export default function CompanySettingsPage() {
                         <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 Rent + Profit Share =</span>
-                        <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent}%</span>
+                        <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">
@@ -1607,10 +1618,15 @@ export default function CompanySettingsPage() {
             <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">
+                  <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>
@@ -1649,11 +1665,15 @@ export default function CompanySettingsPage() {
                         <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 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent}%</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">