feat: enhance admin and contact components with new functionality

- Updated `AdminPage` to conditionally display duty reassignment instructions based on visible groups, improving user guidance.
- Refactored `AdminDutyList` to streamline the display of duties, enhancing visual clarity and organization.
- Introduced `openPhoneLink` and `triggerHapticLight` functions in `ContactLinks` for improved phone link interaction and haptic feedback.
- Added unit tests for `openPhoneLink` to ensure correct functionality and handling of various phone number formats.
- Enhanced existing tests for `ContactLinks` to verify new phone link behavior, ensuring robust testing coverage.

webapp-next/src/components/contact/ContactLinks.tsx

@@ -7,6 +7,8 @@
 
 import { useTranslation } from "@/i18n/use-translation";
 import { formatPhoneDisplay } from "@/lib/phone-format";
+import { openPhoneLink } from "@/lib/open-phone-link";
+import { triggerHapticLight } from "@/lib/telegram-haptic";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Phone as PhoneIcon, Send as TelegramIcon } from "lucide-react";
@@ -43,6 +45,12 @@ export function ContactLinks({
 
   if (!hasPhone && !hasUsername) return null;
 
+  const handlePhoneClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    openPhoneLink(phone ?? undefined);
+    triggerHapticLight();
+  };
+
   const ariaCall = contextLabel
     ? t("contact.aria_call", { name: contextLabel })
     : t("contact.phone");
@@ -60,7 +68,11 @@ export function ContactLinks({
             className="h-12 justify-start gap-3 px-4 text-accent hover:bg-accent/10 hover:text-accent"
             asChild
           >
-            <a href={`tel:${String(phone).trim()}`} aria-label={ariaCall}>
+            <a
+              href={`tel:${String(phone).trim()}`}
+              aria-label={ariaCall}
+              onClick={handlePhoneClick}
+            >
               <PhoneIcon className="size-5" aria-hidden />
               <span>{formatPhoneDisplay(phone!)}</span>
             </a>
@@ -99,6 +111,7 @@ export function ContactLinks({
             href={`tel:${String(phone).trim()}`}
             className={linkClass}
             aria-label={ariaCall}
+            onClick={handlePhoneClick}
           >
             {displayPhone}
           </a>
@@ -109,6 +122,7 @@ export function ContactLinks({
           href={`tel:${String(phone).trim()}`}
           className={linkClass}
           aria-label={ariaCall}
+          onClick={handlePhoneClick}
         >
           {displayPhone}
         </a>