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

@@ -11,6 +11,7 @@ import { formatDate, digitsOnly, IRAN_MOBILE_RE, IRAN_NATIONAL_CODE_RE } from ".
 import { useSubscription } from "../hooks/useSubscription";
 import { useAuthStore } from "../stores/authStore";
 import type { Secretary, SecretaryPermissions } from "../types";
+import Switch from '../components/ui/Switch';
 
 // ── SVG icons (copied verbatim from clinic-pro-tauri) ───────────────────────
 
@@ -298,15 +299,11 @@ function PermissionAccordions({
                                                 key={item.key}
                                                 className="flex items-center gap-[11px] cursor-pointer py-[9px] min-h-[42px]"
                                             >
-                                                <input
-                                                    type="checkbox"
+                                                <Switch
                                                     checked={sectionPerm?.[item.key] ?? false}
                                                     disabled={disabled}
-                                                    onChange={(e) =>
-                                                        onChange(section.key, item.key, e.target.checked)
-                                                    }
-                                                    className="w-[20px] h-[20px] shrink-0"
-                                                    style={{ accentColor: "var(--primary)", cursor: "pointer" }}
+                                                    onChange={(v) => onChange(section.key, item.key, v)}
+                                                    ariaLabel={item.label}
                                                 />
                                                 <span className="text-[var(--text-2)] text-[14px]">
                                                     {item.label}
@@ -872,12 +869,7 @@ function DoctorMultiSelect({
                                     (checked ? "bg-[var(--primary-soft)] dark:bg-[var(--surface-3)]" : "hover:bg-[var(--surface)] dark:hover:bg-[var(--surface-2)]")
                                 }
                             >
-                                <input
-                                    type="checkbox"
-                                    className="accent-[var(--primary)] w-[16px] h-[16px]"
-                                    checked={checked}
-                                    onChange={() => toggle(d.uuid)}
-                                />
+                                <Switch checked={checked} onChange={() => toggle(d.uuid)} ariaLabel={d.name} />
                                 <Avatar name={d.name} size={26} />
                                 <span className="text-[13px] text-[var(--text)]">{d.name}</span>
                             </label>