Unify all dropdowns on the custom Select component.

Replace every native <select> across the dashboard, admin pages, and
shared components with the custom Select used by the optional-service
version pickers, for consistent styling and mobile-safe anchoring. Add
a disabled prop to Select to cover the former read-only native cases.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx

@@ -7,6 +7,7 @@ import { toast } from 'react-toastify';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types';
+import { Select } from '@/components/ui/select';
 
 const statusClasses: Record<InvoiceStatus, string> = {
   draft: 'badge-gray',
@@ -108,18 +109,31 @@ export default function AdminInvoicesPage() {
             className="input-field pl-9 rtl:pl-3 rtl:pr-9 w-full"
           />
         </div>
-        <select value={status} onChange={(e) => setStatus(e.target.value as any)} className="input-field">
-          <option value="all">{inv.allStatuses}</option>
-          {(Object.keys(inv.status) as InvoiceStatus[]).map((value) => (
-            <option key={value} value={value}>{statusLabel(value)}</option>
-          ))}
-        </select>
-        <select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value as any)} className="input-field">
-          <option value="all">{inv.allMethods}</option>
-          <option value="wallet">{inv.methodWallet}</option>
-          <option value="gateway">{inv.methodGateway}</option>
-          <option value="mixed">{inv.methodMixed}</option>
-        </select>
+        <Select
+          size="md"
+          ariaLabel={inv.allStatuses}
+          value={status}
+          onChange={(v) => setStatus(v as any)}
+          options={[
+            { value: 'all', label: inv.allStatuses },
+            ...(Object.keys(inv.status) as InvoiceStatus[]).map((value) => ({
+              value,
+              label: statusLabel(value),
+            })),
+          ]}
+        />
+        <Select
+          size="md"
+          ariaLabel={inv.allMethods}
+          value={paymentMethod}
+          onChange={(v) => setPaymentMethod(v as any)}
+          options={[
+            { value: 'all', label: inv.allMethods },
+            { value: 'wallet', label: inv.methodWallet },
+            { value: 'gateway', label: inv.methodGateway },
+            { value: 'mixed', label: inv.methodMixed },
+          ]}
+        />
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">