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

@@ -15,6 +15,7 @@ import { useServiceCategories } from '../hooks/useServiceCategories';
 import Modal from './ui/Modal';
 import PriceInput from './ui/PriceInput';
 import SearchableSelect from './ui/SearchableSelect';
+import Switch from './ui/Switch';
 
 const itemSchema = z.object({
   name:             z.string().min(1, 'نام سرویس الزامی است'),
@@ -238,17 +239,14 @@ export default function ServiceItemFormModal({ item, sectionUuid, onClose, onMan
                 <input {...numericField(form.register('duration_minutes'))} placeholder="مثلاً: 50" />
               </div>
             </div>
-            <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '9px 0' }}>
-              <span className="switch">
-                <input
-                  type="checkbox"
-                  checked={form.watch('bookable') ?? false}
-                  onChange={(e) => form.setValue('bookable', e.target.checked)}
-                />
-                <span className="switch-track"><span className="switch-thumb" /></span>
-              </span>
-              <span style={{ fontSize: 13 }}>نمایش در نوبت‌دهی</span>
-            </label>
+            <div style={{ padding: '9px 0' }}>
+              <Switch
+                inline
+                checked={form.watch('bookable') ?? false}
+                onChange={(v) => form.setValue('bookable', v, { shouldDirty: true })}
+                label="نمایش در نوبت‌دهی"
+              />
+            </div>
           </div>
 
           <div>