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

feat: enhance online booking toggle UI and improve booking window controls

Browse Source
This commit is contained in:
hamed
2026-06-19 21:16:51 +03:30
parent 0624a08e62
commit 6fc456522a
1 changed files with 47 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/DoctorDetailPage.tsx
+47 -32
View File
@@ -12,7 +12,7 @@ import {
BuildingOfficeIcon, MapPinIcon, AcademicCapIcon, UserIcon, BuildingOfficeIcon, MapPinIcon, AcademicCapIcon, UserIcon,
PlusIcon, CameraIcon, ChevronDownIcon, ChevronRightIcon, ChevronLeftIcon, PlusIcon, CameraIcon, ChevronDownIcon, ChevronRightIcon, ChevronLeftIcon,
CheckCircleIcon, XMarkIcon, ExclamationTriangleIcon, CheckCircleIcon, XMarkIcon, ExclamationTriangleIcon,
HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon, HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon, GlobeAltIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { StarIcon as StarSolid } from '@heroicons/react/24/solid'; import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
import { toast } from 'sonner'; import { toast } from 'sonner';
@@ -1312,39 +1312,54 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
)} )}
{/* ─ نوبت‌دهی آنلاین */} {/* ─ نوبت‌دهی آنلاین */}
<div className="mb-3 p-3 rounded-xl border border-slate-200 dark:border-gray-700 space-y-3"> <div className="mb-3 rounded-xl border border-slate-200 dark:border-gray-700 overflow-hidden">
<label className="flex items-center justify-between gap-3 cursor-pointer"> {/* header + toggle */}
<span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span> <label className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer bg-slate-50 dark:bg-gray-800/50">
<input <div className="flex items-center gap-2">
type="checkbox" <GlobeAltIcon className="w-4 h-4 text-slate-500 dark:text-slate-400 shrink-0" />
checked={meta.online_booking_enabled} <span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))} </div>
/> <span className="relative inline-flex shrink-0">
<input
type="checkbox"
className="peer sr-only"
checked={meta.online_booking_enabled}
onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))}
/>
<span className="w-10 h-6 rounded-full bg-slate-300 dark:bg-gray-600 transition-colors peer-checked:bg-emerald-500" />
<span className="absolute top-0.5 right-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform peer-checked:-translate-x-4" />
</span>
</label> </label>
<div className="flex items-center gap-2">
<span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span> {/* booking window control */}
<input <div className={`px-4 py-3 transition-opacity ${meta.online_booking_enabled ? '' : 'opacity-50 pointer-events-none'}`}>
type="number" <div className="flex flex-wrap items-center gap-2">
min={1} <span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
value={meta.booking_window_value} <div className="flex items-stretch rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900">
disabled={!meta.online_booking_enabled} <input
onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))} type="number"
className="input w-16 text-center" min={1}
/> value={meta.booking_window_value}
<select disabled={!meta.online_booking_enabled}
value={meta.booking_window_unit} onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
disabled={!meta.online_booking_enabled} className="w-14 text-center text-sm bg-transparent border-0 focus:outline-none focus:ring-0 px-2 py-1.5"
onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))} />
className="input" <select
> value={meta.booking_window_unit}
<option value="week">هفته</option> disabled={!meta.online_booking_enabled}
<option value="month">ماه</option> onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
</select> 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"
<span className="text-sm text-slate-600 dark:text-slate-400">آینده</span> >
<option value="week">هفته</option>
<option value="month">ماه</option>
</select>
</div>
<span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
</div>
<p className="text-xs text-slate-400 dark:text-slate-500 mt-2 leading-relaxed">
بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
</p>
</div> </div>
<p className="text-xs text-slate-400 dark:text-slate-500">
بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
</p>
</div> </div>
{SCHEDULE_DAYS.map(day => { {SCHEDULE_DAYS.map(day => {