feat: add contract duration management to plan settings and update UI controls

src/app/admin/settings/page.tsx

@@ -95,6 +95,7 @@ interface CompanySettings {
     singleRent: {
       tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
+      contractMonths: number[];
       dailyRent: number;
       deposit: number;
       weeklySubscription: number;
@@ -105,6 +106,7 @@ interface CompanySettings {
     rentToOwn: {
       tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
+      contractMonths: number[];
       dailyRent: number;
       deposit: number;
       weeklySubscription: number;
@@ -120,6 +122,7 @@ interface CompanySettings {
     shareEv: {
       tier: 'Economy' | 'Standard' | 'Premium';
       name: string;
+      contractMonths: number[];
       dailyRentEach: number;
       totalDailyRent: number;
       depositEach: number;
@@ -411,6 +414,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Premium',
         name: 'Single Rent - Premium',
+        contractMonths: [1, 3, 6, 12],
         dailyRent: 400,
         deposit: 25000,
         weeklySubscription: 2800,
@@ -421,6 +425,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Standard',
         name: 'Single Rent - Standard',
+        contractMonths: [1, 3, 6, 12],
         dailyRent: 300,
         deposit: 20000,
         weeklySubscription: 2100,
@@ -431,6 +436,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Economy',
         name: 'Single Rent - Economy',
+        contractMonths: [1, 3, 6, 12],
         dailyRent: 250,
         deposit: 15000,
         weeklySubscription: 1750,
@@ -443,6 +449,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Premium',
         name: 'Rent to Own - Premium',
+        contractMonths: [12, 18, 24, 36],
         dailyRent: 350,
         deposit: 25000,
         weeklySubscription: 2450,
@@ -458,6 +465,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Standard',
         name: 'Rent to Own - Standard',
+        contractMonths: [12, 18, 24, 36],
         dailyRent: 250,
         deposit: 18000,
         weeklySubscription: 1750,
@@ -473,6 +481,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Economy',
         name: 'Rent to Own - Economy',
+        contractMonths: [12, 18, 24, 36],
         dailyRent: 200,
         deposit: 15000,
         weeklySubscription: 1400,
@@ -490,6 +499,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Premium',
         name: 'Share an EV - Premium',
+        contractMonths: [1, 3, 6, 12],
         dailyRentEach: 300,
         totalDailyRent: 600,
         depositEach: 20000,
@@ -504,6 +514,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Standard',
         name: 'Share an EV - Standard',
+        contractMonths: [1, 3, 6, 12],
         dailyRentEach: 200,
         totalDailyRent: 400,
         depositEach: 15000,
@@ -518,6 +529,7 @@ const initialSettings: CompanySettings = {
       {
         tier: 'Economy',
         name: 'Share an EV - Economy',
+        contractMonths: [1, 3, 6, 12],
         dailyRentEach: 150,
         totalDailyRent: 300,
         depositEach: 12000,
@@ -2202,18 +2214,14 @@ export default function CompanySettingsPage() {
                   {settings.plans.singleRent.map((plan, idx) => (
                     <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                       <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
                         <div>
                           <h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
-                            <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
-                          </div>
                         </div>
                         <button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                           <Save className="w-3 h-3" /> Save
                         </button>
                       </div>
-                      <div className="p-4">
+                      <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>
@@ -2240,13 +2248,69 @@ export default function CompanySettingsPage() {
                             <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="p-3 bg-slate-50 rounded-lg">
                           <div className="flex items-center justify-between text-sm">
                             <span className="text-slate-600">FICO + JAIBEN =</span>
                             <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
                           </div>
                         </div>
-                        <div className="mt-4">
+                        <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">
+                            {plan.contractMonths.map(month => (
+                              <button
+                                key={month}
+                                onClick={() => {
+                                  const updated = [...settings.plans.singleRent];
+                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
+                                  setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
+                                }}
+                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-blue-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
+                              >
+                                {month} {month === 1 ? 'Month' : 'Months'}
+                                <span className="ml-1 font-bold">×</span>
+                              </button>
+                            ))}
+                            <div className="flex items-center gap-1">
+                              <input
+                                type="number"
+                                min="1"
+                                placeholder="Add"
+                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    const val = parseInt((e.target as HTMLInputElement).value);
+                                    if (val > 0 && !plan.contractMonths.includes(val)) {
+                                      const updated = [...settings.plans.singleRent];
+                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                      setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
+                                      (e.target as HTMLInputElement).value = '';
+                                    }
+                                  }
+                                }}
+                              />
+                              <button
+                                onClick={(e) => {
+                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
+                                  const val = parseInt(input.value);
+                                  if (val > 0 && !plan.contractMonths.includes(val)) {
+                                    const updated = [...settings.plans.singleRent];
+                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                    setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } });
+                                    input.value = '';
+                                  }
+                                }}
+                                className="px-2 py-1.5 bg-blue-600 text-white rounded-lg text-xs hover:bg-blue-700"
+                              >
+                                +
+                              </button>
+                            </div>
+                          </div>
+                          {plan.contractMonths.length === 0 && (
+                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
+                          )}
+                        </div>
+                        <div>
                           <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>
@@ -2261,18 +2325,14 @@ export default function CompanySettingsPage() {
                   {settings.plans.rentToOwn.map((plan, idx) => (
                     <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                       <div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
                         <div>
                           <h4 className="font-semibold text-purple-800">RENT TO OWN - {plan.tier} - ৳{plan.dailyRent}/day</h4>
-                            <p className="text-sm text-purple-600 mt-1">{plan.description}</p>
-                          </div>
                         </div>
                         <button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                           <Save className="w-3 h-3" /> Save
                         </button>
                       </div>
-                      <div className="p-4">
+                      <div className="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>
@@ -2319,13 +2379,69 @@ export default function CompanySettingsPage() {
                             <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="p-3 bg-slate-50 rounded-lg">
                           <div className="flex items-center justify-between text-sm">
                             <span className="text-slate-600">FICO + JAIBEN =</span>
                             <span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent)}% (FICO Rent: {plan.ficoRentSharePercent}% + FICO Profit: {plan.ficoProfitSharePercent}% + JAIBEN: {100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent}%)</span>
                           </div>
                         </div>
-                        <div className="mt-4">
+                        <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">
+                            {plan.contractMonths.map(month => (
+                              <button
+                                key={month}
+                                onClick={() => {
+                                  const updated = [...settings.plans.rentToOwn];
+                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
+                                  setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
+                                }}
+                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-purple-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
+                              >
+                                {month} Months
+                                <span className="ml-1 font-bold">×</span>
+                              </button>
+                            ))}
+                            <div className="flex items-center gap-1">
+                              <input
+                                type="number"
+                                min="1"
+                                placeholder="Add"
+                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    const val = parseInt((e.target as HTMLInputElement).value);
+                                    if (val > 0 && !plan.contractMonths.includes(val)) {
+                                      const updated = [...settings.plans.rentToOwn];
+                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                      setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
+                                      (e.target as HTMLInputElement).value = '';
+                                    }
+                                  }
+                                }}
+                              />
+                              <button
+                                onClick={(e) => {
+                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
+                                  const val = parseInt(input.value);
+                                  if (val > 0 && !plan.contractMonths.includes(val)) {
+                                    const updated = [...settings.plans.rentToOwn];
+                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                    setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } });
+                                    input.value = '';
+                                  }
+                                }}
+                                className="px-2 py-1.5 bg-purple-600 text-white rounded-lg text-xs hover:bg-purple-700"
+                              >
+                                +
+                              </button>
+                            </div>
+                          </div>
+                          {plan.contractMonths.length === 0 && (
+                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
+                          )}
+                        </div>
+                        <div>
                           <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>
@@ -2340,18 +2456,14 @@ export default function CompanySettingsPage() {
                   {settings.plans.shareEv.map((plan, idx) => (
                     <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                       <div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
                         <div>
                           <h4 className="font-semibold text-green-800">SHARE AN EV - {plan.tier} - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
-                            <p className="text-sm text-green-600 mt-1">{plan.description}</p>
-                          </div>
                         </div>
                         <button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
                           <Save className="w-3 h-3" /> Save
                         </button>
                       </div>
-                      <div className="p-4">
+                      <div className="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>
@@ -2394,13 +2506,69 @@ export default function CompanySettingsPage() {
                             <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="p-3 bg-slate-50 rounded-lg">
                           <div className="flex items-center justify-between text-sm">
                             <span className="text-slate-600">FICO + JAIBEN =</span>
                             <span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
                           </div>
                         </div>
-                        <div className="mt-4">
+                        <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">
+                            {plan.contractMonths.map(month => (
+                              <button
+                                key={month}
+                                onClick={() => {
+                                  const updated = [...settings.plans.shareEv];
+                                  updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month);
+                                  setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
+                                }}
+                                className="px-3 py-1.5 rounded-lg text-xs font-medium bg-green-600 text-white hover:bg-red-500 transition-all flex items-center gap-1"
+                              >
+                                {month} {month === 1 ? 'Month' : 'Months'}
+                                <span className="ml-1 font-bold">×</span>
+                              </button>
+                            ))}
+                            <div className="flex items-center gap-1">
+                              <input
+                                type="number"
+                                min="1"
+                                placeholder="Add"
+                                className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs"
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    const val = parseInt((e.target as HTMLInputElement).value);
+                                    if (val > 0 && !plan.contractMonths.includes(val)) {
+                                      const updated = [...settings.plans.shareEv];
+                                      updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                      setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
+                                      (e.target as HTMLInputElement).value = '';
+                                    }
+                                  }
+                                }}
+                              />
+                              <button
+                                onClick={(e) => {
+                                  const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
+                                  const val = parseInt(input.value);
+                                  if (val > 0 && !plan.contractMonths.includes(val)) {
+                                    const updated = [...settings.plans.shareEv];
+                                    updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b);
+                                    setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } });
+                                    input.value = '';
+                                  }
+                                }}
+                                className="px-2 py-1.5 bg-green-600 text-white rounded-lg text-xs hover:bg-green-700"
+                              >
+                                +
+                              </button>
+                            </div>
+                          </div>
+                          {plan.contractMonths.length === 0 && (
+                            <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>
+                          )}
+                        </div>
+                        <div>
                           <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>