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

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

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-09 16:34:09 +06:00
parent f8b4d7e2ea
commit fec4b95e47
1 changed files with 195 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>