shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement plan tiering and expand rental options across all service categories

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-05 04:20:17 +06:00
parent 8f73819986
commit da0df6db3e
1 changed files with 310 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
src/app/admin/settings/page.tsx
View File

@@ -82,17 +82,17 @@ interface CompanySettings {
}; };
plans: { plans: {
singleRent: { singleRent: {
tier: 'Economy' | 'Standard' | 'Premium';
name: string; name: string;
dailyRent: number; dailyRent: number;
deposit: number; deposit: number;
weeklySubscription: number; weeklySubscription: number;
monthlySubscription: number; monthlySubscription: number;
ficoSharePercent: number; ficoSharePercent: number;
jaibenKeepPercent: number;
description: string; description: string;
features: string[];
}[]; }[];
rentToOwn: { rentToOwn: {
tier: 'Economy' | 'Standard' | 'Premium';
name: string; name: string;
dailyRent: number; dailyRent: number;
deposit: number; deposit: number;
@@ -105,9 +105,9 @@ interface CompanySettings {
ficoRentSharePercent: number; ficoRentSharePercent: number;
ficoProfitSharePercent: number; ficoProfitSharePercent: number;
description: string; description: string;
features: string[];
}[]; }[];
shareEv: { shareEv: {
tier: 'Economy' | 'Standard' | 'Premium';
name: string; name: string;
dailyRentEach: number; dailyRentEach: number;
totalDailyRent: number; totalDailyRent: number;
@@ -119,7 +119,6 @@ interface CompanySettings {
totalMonthlySubscription: number; totalMonthlySubscription: number;
ficoSharePercent: number; ficoSharePercent: number;
description: string; description: string;
features: string[];
}[]; }[];
}; };
} }
@@ -319,20 +318,55 @@ const initialSettings: CompanySettings = {
plans: { plans: {
singleRent: [ singleRent: [
{ {
name: 'Single Rent', tier: 'Premium',
name: 'Single Rent - Premium',
dailyRent: 400,
deposit: 25000,
weeklySubscription: 2800,
monthlySubscription: 12000,
ficoSharePercent: 50,
description: 'Premium single person rental plan with extra benefits',
},
{
tier: 'Standard',
name: 'Single Rent - Standard',
dailyRent: 300, dailyRent: 300,
deposit: 20000, deposit: 20000,
weeklySubscription: 2100, weeklySubscription: 2100,
monthlySubscription: 9000, monthlySubscription: 9000,
ficoSharePercent: 45, ficoSharePercent: 45,
jaibenKeepPercent: 55, description: 'Standard single person rental plan',
description: 'Single person rental plan with deposit and weekly/monthly subscription', },
features: ['Deposit Money > 20,000TK', '1st Day Rent Advance', 'Weekly Subscription > 2,100TK', 'Monthly Subscription > 9,000TK', 'Auto Deduct from Wallet Balance', 'FICO gets 45% > 135TK', 'JAIBEN keeps 55% > 165TK'] {
tier: 'Economy',
name: 'Single Rent - Economy',
dailyRent: 250,
deposit: 15000,
weeklySubscription: 1750,
monthlySubscription: 7500,
ficoSharePercent: 40,
description: 'Economy single person rental plan',
} }
], ],
rentToOwn: [ rentToOwn: [
{ {
name: 'Rent to Own', tier: 'Premium',
name: 'Rent to Own - Premium',
dailyRent: 350,
deposit: 25000,
weeklySubscription: 2450,
monthlySubscription: 10500,
durationMonths: 18,
evPrice: 150000,
totalPayment: 170000,
profit: 20000,
ficoRentSharePercent: 50,
ficoProfitSharePercent: 45,
description: 'Premium rent to own plan with high-end EV',
},
{
tier: 'Standard',
name: 'Rent to Own - Standard',
dailyRent: 250, dailyRent: 250,
deposit: 18000, deposit: 18000,
weeklySubscription: 1750, weeklySubscription: 1750,
@@ -343,13 +377,42 @@ const initialSettings: CompanySettings = {
profit: 15000, profit: 15000,
ficoRentSharePercent: 45, ficoRentSharePercent: 45,
ficoProfitSharePercent: 45, ficoProfitSharePercent: 45,
description: 'Rent to own plan - get ownership after 18 months', description: 'Standard rent to own plan',
features: ['Daily Rent = 250TK', 'Deposit Money > 18,000TK', 'Weekly Subscription > 1,750TK or 1,875TK', 'Monthly Subscription > 7,000TK or 7,500TK', 'Duration > 18 Months', 'In 18 months Total Pay > 1,35,000TK (EV Price 1,20,000TK)', 'Profit > 15,000TK', 'FICO gets 45% of the rent > 112 TK and Profit Share 45% > 6,750TK', 'Rider gets a brand new EV after 18 months'] },
{
tier: 'Economy',
name: 'Rent to Own - Economy',
dailyRent: 200,
deposit: 15000,
weeklySubscription: 1400,
monthlySubscription: 6000,
durationMonths: 18,
evPrice: 100000,
totalPayment: 115000,
profit: 15000,
ficoRentSharePercent: 40,
ficoProfitSharePercent: 40,
description: 'Economy rent to own plan',
} }
], ],
shareEv: [ shareEv: [
{ {
name: 'Share an EV', tier: 'Premium',
name: 'Share an EV - Premium',
dailyRentEach: 300,
totalDailyRent: 600,
depositEach: 20000,
totalDeposit: 40000,
weeklySubscriptionEach: 2100,
totalWeeklySubscription: 4200,
monthlySubscriptionEach: 8400,
totalMonthlySubscription: 16800,
ficoSharePercent: 50,
description: 'Premium shared EV with premium bikes',
},
{
tier: 'Standard',
name: 'Share an EV - Standard',
dailyRentEach: 200, dailyRentEach: 200,
totalDailyRent: 400, totalDailyRent: 400,
depositEach: 15000, depositEach: 15000,
@@ -359,11 +422,24 @@ const initialSettings: CompanySettings = {
monthlySubscriptionEach: 5600, monthlySubscriptionEach: 5600,
totalMonthlySubscription: 11200, totalMonthlySubscription: 11200,
ficoSharePercent: 45, ficoSharePercent: 45,
description: 'Share EV between 2 riders - split earnings', description: 'Standard shared EV plan',
features: ['Daily Rent = 200TK each (Total = 400TK)', 'Deposit Money > 15,000TK each (Total = 30,000TK)', 'Weekly Subscription > 1,400TK or 1,500TK each (Total = 2,800TK or 3,000TK)', 'Monthly Subscription > 5,600TK or 6,000TK each (Total = 11,200TK or 12,000TK)', 'FICO gets 45% of daily rent 90+90 > 180TK from two riders one EV', 'No ownership'] },
{
tier: 'Economy',
name: 'Share an EV - Economy',
dailyRentEach: 150,
totalDailyRent: 300,
depositEach: 12000,
totalDeposit: 24000,
weeklySubscriptionEach: 1050,
totalWeeklySubscription: 2100,
monthlySubscriptionEach: 4200,
totalMonthlySubscription: 8400,
ficoSharePercent: 40,
description: 'Economy shared EV plan',
} }
] ],
} },
}; };
export default function CompanySettingsPage() { export default function CompanySettingsPage() {
@@ -1470,223 +1546,232 @@ export default function CompanySettingsPage() {
</div> </div>
</div> </div>
)} )}
{activeTab === 'plans' && ( {activeTab === 'plans' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3> <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
</div> </div>
<div className="flex gap-2 border-b border-slate-200"> <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('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('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> <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> </div>
{activePlanTab === 'singleRent' && ( {activePlanTab === 'singleRent' && (
<div className="space-y-6"> <div className="space-y-6">
{settings.plans.singleRent.map((plan, idx) => ( {settings.plans.singleRent.map((plan, idx) => (
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden"> <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="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
<div> <div className="flex items-center gap-3">
<h4 className="font-semibold text-blue-800">SINGLE RENT - ৳{plan.dailyRent}/day</h4> {/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
<p className="text-sm text-blue-600 mt-1">{plan.description}</p> <div>
</div> <h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
<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"> <p className="text-sm text-blue-600 mt-1">{plan.description}</p>
<Save className="w-3 h-3" /> Save </div>
</button> </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">
<div className="p-4"> <Save className="w-3 h-3" /> Save
<div className="grid lg:grid-cols-3 gap-4"> </button>
<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>
<div> <div className="p-4">
<label className="text-sm text-slate-600">Weekly Subscription (৳)</label> <div className="grid lg:grid-cols-3 gap-4">
<input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" /> <div>
</div> <label className="text-sm text-slate-600">Daily Rent (৳)</label>
<div> <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" />
<label className="text-sm text-slate-600">Monthly Subscription (৳)</label> </div>
<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">Weekly Subscription (৳)</label>
<div> <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" />
<label className="text-sm text-slate-600">Deposit (৳)</label> </div>
<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">Monthly Subscription (৳)</label>
<div> <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" />
<label className="text-sm text-slate-600">FICO Share (%)</label> </div>
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" /> <div>
</div> <label className="text-sm text-slate-600">Deposit (৳)</label>
<div> <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" />
<label className="text-sm text-slate-600">JAIBEN Keep (%)</label> </div>
<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>
<label className="text-sm text-slate-600">FICO Share (%)</label>
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">JAIBEN Keep (%)</label>
<input type="number" value={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 - 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">
<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> </div>
</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 - 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">
<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>
</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 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="grid lg:grid-cols-3 gap-4">
<div>
<label className="text-sm text-slate-600">Daily Rent (৳)</label>
<input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
<input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Deposit (৳)</label>
<input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Duration (Months)</label>
<input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">EV Price (৳)</label>
<input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Payment (৳)</label>
<input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Profit (৳)</label>
<input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Rent Share (%)</label>
<input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Profit Share (%)</label>
<input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<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 + 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">
<label className="text-sm text-slate-600">Description</label>
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
</div>
</div>
</div>
))}
</div>
)}
{activePlanTab === 'shareEv' && (
<div className="space-y-6">
{settings.plans.shareEv.map((plan, idx) => (
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
<div className="bg-green-50 px-4 py-3 border-b border-green-100 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="grid lg:grid-cols-3 gap-4">
<div>
<label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
<input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Daily Rent (৳)</label>
<input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Weekly Subscription Each (৳)</label>
<input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Weekly Subscription (৳)</label>
<input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Monthly Subscription Each (৳)</label>
<input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Monthly Subscription (৳)</label>
<input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Deposit Each (৳)</label>
<input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Deposit (৳)</label>
<input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Share (%)</label>
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<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 - 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">
<label className="text-sm text-slate-600">Description</label>
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
</div>
</div>
</div>
))}
</div>
)}
</div> </div>
)} )}
{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 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>
<label className="text-sm text-slate-600">Daily Rent (৳)</label>
<input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Weekly Subscription (৳)</label>
<input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Deposit (৳)</label>
<input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Duration (Months)</label>
<input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">EV Price (৳)</label>
<input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Payment (৳)</label>
<input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Profit (৳)</label>
<input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Rent Share (%)</label>
<input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Profit Share (%)</label>
<input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<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 + 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">
<label className="text-sm text-slate-600">Description</label>
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
</div>
</div>
</div>
))}
</div>
)}
{activePlanTab === 'shareEv' && (
<div className="space-y-6">
{settings.plans.shareEv.map((plan, idx) => (
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
<div className="bg-green-50 px-4 py-3 border-b border-green-100 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>
<label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
<input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Daily Rent (৳)</label>
<input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Weekly Subscription Each (৳)</label>
<input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Weekly Subscription (৳)</label>
<input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Monthly Subscription Each (৳)</label>
<input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Monthly Subscription (৳)</label>
<input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Deposit Each (৳)</label>
<input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">Total Deposit (৳)</label>
<input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<label className="text-sm text-slate-600">FICO Share (%)</label>
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
</div>
<div>
<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 - 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">
<label className="text-sm text-slate-600">Description</label>
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
</div>
</div>
</div>
))}
</div>
)}
</div>
)}
</div> </div>
</div> </div>