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

@@ -26,6 +26,7 @@ import NotificationMobileCard from '../components/ui/NotificationMobileCard';
 import ClinicDoctorsManager from '../components/ClinicDoctorsManager';
 import { useAuthStore } from '../stores/authStore';
 import { latinDigitsField } from '../lib/forms';
+import Switch from '../components/ui/Switch';
 
 // Fix leaflet icons
 delete (L.Icon.Default.prototype as any)._getIconUrl;
@@ -107,10 +108,9 @@ function MultiCheckList({ options, selected, onChange, placeholder }: {
         {filtered.length === 0
           ? <p style={{ textAlign: 'center', padding: '10px 0', fontSize: 12, color: 'var(--text-3)' }}>نتیجه‌ای یافت نشد</p>
           : filtered.map(o => (
-            <label key={o.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', cursor: 'pointer' }}>
-              <input type="checkbox" checked={selected.includes(o.id)} onChange={() => toggle(o.id)} />
-              <span style={{ fontSize: 13, color: 'var(--text)' }}>{o.name}</span>
-            </label>
+            <div key={o.id} style={{ padding: '7px 12px' }}>
+              <Switch inline checked={selected.includes(o.id)} onChange={() => toggle(o.id)} label={o.name} />
+            </div>
           ))}
       </div>
     </div>
@@ -281,10 +281,12 @@ function EditModal({ clinic, onClose, onSaved }: {
                   <label style={{ fontSize: 13, fontWeight: 600, display: 'block', marginBottom: 6 }}>توضیحات</label>
                   <textarea className="input" rows={3} style={{ resize: 'vertical' }} {...register('info')} />
                 </div>
-                <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none' }}>
-                  <input type="checkbox" {...register('is_247')} />
-                  <span style={{ fontSize: 13, fontWeight: 600 }}>کلینیک ۲۴ ساعته (۷ روز هفته)</span>
-                </label>
+                <Switch
+                  inline
+                  checked={watch('is_247') ?? false}
+                  onChange={(v) => setValue('is_247', v, { shouldDirty: true })}
+                  label="کلینیک ۲۴ ساعته (۷ روز هفته)"
+                />
               </>
             )}