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/tickets/page.tsx

@@ -9,6 +9,7 @@ import { useAuthStore } from '@/lib/store';
 import { toast } from 'react-toastify';
 import type { Ticket, CreateTicketDto, TicketDepartment, TicketPriority } from '@/types';
 import { Wrench, Briefcase, Ticket as TicketIcon, X } from 'lucide-react';
+import { Select } from '@/components/ui/select';
 
 const statusColors: Record<string, string> = {
   open: 'bg-yellow-100 text-yellow-700',
@@ -103,27 +104,27 @@ export default function TicketsPage() {
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{tk.departmentField}</label>
-              <select
-                className="input-field"
+              <Select
+                size="md"
+                ariaLabel={tk.departmentField}
                 value={form.department}
-                onChange={(e) => setForm({ ...form, department: e.target.value as TicketDepartment })}
-              >
-                {availableDepartments.map((dept) => (
-                  <option key={dept.value} value={dept.value}>{dept.label}</option>
-                ))}
-              </select>
+                onChange={(v) => setForm({ ...form, department: v as TicketDepartment })}
+                options={availableDepartments.map((dept) => ({ value: dept.value, label: dept.label }))}
+              />
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">{tk.priorityField}</label>
-              <select
-                className="input-field"
-                value={form.priority}
-                onChange={(e) => setForm({ ...form, priority: e.target.value as TicketPriority })}
-              >
-                <option value="low">{tk.priority.low}</option>
-                <option value="medium">{tk.priority.medium}</option>
-                <option value="high">{tk.priority.high}</option>
-              </select>
+              <Select
+                size="md"
+                ariaLabel={tk.priorityField}
+                value={form.priority || 'low'}
+                onChange={(v) => setForm({ ...form, priority: v as TicketPriority })}
+                options={[
+                  { value: 'low', label: tk.priority.low },
+                  { value: 'medium', label: tk.priority.medium },
+                  { value: 'high', label: tk.priority.high },
+                ]}
+              />
             </div>
           </div>