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

@@ -13,6 +13,7 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Modal from '../components/ui/Modal';
+import Switch from '../components/ui/Switch';
 
 const DEFAULT_PERMISSIONS: SecretaryPermissions = {
   appointments: { view: true, create: false, cancel: false, update_status: false },
@@ -208,13 +209,14 @@ function PermissionsMatrix({
                     return <td key={action} style={{ textAlign: 'center', color: 'var(--border)' }}>—</td>;
                   }
                   return (
-                    <td key={action} style={{ textAlign: 'center' }}>
-                      <input
-                        type="checkbox"
-                        checked={sectionPerms[action] ?? false}
-                        onChange={() => toggle(section, action)}
-                        style={{ width: 16, height: 16, accentColor: 'var(--primary)', cursor: 'pointer' }}
-                      />
+                    <td key={action}>
+                      <div style={{ display: 'flex', justifyContent: 'center' }}>
+                        <Switch
+                          checked={sectionPerms[action] ?? false}
+                          onChange={() => toggle(section, action)}
+                          ariaLabel={`${section} — ${action}`}
+                        />
+                      </div>
                     </td>
                   );
                 })}