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/PatientDetailPage.tsx

@@ -22,6 +22,8 @@ import Modal from '../components/ui/Modal';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import PersianDateInput from '../components/ui/PersianDateInput';
 import PatientCaseBanner, { Breadcrumb } from '../components/PatientCaseBanner';
+import TourButton from '../components/ui/TourButton';
+import { useTour } from '../hooks/useTour';
 import SessionServiceCard, { type SessionCardData } from '../components/SessionServiceCard';
 import { useIssueInvoice } from '../hooks/useIssueInvoice';
 import AppointmentTurnCard, { type AppointmentCardData } from '../components/AppointmentTurnCard';
@@ -200,10 +202,16 @@ export default function PatientDetailPage() {
     .filter((a: any) => (a.starts_at ?? 0) >= nowSec && !String(a.status).startsWith('cancelled'))
     .sort((a: any, b: any) => a.starts_at - b.starts_at)[0]?.starts_at ?? null;
 
+  useTour('patient-detail', { ready: !isLoading });
+
   return (
     <div className="fade-in">
       {/* breadcrumb + patient banner (tauri BreadcrumbHeader + FileServicesHeader) */}
-      <Breadcrumb name={record?.user_name || 'پرونده'} backTo="/admin/patients" />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }} data-tour="page-title">
+        <Breadcrumb name={record?.user_name || 'پرونده'} backTo="/admin/patients" />
+        <TourButton tourId="patient-detail" />
+      </div>
+      <div data-tour="patient-banner">
       <PatientCaseBanner
         name={record?.user_name || 'پرونده'}
         recordNumber={record?.record_number}
@@ -215,9 +223,10 @@ export default function PatientDetailPage() {
         hasDebt={hasDebt}
         onAddNote={() => setTab('notes')}
       />
+      </div>
 
       {/* tab bar */}
-      <div style={{ display: 'flex', gap: 4, overflowX: 'auto', borderBottom: '1px solid var(--border)', marginBottom: 18 }}>
+      <div data-tour="patient-tabs" style={{ display: 'flex', gap: 4, overflowX: 'auto', borderBottom: '1px solid var(--border)', marginBottom: 18 }}>
         {TABS.map((t) => {
           const on = t.key === tab;
           return (