feat(tour): add onboarding tours for various admin pages

- Integrated TourButton component into SettingsMenuPage, SkillsPage, SmsWalletPage, StaffPage, StaffSessionDetailPage, StaffTreatmentSessionsPage, SubscriptionPage, TagsSettingsPage, TreatmentCasesPage to enhance user onboarding experience.
- Created new tour definitions for appointments, clinics, staff management, financial management, and patient management, ensuring comprehensive guidance for users navigating the admin panel.
- Updated documentation to reflect the addition of tours and their implementation details.

assets/admin/pages/AppointmentDetailPage.tsx

@@ -106,6 +106,8 @@ export default function AppointmentDetailPage() {
       <PageHeader
         backTo="/admin/appointments"
         title="جزئیات نوبت"
+        tourId="appointment-detail"
+        tourReady={!isLoading}
         breadcrumbs={[
           { label: 'داشبورد', to: '/admin/dashboard' },
           { label: 'نوبت‌ها', to: backTo },
@@ -122,7 +124,7 @@ export default function AppointmentDetailPage() {
       ) : appt ? (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6">
-            <h3 className="font-semibold text-[var(--text)] mb-4">اطلاعات بیمار</h3>
+            <h3 className="font-semibold text-[var(--text)] mb-4" data-tour="appt-patient">اطلاعات بیمار</h3>
             <InfoRow label="نام بیمار" value={appt.patient_name} />
             <InfoRow label="موبایل" value={<span dir="ltr">{appt.patient_mobile}</span>} />
             <InfoRow label="پزشک" value={appt.doctor?.name ?? null} />
@@ -139,7 +141,7 @@ export default function AppointmentDetailPage() {
           <AppointmentSegmentsCard appointmentUuid={appt.uuid} />
 
           <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6">
-            <h3 className="font-semibold text-[var(--text)] mb-4">وضعیت و اقدامات</h3>
+            <h3 className="font-semibold text-[var(--text)] mb-4" data-tour="appt-status">وضعیت و اقدامات</h3>
             <div className="mb-4">
               <p className="text-sm text-[var(--text-2)] mb-2">وضعیت فعلی:</p>
               <StatusBadge type="appointment" value={appt.status} />
@@ -198,7 +200,7 @@ export default function AppointmentDetailPage() {
           </div>
 
           <div className="bg-[var(--surface)] rounded-2xl border border-[var(--border)] shadow-sm p-6 lg:col-span-2">
-            <h3 className="font-semibold text-[var(--text)] mb-4">تاریخچه رویدادها</h3>
+            <h3 className="font-semibold text-[var(--text)] mb-4" data-tour="appt-events">تاریخچه رویدادها</h3>
             {eventsQuery.isLoading ? (
               <div className="h-6 w-40 rounded skeleton" />
             ) : events.length === 0 ? (