Replace native selects with NovaSelect

resources/js/Pages/Moderation/AiBiographyAdmin.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Head, Link, router, usePage } from '@inertiajs/react'
+import NovaSelect from '../../components/ui/NovaSelect'
 
 function getCsrfToken() {
   if (typeof document === 'undefined') return ''
@@ -188,18 +189,16 @@ export default function AiBiographyAdmin() {
           </label>
 
           {['status', 'scope', 'tier', 'visibility', 'review'].map((key) => (
-            <label key={key} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
+            <div key={key} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-slate-300">
               <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">{key.replace('_', ' ')}</div>
-              <select
+              <NovaSelect
                 value={filters[key] || 'all'}
-                onChange={(event) => updateFilter(key, event.target.value)}
-                className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none"
-              >
-                {(filterOptions[key] || []).map((option) => (
-                  <option key={`${key}-${option.value}`} value={option.value}>{option.label}</option>
-                ))}
-              </select>
-            </label>
+                onChange={(value) => updateFilter(key, value)}
+                className="mt-2"
+                options={(filterOptions[key] || []).map((option) => ({ value: option.value, label: option.label }))}
+                searchable={false}
+              />
+            </div>
           ))}
 
           <div className="lg:col-span-full flex flex-wrap gap-3">