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/pages/ClinicServicesPage.tsx

@@ -22,6 +22,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
 import ServiceItemFormModal from '../components/ServiceItemFormModal';
 import FeatureGate from '../components/ui/FeatureGate';
+import Switch from '../components/ui/Switch';
 
 const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
 type SectionForm = z.infer<typeof sectionSchema>;
@@ -172,10 +173,11 @@ function ClinicServicesPageInner() {
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0' }} onClick={(e) => e.stopPropagation()}>
                     <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>وضعیت:</span>
                     <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <label className="switch" title={s.active ? 'فعال' : 'غیرفعال'}>
-                        <input type="checkbox" checked={s.active} onChange={() => toggleSection.mutate({ uuid: s.uuid, active: !s.active })} />
-                        <span className="switch-track"><span className="switch-thumb" /></span>
-                      </label>
+                      <Switch
+                        checked={s.active}
+                        onChange={() => toggleSection.mutate({ uuid: s.uuid, active: !s.active })}
+                        ariaLabel={`وضعیت ${s.name}`}
+                      />
                       <span style={{ fontSize: 12.5, color: s.active ? 'var(--success)' : 'var(--text-3)' }}>{s.active ? 'فعال' : 'غیرفعال'}</span>
                     </span>
                   </div>