From 7e5d91019766e7c0f2258827766bb81788323987 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Mon, 20 Apr 2026 09:56:35 +0530
Subject: [PATCH] feat: network loss alert banner during active call (#572)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows prominent banner on active-call-card when network drops:
- Offline: red banner "Network connection lost — call may have dropped"
- Unstable: yellow banner "Network unstable — call quality may be affected"
Uses existing useNetworkStatus hook. Banner disappears when network recovers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/call-desk/active-call-card.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/call-desk/active-call-card.tsx b/src/components/call-desk/active-call-card.tsx
index 7d82ea8..145c7fb 100644
--- a/src/components/call-desk/active-call-card.tsx
+++ b/src/components/call-desk/active-call-card.tsx
@@ -22,6 +22,7 @@ import { formatPhone, formatShortDate } from '@/lib/format';
 import { apiClient } from '@/lib/api-client';
 import { useAuth } from '@/providers/auth-provider';
 import { useAgentState } from '@/hooks/use-agent-state';
+import { useNetworkStatus } from '@/hooks/use-network-status';
 import { cx } from '@/utils/cx';
 import { notify } from '@/lib/toast';
 import type { Lead, CallDisposition } from '@/types/entities';
@@ -42,6 +43,7 @@ const formatDuration = (seconds: number): string => {
 export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete }: ActiveCallCardProps) => {
     const { user } = useAuth();
     const { callState, callDuration, callUcid, isMuted, isOnHold, answer, hangup, toggleMute, toggleHold } = useSip();
+    const networkQuality = useNetworkStatus();
     const setCallState = useSetAtom(sipCallStateAtom);
     const setCallerNumber = useSetAtom(sipCallerNumberAtom);
     const setCallUcid = useSetAtom(sipCallUcidAtom);
@@ -277,6 +279,20 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
         return (
             <>
                 <div className={cx('flex flex-col rounded-xl border border-brand bg-primary overflow-hidden', (appointmentOpen || enquiryOpen || transferOpen) && 'flex-1 min-h-0')}>
+                    {/* Network loss alert — prominent banner during active call */}
+                    {networkQuality !== 'good' && (
+                        <div className={cx(
+                            'shrink-0 px-4 py-2 text-xs font-medium text-center',
+                            networkQuality === 'offline'
+                                ? 'bg-error-solid text-white'
+                                : 'bg-warning-secondary text-warning-primary',
+                        )}>
+                            {networkQuality === 'offline'
+                                ? 'Network connection lost — call may have dropped'
+                                : 'Network unstable — call quality may be affected'}
+                        </div>
+                    )}
+
                     {/* Pinned: caller info + controls */}
                     <div className="shrink-0 p-4">
                         <div className="flex items-center justify-between">