From 3d89b3841750d21ef2d700b11dd05c89f2413ba6 Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Sun, 10 May 2026 03:41:16 +0600
Subject: [PATCH] feat: replace multi-select dropdowns with custom
 checkbox-based multi-select menus for plan EV models

---
 src/app/admin/settings/page.tsx | 93 +++++++++++++++++----------------
 1 file changed, 48 insertions(+), 45 deletions(-)

diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 4870650..dc6d7fb 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -2466,21 +2466,22 @@ export default function CompanySettingsPage() {
                           </div>
                           <div>
                             <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">
-                              <option value="Etron ET50">Etron ET50</option>
-                              <option value="Yadea DT3">Yadea DT3</option>
-                              <option value="AIMA Lightning">AIMA Lightning</option>
-                              <option value="AIMA EM5">AIMA EM5</option>
-                              <option value="Yadea G5">Yadea G5</option>
-                              <option value="TVS iQube">TVS iQube</option>
-                              <option value="Bajaj Chetak">Bajaj Chetak</option>
-                              <option value="Hero Photon">Hero Photon</option>
-                              <option value="Okinawa Praise">Okinawa Praise</option>
-                              <option value="Ampere Magnus">Ampere Magnus</option>
-                              <option value="Benling Aura">Benling Aura</option>
-                              <option value="Lectrix LXS">Lectrix LXS</option>
-                              <option value="Revolt RV400">Revolt RV400</option>
-                            </select>
+                            <div className="relative">
+                              <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">
+                                <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
+                                  {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
+                                </span>
+                                <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>
+                              </button>
+                              <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">
+                                {['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 => (
+                                  <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
+                                    <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" />
+                                    <span>{model}</span>
+                                  </label>
+                                ))}
+                              </div>
+                            </div>
                           </div>
                           <div>
                             <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>
                             <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">
-                              <option value="Etron ET50">Etron ET50</option>
-                              <option value="Yadea DT3">Yadea DT3</option>
-                              <option value="AIMA Lightning">AIMA Lightning</option>
-                              <option value="AIMA EM5">AIMA EM5</option>
-                              <option value="Yadea G5">Yadea G5</option>
-                              <option value="TVS iQube">TVS iQube</option>
-                              <option value="Bajaj Chetak">Bajaj Chetak</option>
-                              <option value="Hero Photon">Hero Photon</option>
-                              <option value="Okinawa Praise">Okinawa Praise</option>
-                              <option value="Ampere Magnus">Ampere Magnus</option>
-                              <option value="Benling Aura">Benling Aura</option>
-                              <option value="Lectrix LXS">Lectrix LXS</option>
-                              <option value="Revolt RV400">Revolt RV400</option>
-                            </select>
+                            <div className="relative">
+                              <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">
+                                <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
+                                  {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
+                                </span>
+                                <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>
+                              </button>
+                              <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">
+                                {['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 => (
+                                  <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
+                                    <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" />
+                                    <span>{model}</span>
+                                  </label>
+                                ))}
+                              </div>
+                            </div>
                           </div>
                           <div>
                             <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>
                             <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">
-                              <option value="Etron ET50">Etron ET50</option>
-                              <option value="Yadea DT3">Yadea DT3</option>
-                              <option value="AIMA Lightning">AIMA Lightning</option>
-                              <option value="AIMA EM5">AIMA EM5</option>
-                              <option value="Yadea G5">Yadea G5</option>
-                              <option value="TVS iQube">TVS iQube</option>
-                              <option value="Bajaj Chetak">Bajaj Chetak</option>
-                              <option value="Hero Photon">Hero Photon</option>
-                              <option value="Okinawa Praise">Okinawa Praise</option>
-                              <option value="Ampere Magnus">Ampere Magnus</option>
-                              <option value="Benling Aura">Benling Aura</option>
-                              <option value="Lectrix LXS">Lectrix LXS</option>
-                              <option value="Revolt RV400">Revolt RV400</option>
-                            </select>
+                            <div className="relative">
+                              <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">
+                                <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
+                                  {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
+                                </span>
+                                <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>
+                              </button>
+                              <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">
+                                {['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 => (
+                                  <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
+                                    <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" />
+                                    <span>{model}</span>
+                                  </label>
+                                ))}
+                              </div>
+                            </div>
                           </div>
                           <div>
                             <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit Each (৳)</label>