From 268ed419b2da59eced77d99f4db1aa5ac7cda1ae Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Thu, 2 Jul 2026 15:44:16 +0200
Subject: [PATCH] fix(admin): use TREK's CustomSelect for the invite trip
 picker

The "add to trip" dropdown in the admin create-invite dialog was a native
<select>; swap it for the shared CustomSelect so it matches the rest of the UI
(searchable once there are many trips).
---
 client/src/pages/admin/AdminUsersTab.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/pages/admin/AdminUsersTab.tsx b/client/src/pages/admin/AdminUsersTab.tsx
index 354b726e0..1a81105a5 100644
--- a/client/src/pages/admin/AdminUsersTab.tsx
+++ b/client/src/pages/admin/AdminUsersTab.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import CustomSelect from '../../components/shared/CustomSelect'
 import { Shield, Trash2, Edit2, UserPlus, Link2, Copy, Plus } from 'lucide-react'
 import Modal from '../../components/shared/Modal'
 import PermissionsPanel from '../../components/Admin/PermissionsPanel'
@@ -224,16 +225,16 @@ export default function AdminUsersTab({ admin, t, locale }: AdminUsersTabProps):
           {inviteTrips.length > 0 && (
             <div>
               <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1.5">{t('admin.invite.tripLabel')}</label>
-              <select
+              <CustomSelect
                 value={inviteForm.trip_id}
-                onChange={e => setInviteForm(f => ({ ...f, trip_id: e.target.value === '' ? '' : Number(e.target.value) }))}
-                className="w-full py-2 px-2.5 rounded-lg text-sm border border-slate-200 bg-white text-slate-700 focus:border-slate-400 outline-none"
-              >
-                <option value="">{t('admin.invite.tripNone')}</option>
-                {inviteTrips.map(tr => (
-                  <option key={tr.id} value={tr.id}>{tr.title}</option>
-                ))}
-              </select>
+                onChange={v => setInviteForm(f => ({ ...f, trip_id: v === '' ? '' : Number(v) }))}
+                options={[
+                  { value: '', label: t('admin.invite.tripNone') },
+                  ...inviteTrips.map(tr => ({ value: tr.id, label: tr.title })),
+                ]}
+                searchable={inviteTrips.length > 8}
+                placeholder={t('admin.invite.tripNone')}
+              />
               <p className="text-xs text-slate-400 mt-1.5 leading-relaxed">{t('admin.invite.tripHint')}</p>
             </div>
           )}