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

@@ -4,6 +4,7 @@ import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import { usePermissions } from '../hooks/usePermissions';
+import Switch from './ui/Switch';
 
 interface ServiceCategoryRow {
   key: string;
@@ -70,22 +71,14 @@ export default function InsuranceServiceCategoriesCard() {
 
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: 18 }}>
         {rows.map((row) => (
-          <label
+          <Switch
             key={row.key}
-            style={{ display: 'inline-flex', alignItems: 'center', gap: 10, cursor: canUpdate ? 'pointer' : 'default' }}
-          >
-            <span className="switch">
-              <input
-                type="checkbox"
-                aria-label={row.label}
-                checked={row.enabled}
-                disabled={!canUpdate || save.isPending}
-                onChange={() => toggle(row.key)}
-              />
-              <span className="switch-track"><span className="switch-thumb" /></span>
-            </span>
-            <span style={{ fontSize: 13 }}>{row.label}</span>
-          </label>
+            inline
+            checked={row.enabled}
+            disabled={!canUpdate || save.isPending}
+            onChange={() => toggle(row.key)}
+            label={row.label}
+          />
         ))}
       </div>
     </div>