From d7db85595ca8e1a2766be02dd3fae942a9e75b90 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Sun, 10 May 2026 00:23:50 +0600
Subject: [PATCH] feat: add penalty tier fields to rental plans and update
 settings configuration UI

---
 src/app/admin/settings/page.tsx | 393 ++++++++++++++++++++++++++------
 1 file changed, 329 insertions(+), 64 deletions(-)

diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 03cc53d..78231ca 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -97,9 +97,18 @@ interface CompanySettings {
       name: string;
       contractMonths: number[];
       dailyRent: number;
+      dailyRentPenalty1: number;
+      dailyRentPenalty2: number;
+      dailyRentPenalty3: number;
       deposit: number;
       weeklySubscription: number;
+      weeklyPenalty1: number;
+      weeklyPenalty2: number;
+      weeklyPenalty3: number;
       monthlySubscription: number;
+      monthlyPenalty1: number;
+      monthlyPenalty2: number;
+      monthlyPenalty3: number;
       ficoSharePercent: number;
       description: string;
     }[];
@@ -108,9 +117,18 @@ interface CompanySettings {
       name: string;
       contractMonths: number[];
       dailyRent: number;
+      dailyRentPenalty1: number;
+      dailyRentPenalty2: number;
+      dailyRentPenalty3: number;
       deposit: number;
       weeklySubscription: number;
+      weeklyPenalty1: number;
+      weeklyPenalty2: number;
+      weeklyPenalty3: number;
       monthlySubscription: number;
+      monthlyPenalty1: number;
+      monthlyPenalty2: number;
+      monthlyPenalty3: number;
       durationMonths: number;
       evPrice: number;
       totalPayment: number;
@@ -124,12 +142,24 @@ interface CompanySettings {
       name: string;
       contractMonths: number[];
       dailyRentEach: number;
+      dailyRentPenalty1: number;
+      dailyRentPenalty2: number;
+      dailyRentPenalty3: number;
       totalDailyRent: number;
       depositEach: number;
+      depositPenalty1: number;
+      depositPenalty2: number;
+      depositPenalty3: number;
       totalDeposit: number;
       weeklySubscriptionEach: number;
+      weeklyPenalty1: number;
+      weeklyPenalty2: number;
+      weeklyPenalty3: number;
       totalWeeklySubscription: number;
       monthlySubscriptionEach: number;
+      monthlyPenalty1: number;
+      monthlyPenalty2: number;
+      monthlyPenalty3: number;
       totalMonthlySubscription: number;
       ficoSharePercent: number;
       description: string;
@@ -419,9 +449,18 @@ const initialSettings: CompanySettings = {
         name: 'Single Rent - Premium',
         contractMonths: [1, 3, 6, 12],
         dailyRent: 400,
+        dailyRentPenalty1: 500,
+        dailyRentPenalty2: 1000,
+        dailyRentPenalty3: 5000,
         deposit: 25000,
         weeklySubscription: 2800,
+        weeklyPenalty1: 3500,
+        weeklyPenalty2: 7000,
+        weeklyPenalty3: 15000,
         monthlySubscription: 12000,
+        monthlyPenalty1: 15000,
+        monthlyPenalty2: 30000,
+        monthlyPenalty3: 50000,
         ficoSharePercent: 50,
         description: 'Premium single person rental plan with extra benefits',
       },
@@ -430,9 +469,18 @@ const initialSettings: CompanySettings = {
         name: 'Single Rent - Standard',
         contractMonths: [1, 3, 6, 12],
         dailyRent: 300,
+        dailyRentPenalty1: 400,
+        dailyRentPenalty2: 800,
+        dailyRentPenalty3: 4000,
         deposit: 20000,
         weeklySubscription: 2100,
+        weeklyPenalty1: 2600,
+        weeklyPenalty2: 5200,
+        weeklyPenalty3: 12000,
         monthlySubscription: 9000,
+        monthlyPenalty1: 11000,
+        monthlyPenalty2: 22000,
+        monthlyPenalty3: 40000,
         ficoSharePercent: 45,
         description: 'Standard single person rental plan',
       },
@@ -441,9 +489,18 @@ const initialSettings: CompanySettings = {
         name: 'Single Rent - Economy',
         contractMonths: [1, 3, 6, 12],
         dailyRent: 250,
+        dailyRentPenalty1: 300,
+        dailyRentPenalty2: 600,
+        dailyRentPenalty3: 3000,
         deposit: 15000,
         weeklySubscription: 1750,
+        weeklyPenalty1: 2200,
+        weeklyPenalty2: 4000,
+        weeklyPenalty3: 8000,
         monthlySubscription: 7500,
+        monthlyPenalty1: 9000,
+        monthlyPenalty2: 18000,
+        monthlyPenalty3: 30000,
         ficoSharePercent: 40,
         description: 'Economy single person rental plan',
       }
@@ -454,9 +511,18 @@ const initialSettings: CompanySettings = {
         name: 'Rent to Own - Premium',
         contractMonths: [12, 18, 24, 36],
         dailyRent: 350,
+        dailyRentPenalty1: 450,
+        dailyRentPenalty2: 900,
+        dailyRentPenalty3: 4500,
         deposit: 25000,
         weeklySubscription: 2450,
+        weeklyPenalty1: 3000,
+        weeklyPenalty2: 6000,
+        weeklyPenalty3: 15000,
         monthlySubscription: 10500,
+        monthlyPenalty1: 13000,
+        monthlyPenalty2: 26000,
+        monthlyPenalty3: 45000,
         durationMonths: 18,
         evPrice: 150000,
         totalPayment: 170000,
@@ -470,9 +536,18 @@ const initialSettings: CompanySettings = {
         name: 'Rent to Own - Standard',
         contractMonths: [12, 18, 24, 36],
         dailyRent: 250,
+        dailyRentPenalty1: 350,
+        dailyRentPenalty2: 700,
+        dailyRentPenalty3: 3500,
         deposit: 18000,
         weeklySubscription: 1750,
+        weeklyPenalty1: 2200,
+        weeklyPenalty2: 4400,
+        weeklyPenalty3: 10000,
         monthlySubscription: 7000,
+        monthlyPenalty1: 9000,
+        monthlyPenalty2: 18000,
+        monthlyPenalty3: 30000,
         durationMonths: 18,
         evPrice: 120000,
         totalPayment: 135000,
@@ -486,9 +561,18 @@ const initialSettings: CompanySettings = {
         name: 'Rent to Own - Economy',
         contractMonths: [12, 18, 24, 36],
         dailyRent: 200,
+        dailyRentPenalty1: 250,
+        dailyRentPenalty2: 500,
+        dailyRentPenalty3: 2500,
         deposit: 15000,
         weeklySubscription: 1400,
+        weeklyPenalty1: 1800,
+        weeklyPenalty2: 3500,
+        weeklyPenalty3: 8000,
         monthlySubscription: 6000,
+        monthlyPenalty1: 7500,
+        monthlyPenalty2: 15000,
+        monthlyPenalty3: 25000,
         durationMonths: 18,
         evPrice: 100000,
         totalPayment: 115000,
@@ -504,12 +588,24 @@ const initialSettings: CompanySettings = {
         name: 'Share an EV - Premium',
         contractMonths: [1, 3, 6, 12],
         dailyRentEach: 300,
+        dailyRentPenalty1: 400,
+        dailyRentPenalty2: 800,
+        dailyRentPenalty3: 4000,
         totalDailyRent: 600,
         depositEach: 20000,
+        depositPenalty1: 25000,
+        depositPenalty2: 35000,
+        depositPenalty3: 50000,
         totalDeposit: 40000,
         weeklySubscriptionEach: 2100,
+        weeklyPenalty1: 2600,
+        weeklyPenalty2: 5200,
+        weeklyPenalty3: 12000,
         totalWeeklySubscription: 4200,
         monthlySubscriptionEach: 8400,
+        monthlyPenalty1: 10500,
+        monthlyPenalty2: 21000,
+        monthlyPenalty3: 35000,
         totalMonthlySubscription: 16800,
         ficoSharePercent: 50,
         description: 'Premium shared EV with premium bikes',
@@ -519,12 +615,24 @@ const initialSettings: CompanySettings = {
         name: 'Share an EV - Standard',
         contractMonths: [1, 3, 6, 12],
         dailyRentEach: 200,
+        dailyRentPenalty1: 250,
+        dailyRentPenalty2: 500,
+        dailyRentPenalty3: 2500,
         totalDailyRent: 400,
         depositEach: 15000,
+        depositPenalty1: 18000,
+        depositPenalty2: 25000,
+        depositPenalty3: 40000,
         totalDeposit: 30000,
         weeklySubscriptionEach: 1400,
+        weeklyPenalty1: 1800,
+        weeklyPenalty2: 3500,
+        weeklyPenalty3: 8000,
         totalWeeklySubscription: 2800,
         monthlySubscriptionEach: 5600,
+        monthlyPenalty1: 7000,
+        monthlyPenalty2: 14000,
+        monthlyPenalty3: 25000,
         totalMonthlySubscription: 11200,
         ficoSharePercent: 45,
         description: 'Standard shared EV plan',
@@ -534,12 +642,24 @@ const initialSettings: CompanySettings = {
         name: 'Share an EV - Economy',
         contractMonths: [1, 3, 6, 12],
         dailyRentEach: 150,
+        dailyRentPenalty1: 200,
+        dailyRentPenalty2: 400,
+        dailyRentPenalty3: 2000,
         totalDailyRent: 300,
         depositEach: 12000,
+        depositPenalty1: 15000,
+        depositPenalty2: 20000,
+        depositPenalty3: 30000,
         totalDeposit: 24000,
         weeklySubscriptionEach: 1050,
+        weeklyPenalty1: 1300,
+        weeklyPenalty2: 2600,
+        weeklyPenalty3: 6000,
         totalWeeklySubscription: 2100,
         monthlySubscriptionEach: 4200,
+        monthlyPenalty1: 5500,
+        monthlyPenalty2: 11000,
+        monthlyPenalty3: 20000,
         totalMonthlySubscription: 8400,
         ficoSharePercent: 40,
         description: 'Economy shared EV plan',
@@ -2238,24 +2358,72 @@ export default function CompanySettingsPage() {
                         </button>
                       </div>
                       <div className="p-4 space-y-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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Daily Rent</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Weekly Subscription</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Monthly Subscription</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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>
+                        <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 className="bg-slate-50 rounded-lg p-3">
                           <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
@@ -2337,24 +2505,72 @@ export default function CompanySettingsPage() {
                         </button>
                       </div>
                       <div className="p-4 space-y-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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Daily Rent</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Weekly Subscription</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Monthly Subscription</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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>
+                        <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 className="bg-slate-50 rounded-lg p-3">
                           <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
@@ -2417,6 +2633,7 @@ export default function CompanySettingsPage() {
                           <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>
@@ -2436,42 +2653,90 @@ export default function CompanySettingsPage() {
                         </button>
                       </div>
                       <div className="p-4 space-y-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 className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Daily Rent (Each)</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                          </div>
+                        </div>
+                        <div className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Weekly Subscription (Each)</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                          </div>
+                        </div>
+                        <div className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Monthly Subscription (Each)</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                          </div>
+                        </div>
+                        <div className="bg-slate-50 rounded-xl p-4 space-y-3">
+                          <label className="text-sm font-semibold text-slate-700">Deposit (Each)</label>
+                          <div className="grid grid-cols-4 gap-3">
+                            <div>
+                              <label className="text-xs text-slate-500">Base (৳)</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-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">1st Day (৳)</label>
+                              <input type="number" value={plan.depositPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">2nd Day (৳)</label>
+                              <input type="number" value={plan.depositPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
+                            <div>
+                              <label className="text-xs text-slate-500">3rd Day + Bike Lock (৳)</label>
+                              <input type="number" value={plan.depositPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
+                            </div>
                           </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>
-
                         <div className="bg-slate-50 rounded-lg p-3">
                           <label className="text-sm font-semibold text-slate-700 block mb-2">Contract Duration (Months)</label>
                           <div className="flex flex-wrap gap-2">