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

@@ -20,6 +20,7 @@ import SlotPicker, { type PickedSlot } from '../components/appointments/SlotPick
 import { tehranWallClockToUnix, rialToToman, tomanToRial } from '../lib/utils';
 import BackButton from '../components/ui/BackButton';
 import { digitsOnly, todayIso } from '../lib/utils';
+import Switch from '../components/ui/Switch';
 
 /**
  * افزودن نوبت — صفحهٔ کامل (بازسازی `CreateTurn.jsx` طرح tauri). از همان endpointهای
@@ -611,20 +612,12 @@ export default function AppointmentCreatePage() {
 
         {/* بیعانه */}
         <div style={sectionTitle}>بیعانه</div>
-        <label style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14, cursor: 'pointer' }}>
-          <span style={{
-            position: 'relative', width: 42, height: 22, borderRadius: 999, flexShrink: 0,
-            background: depositRequired ? 'var(--primary)' : 'var(--border-2)', transition: 'background .2s',
-          }}>
-            <input type="checkbox" checked={depositRequired} onChange={e => setDepositRequired(e.target.checked)}
-              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', margin: 0, opacity: 0, cursor: 'pointer' }} />
-            <span style={{
-              position: 'absolute', top: 2, insetInlineStart: depositRequired ? 22 : 2, width: 18, height: 18,
-              borderRadius: 999, background: 'var(--surface)', transition: 'inset-inline-start .2s', boxShadow: '0 1px 2px rgba(0,0,0,.2)',
-            }} />
-          </span>
-          بیعانه مورد نیاز است.
-        </label>
+        <Switch
+          inline
+          checked={depositRequired}
+          onChange={setDepositRequired}
+          label="بیعانه مورد نیاز است."
+        />
         {depositRequired && (
           <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 12, margin: '12px 0' }}>
             <div style={{ width: 300, maxWidth: '100%' }}>