feat: replace multi-select dropdowns with custom checkbox-based multi-select menus for plan EV models
This commit is contained in:
sazzadulalambd
@@ -2466,21 +2466,22 @@ export default function CompanySettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
||||||
<select multiple value={plan.evModels} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].evModels = Array.from(e.target.selectedOptions, opt => opt.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-2 border border-slate-200 rounded-lg text-sm bg-white min-h-[70px] cursor-pointer">
|
<div className="relative">
|
||||||
<option value="Etron ET50">Etron ET50</option>
|
<button type="button" onClick={() => { const el = document.getElementById(`ev-models-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
|
||||||
<option value="Yadea DT3">Yadea DT3</option>
|
<span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
|
||||||
<option value="AIMA Lightning">AIMA Lightning</option>
|
{plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
|
||||||
<option value="AIMA EM5">AIMA EM5</option>
|
</span>
|
||||||
<option value="Yadea G5">Yadea G5</option>
|
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||||
<option value="TVS iQube">TVS iQube</option>
|
</button>
|
||||||
<option value="Bajaj Chetak">Bajaj Chetak</option>
|
<div id={`ev-models-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
<option value="Hero Photon">Hero Photon</option>
|
{['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
|
||||||
<option value="Okinawa Praise">Okinawa Praise</option>
|
<label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
|
||||||
<option value="Ampere Magnus">Ampere Magnus</option>
|
<input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.singleRent]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
|
||||||
<option value="Benling Aura">Benling Aura</option>
|
<span>{model}</span>
|
||||||
<option value="Lectrix LXS">Lectrix LXS</option>
|
</label>
|
||||||
<option value="Revolt RV400">Revolt RV400</option>
|
))}
|
||||||
</select>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
|
||||||
@@ -2605,21 +2606,22 @@ export default function CompanySettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
||||||
<select multiple value={plan.evModels} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evModels = Array.from(e.target.selectedOptions, opt => opt.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-2 border border-slate-200 rounded-lg text-sm bg-white min-h-[70px] cursor-pointer">
|
<div className="relative">
|
||||||
<option value="Etron ET50">Etron ET50</option>
|
<button type="button" onClick={() => { const el = document.getElementById(`ev-models-rto-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
|
||||||
<option value="Yadea DT3">Yadea DT3</option>
|
<span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
|
||||||
<option value="AIMA Lightning">AIMA Lightning</option>
|
{plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
|
||||||
<option value="AIMA EM5">AIMA EM5</option>
|
</span>
|
||||||
<option value="Yadea G5">Yadea G5</option>
|
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||||
<option value="TVS iQube">TVS iQube</option>
|
</button>
|
||||||
<option value="Bajaj Chetak">Bajaj Chetak</option>
|
<div id={`ev-models-rto-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
<option value="Hero Photon">Hero Photon</option>
|
{['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
|
||||||
<option value="Okinawa Praise">Okinawa Praise</option>
|
<label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
|
||||||
<option value="Ampere Magnus">Ampere Magnus</option>
|
<input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.rentToOwn]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
|
||||||
<option value="Benling Aura">Benling Aura</option>
|
<span>{model}</span>
|
||||||
<option value="Lectrix LXS">Lectrix LXS</option>
|
</label>
|
||||||
<option value="Revolt RV400">Revolt RV400</option>
|
))}
|
||||||
</select>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
|
||||||
@@ -2744,21 +2746,22 @@ export default function CompanySettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
|
||||||
<select multiple value={plan.evModels} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].evModels = Array.from(e.target.selectedOptions, opt => opt.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-2 border border-slate-200 rounded-lg text-sm bg-white min-h-[70px] cursor-pointer">
|
<div className="relative">
|
||||||
<option value="Etron ET50">Etron ET50</option>
|
<button type="button" onClick={() => { const el = document.getElementById(`ev-models-se-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
|
||||||
<option value="Yadea DT3">Yadea DT3</option>
|
<span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
|
||||||
<option value="AIMA Lightning">AIMA Lightning</option>
|
{plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
|
||||||
<option value="AIMA EM5">AIMA EM5</option>
|
</span>
|
||||||
<option value="Yadea G5">Yadea G5</option>
|
<svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||||
<option value="TVS iQube">TVS iQube</option>
|
</button>
|
||||||
<option value="Bajaj Chetak">Bajaj Chetak</option>
|
<div id={`ev-models-se-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||||
<option value="Hero Photon">Hero Photon</option>
|
{['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
|
||||||
<option value="Okinawa Praise">Okinawa Praise</option>
|
<label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
|
||||||
<option value="Ampere Magnus">Ampere Magnus</option>
|
<input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.shareEv]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
|
||||||
<option value="Benling Aura">Benling Aura</option>
|
<span>{model}</span>
|
||||||
<option value="Lectrix LXS">Lectrix LXS</option>
|
</label>
|
||||||
<option value="Revolt RV400">Revolt RV400</option>
|
))}
|
||||||
</select>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit Each (৳)</label>
|
<label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit Each (৳)</label>
|
||||||
|
|||||||
Reference in New Issue
Block a user