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/components/ui/PageHeader.tsx

@@ -21,9 +21,14 @@ interface Props {
   backTo?: string;
   /** شناسهٔ تور راهنمای این صفحه؛ اگر در registry ثبت نشده باشد دکمه‌ای نمی‌آید. */
   tourId?: string;
+  /**
+   * محتوای صفحه نشسته است و تورِ بار اول می‌تواند خودکار اجرا شود.
+   * صفحه‌ای که داده‌اش دیر می‌آید، `!isLoading` بدهد تا تور روی صفحهٔ نیمه‌ساخته نیفتد.
+   */
+  tourReady?: boolean;
 }
 
-export default function PageHeader({ title, breadcrumbs, action, description, backTo, tourId }: Props) {
+export default function PageHeader({ title, breadcrumbs, action, description, backTo, tourId, tourReady = true }: Props) {
   return (
     <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
       <div style={{ minWidth: 0 }}>
@@ -51,15 +56,15 @@ export default function PageHeader({ title, breadcrumbs, action, description, ba
             ))}
           </nav>
         )}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }} data-tour="page-title">
           <h1 className="section-title">{title}</h1>
-          <TourButton tourId={tourId} />
+          <TourButton tourId={tourId} ready={tourReady} />
         </div>
         {description && (
           <p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
         )}
       </div>
-      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
+      {action && <div style={{ flexShrink: 0 }} data-tour="page-action">{action}</div>}
     </div>
   );
 }