hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace all native <select> elements in the admin panel with SearchableSelect for a consistent UI experience. This change enhances accessibility, supports RTL and dark mode, and improves the overall design by utilizing a common component. The updates include adjustments to state management and event handling to ensure seamless integration with existing functionality across various pages and components.

Browse Source
This commit is contained in:
hamed
2026-07-16 08:56:59 +03:30
parent 7b8a5c2775
commit b1b99903ec
21 changed files with 571 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/DoctorDetailPage.tsx
+27 -19
View File
@@ -1053,15 +1053,23 @@ function TimeSelect({ value, onChange }: { value: string; onChange: (v: string)
return (
<div className="cp-time-select" style={{ display: 'flex', alignItems: 'center', gap: 6 }} dir="ltr">
<select className="cp-input" style={{ height: 38, width: 72, textAlign: 'center' }}
value={h} onChange={e => onChange(`${e.target.value}:${m}`)}>
{HOUR_VALUES.map(hv => <option key={hv} value={hv}>{hv}</option>)}
</select>
<div style={{ width: 92 }}>
<GlobalSearchableSelect
options={HOUR_VALUES.map(hv => ({ value: hv, label: hv }))}
value={h}
onChange={v => onChange(`${v ? String(v) : h}:${m}`)}
height={38}
/>
</div>
<span style={{ fontWeight: 700, color: 'var(--text-2)' }}>:</span>
<select className="cp-input" style={{ height: 38, width: 72, textAlign: 'center' }}
value={m} onChange={e => onChange(`${h}:${e.target.value}`)}>
{MINUTE_VALUES.map(mv => <option key={mv} value={mv}>{mv}</option>)}
</select>
<div style={{ width: 92 }}>
<GlobalSearchableSelect
options={MINUTE_VALUES.map(mv => ({ value: mv, label: mv }))}
value={m}
onChange={v => onChange(`${h}:${v ? String(v) : m}`)}
height={38}
/>
</div>
</div>
);
}
@@ -1494,24 +1502,24 @@ export function WeeklyScheduleTab({ doctorUuid, addresses, readOnly = false }: {
<div className={`px-4 py-3 transition-opacity ${meta.online_booking_enabled ? '' : 'opacity-50 pointer-events-none'}`}>
<div className="flex flex-wrap items-center gap-2">
<span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
<div className="flex items-stretch rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900">
<div className="flex items-stretch gap-2">
<input
type="number"
min={1}
value={meta.booking_window_value}
disabled={!meta.online_booking_enabled}
onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
className="w-14 text-center text-sm bg-transparent border-0 focus:outline-none focus:ring-0 px-2 py-1.5"
className="w-14 text-center text-sm rounded-lg border border-slate-200 dark:border-gray-700 bg-white dark:bg-gray-900 focus:outline-none focus:ring-0 px-2 py-1.5"
/>
<select
value={meta.booking_window_unit}
disabled={!meta.online_booking_enabled}
onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
className="text-sm bg-slate-50 dark:bg-gray-800 border-0 border-r border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-0 px-2 py-1.5"
>
<option value="week">هفته</option>
<option value="month">ماه</option>
</select>
<div style={{ width: 110 }}>
<GlobalSearchableSelect
options={[{ value: 'week', label: 'هفته' }, { value: 'month', label: 'ماه' }]}
value={meta.booking_window_unit}
onChange={(v) => setMeta(m => ({ ...m, booking_window_unit: (v as 'week' | 'month') }))}
isDisabled={!meta.online_booking_enabled}
height={38}
/>
</div>
</div>
<span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
</div>