chore: update select in pos

Author: rahulchaudhary2002

resources/js/pages/pos/index.tsx

@@ -1164,14 +1164,15 @@ export default function PosIndex({ outlets, categories, foods, customers: initia
                         {!scopeHasOutlet && (
                             <div className="flex flex-col gap-1">
                                 <label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Outlet</label>
-                                <select
+                                <SearchableSelect
                                     value={outletId}
                                     onChange={(e) => { setOutletId(e.target.value); setTableIds([]); }}
-                                    className="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary dark:border-stone-700 dark:bg-stone-800"
+                                    placeholder="Select outlet…"
+                                    className="h-10 text-xs"
                                 >
                                     <option value="">Select outlet…</option>
                                     {outlets.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
-                                </select>
+                                </SearchableSelect>
                             </div>
                         )}
                         <div className="flex flex-col gap-1">
@@ -1180,28 +1181,20 @@ export default function PosIndex({ outlets, categories, foods, customers: initia
                                 <span className="font-normal normal-case text-muted-foreground/60">(optional)</span>
                                 <kbd className="ml-auto rounded border border-border bg-muted px-1 py-0.5 font-mono text-[9px] font-bold dark:border-stone-700 dark:bg-stone-800">C</kbd>
                             </label>
-                            <div ref={customerSelectRef} className="flex gap-1.5">
+                            <div ref={customerSelectRef}>
                                 <SearchableSelect
                                     value={customerId}
                                     onChange={(e) => setCustomerId(e.target.value)}
                                     placeholder="Walk-in / Anonymous"
                                     onAddNew={(q) => openNewCustomer(q)}
                                     addNewLabel="New customer"
-                                    className="h-8 rounded-md border-border bg-background pr-14 text-xs dark:border-stone-700 dark:bg-stone-800"
+                                    className="h-10 rounded-md border-border bg-background pr-14 text-xs dark:border-stone-700 dark:bg-stone-800"
                                 >
                                     <option value="">Walk-in / Anonymous</option>
                                     {customers.map((c) => (
                                         <option key={c.id} value={c.id}>{c.name}{c.phone ? ` - ${c.phone}` : ''}</option>
                                     ))}
                                 </SearchableSelect>
-                                <button
-                                    type="button"
-                                    onClick={() => openNewCustomer('')}
-                                    title="New customer"
-                                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-background text-muted-foreground transition hover:border-primary hover:text-primary dark:border-stone-700 dark:bg-stone-800"
-                                >
-                                    <UserPlus className="h-3.5 w-3.5" />
-                                </button>
                             </div>
                         </div>
                     </div>