feat: replace checkboxes with Switch component for better UI consistency

- Updated DoctorDetailPage, MySecretariesPage, RecordNumberSettingsPage, RepresentationsPage, ResourcePoolsPage, ResourceTypesPage, SecretariesPage, SecretaryDetailPage, SettingsPage, SkillsPage, SmsWalletPage, and TagsSettingsPage to use the new Switch component instead of native checkboxes.
- Enhanced accessibility by ensuring the Switch component uses appropriate roles and labels.
- Added tests for the new Switch component to ensure functionality and accessibility compliance.
- Updated styles to accommodate the new Switch component design.

assets/admin/components/ui/DoctorPermissionsModal.tsx

@@ -4,6 +4,7 @@ import { toast } from 'sonner';
 import { api } from '../../lib/api';
 import type { ApiResponse } from '../../lib/api';
 import Modal from './Modal';
+import Switch from './Switch';
 
 /** envelope کامل — همان چیزی که بک‌اند برمی‌گرداند، بدون flatten. */
 export interface PermissionEnvelope {
@@ -146,15 +147,14 @@ export default function DoctorPermissionsModal({ clinicUuid, doctorUuid, doctorN
         <p className="muted">در حال بارگذاری...</p>
       ) : (
         <>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
-            <input
-              type="checkbox"
+          <div style={{ marginBottom: 14 }}>
+            <Switch
               checked={active}
-              onChange={() => setActive(v => !v)}
-              style={{ width: 16, height: 16, accentColor: 'var(--primary)', cursor: 'pointer' }}
+              onChange={setActive}
+              label="دسترسی این پزشک به کلینیک فعال باشد"
+              hint="خاموش‌کردنش کل جدول زیر را بی‌اثر می‌کند."
             />
-            <span>دسترسی این پزشک به کلینیک فعال باشد</span>
-          </label>
+          </div>
 
           <div style={{ overflowX: 'auto' }}>
             <table className="t">
@@ -177,14 +177,17 @@ export default function DoctorPermissionsModal({ clinicUuid, doctorUuid, doctorN
                           return <td key={action} style={{ textAlign: 'center', color: 'var(--border)' }}>—</td>;
                         }
                         return (
-                          <td key={action} style={{ textAlign: 'center' }}>
-                            <input
-                              type="checkbox"
-                              disabled={!active}
-                              checked={resources[resource]?.[action] ?? false}
-                              onChange={() => toggle(resource, action)}
-                              style={{ width: 16, height: 16, accentColor: 'var(--primary)', cursor: 'pointer' }}
-                            />
+                          <td key={action}>
+                            {/* سوییچ در سلول جدول: بدون برچسبِ دیداری، پس نامِ
+                                دسترسی‌پذیر از ترکیب بخش و ستون ساخته می‌شود. */}
+                            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                              <Switch
+                                disabled={!active}
+                                checked={resources[resource]?.[action] ?? false}
+                                onChange={() => toggle(resource, action)}
+                                ariaLabel={`${config.label} — ${ACTION_HEADERS[ACTION_COLUMNS.indexOf(action)]}`}
+                              />
+                            </div>
                           </td>
                         );
                       })}