feat: introduce tabbed navigation for plan settings in admin panel
This commit is contained in:
sazzadulalambd
@@ -371,6 +371,7 @@ export default function CompanySettingsPage() {
|
|||||||
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental' | 'plans'>('general');
|
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental' | 'plans'>('general');
|
||||||
const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
|
const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
|
||||||
const [saved, setSaved] = useState(false);
|
const [saved, setSaved] = useState(false);
|
||||||
|
const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
|
||||||
const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
|
const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
|
||||||
const [newDocName, setNewDocName] = useState('');
|
const [newDocName, setNewDocName] = useState('');
|
||||||
const [newDocDesc, setNewDocDesc] = useState('');
|
const [newDocDesc, setNewDocDesc] = useState('');
|
||||||
@@ -1469,196 +1470,203 @@ 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>
|
||||||
<button onClick={handleSave} className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
<button onClick={handleSave} className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||||||
<Save className="w-4 h-4" /> Save Changes
|
<Save className="w-4 h-4" /> Save Changes
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-8">
|
<div className="flex gap-2 border-b border-slate-200">
|
||||||
{settings.plans.singleRent.map((plan, idx) => (
|
<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>
|
||||||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
<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>
|
||||||
<div className="bg-blue-50 px-4 py-3 border-b border-blue-100">
|
<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>
|
||||||
<h4 className="font-semibold text-blue-800">1. SINGLE RENT - ৳{plan.dailyRent}/day</h4>
|
</div>
|
||||||
|
|
||||||
|
{activePlanTab === 'singleRent' && (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{settings.plans.singleRent.map((plan, idx) => (
|
||||||
|
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||||
|
<div className="bg-blue-50 px-4 py-3 border-b border-blue-100">
|
||||||
|
<h4 className="font-semibold text-blue-800">SINGLE RENT - ৳{plan.dailyRent}/day</h4>
|
||||||
|
<p className="text-sm text-blue-600 mt-1">{plan.description}</p>
|
||||||
|
</div>
|
||||||
|
<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.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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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={plan.jaibenKeepPercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].jaibenKeepPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4">
|
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||||||
<div className="grid lg:grid-cols-2 gap-4">
|
<div className="flex items-center justify-between text-sm">
|
||||||
<div>
|
<span className="text-slate-600">FICO + JAIBEN =</span>
|
||||||
<label className="text-sm text-slate-600">Daily Rent (৳)</label>
|
<span className={`font-semibold ${plan.ficoSharePercent + plan.jaibenKeepPercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + plan.jaibenKeepPercent}%</span>
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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>
|
|
||||||
<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={plan.jaibenKeepPercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].jaibenKeepPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
|
||||||
</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 className="mt-4">
|
|
||||||
<label className="text-sm text-slate-600">Features</label>
|
|
||||||
<div className="space-y-2 mt-1">
|
|
||||||
{plan.features.map((feature, fidx) => (
|
|
||||||
<div key={fidx} className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-slate-700">• {feature}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
))}
|
||||||
{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">
|
|
||||||
<h4 className="font-semibold text-purple-800">2. RENT TO OWN - ৳{plan.dailyRent}/day</h4>
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="grid lg:grid-cols-2 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">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">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">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>
|
|
||||||
<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 className="mt-4">
|
|
||||||
<label className="text-sm text-slate-600">Features</label>
|
|
||||||
<div className="space-y-2 mt-1">
|
|
||||||
{plan.features.map((feature, fidx) => (
|
|
||||||
<div key={fidx} className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-slate-700">• {feature}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{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">
|
|
||||||
<h4 className="font-semibold text-green-800">3. SHARE AN EV - ৳{plan.dailyRentEach}/day each</h4>
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<div className="grid lg:grid-cols-2 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">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">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">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>
|
|
||||||
<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 className="mt-4">
|
|
||||||
<label className="text-sm text-slate-600">Features</label>
|
|
||||||
<div className="space-y-2 mt-1">
|
|
||||||
{plan.features.map((feature, fidx) => (
|
|
||||||
<div key={fidx} className="flex items-center gap-2">
|
|
||||||
<span className="text-sm text-slate-700">• {feature}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-600">FICO Rent + Profit Share =</span>
|
||||||
|
<span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent}%</span>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-600">FICO + JAIBEN =</span>
|
||||||
|
<span className={`font-semibold ${plan.ficoSharePercent <= 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent}%</span>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user