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,
PlusIcon, CameraIcon, ChevronDownIcon, ChevronRightIcon, ChevronLeftIcon,
CheckCircleIcon, XMarkIcon, ExclamationTriangleIcon,
HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon,
HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon, GlobeAltIcon,
} from '@heroicons/react/24/outline';
import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
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">
<label className="flex items-center justify-between gap-3 cursor-pointer">
<span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
<input
type="checkbox"
checked={meta.online_booking_enabled}
onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))}
/>
<div className="mb-3 rounded-xl border border-slate-200 dark:border-gray-700 overflow-hidden">
{/* header + toggle */}
<label className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer bg-slate-50 dark:bg-gray-800/50">
<div className="flex items-center gap-2">
<GlobeAltIcon className="w-4 h-4 text-slate-500 dark:text-slate-400 shrink-0" />
<span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
</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>
<div className="flex items-center gap-2">
<span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
<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="input w-16 text-center"
/>
<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="input"
>
<option value="week">هفته</option>
<option value="month">ماه</option>
</select>
<span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
{/* booking window control */}
<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">
<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"
/>
<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>
<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>
<p className="text-xs text-slate-400 dark:text-slate-500">
بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
</p>
</div>
{SCHEDULE_DAYS.map(day => {