fix: clean outbound call gating — confirmedAnswered state with 3s debounce (#568)

Replace layered customerAnswered/wasAnsweredRef with clean two-concern
design:

- customerAnswered: live derived value (is customer on line right now?)
- confirmedAnswered: latched state (did real conversation happen?)
  Inbound: immediate. Outbound: 3s debounce filters voicemail.
  Never resets until handleReset — survives acw→ended timing gap.

Buttons use confirmedAnswered for outbound (no flash during voicemail),
customerAnswered for inbound (immediate). Disposition routing uses
confirmedAnswered for both directions.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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';
@@ -41,7 +42,8 @@ const formatDuration = (seconds: number): string => {
 
 export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete }: ActiveCallCardProps) => {
     const { user } = useAuth();
-    const { callState, callDuration, callUcid, isMuted, isOnHold, answer, reject, hangup, toggleMute, toggleHold } = useSip();
+    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);
@@ -71,7 +73,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
     // Upcoming appointments for this caller (if returning patient) — drives
     // the pill row above AppointmentForm so the agent can edit existing
     // bookings in addition to creating new ones.
-    const { appointments } = useData();
+    const { appointments, refresh } = useData();
     const leadAppointments = useMemo(() => {
         const patientId = (lead as any)?.patientId;
         if (!patientId) return [];
@@ -103,10 +105,44 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
 
     const agentConfig = localStorage.getItem('helix_agent_config');
     const agentIdForState = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
-    const { supervisorPresence } = useAgentState(agentIdForState);
-
+    const { state: ozonetelState, supervisorPresence } = useAgentState(agentIdForState);
     const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND');
-    const wasAnsweredRef = useRef(callState === 'active');
+    const isOutbound = callDirectionRef.current === 'OUTBOUND';
+
+    // customerAnswered — live signal (is customer on the line RIGHT NOW?)
+    const customerAnswered = callState === 'active' && (!isOutbound || ozonetelState === 'in-call');
+
+    // confirmedAnswered — latched state (did a real conversation happen?)
+    // Inbound: set true on active (immediate). Outbound: set true after
+    // in-call holds 5+ seconds (filters voicemail). Never resets — survives
+    // the acw→ended timing gap. Used for disposition routing AND outbound
+    // button gating.
+    const [confirmedAnswered, setConfirmedAnswered] = useState(false);
+    const unansweredDisposeFired = useRef(false);
+
+    useEffect(() => {
+        if (!isOutbound && callState === 'active') {
+            setConfirmedAnswered(true);
+        }
+    }, [callState, isOutbound]);
+
+    useEffect(() => {
+        if (isOutbound && customerAnswered && !confirmedAnswered) {
+            const timer = setTimeout(() => {
+                console.log(`[CALL-DBG] ▶ Outbound debounce passed — customer confirmed answered`);
+                setConfirmedAnswered(true);
+            }, 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [customerAnswered, isOutbound, confirmedAnswered]);
+
+    // Button gating: inbound uses live signal, outbound uses debounced latch
+    const buttonsEnabled = isOutbound ? confirmedAnswered : customerAnswered;
+
+    // ── DEBUG: trace every state change ──
+    useEffect(() => {
+        console.log(`[CALL-DBG] callState=${callState} ozonetel=${ozonetelState} direction=${callDirectionRef.current} isOutbound=${isOutbound} customerAnswered=${customerAnswered} confirmedAnswered=${confirmedAnswered} buttonsEnabled=${buttonsEnabled}`);
+    }, [callState, ozonetelState, isOutbound, customerAnswered, confirmedAnswered, buttonsEnabled]);
 
     useEffect(() => {
         console.log(`[ACTIVE-CALL-CARD] Mounted: state=${callState} direction=${callDirectionRef.current} ucid=${callUcid ?? 'none'} lead=${lead?.id ?? 'none'} phone=${callerPhone}`);
@@ -124,13 +160,16 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
         };
     }, [callUcid]);
 
-    // Detect caller disconnect: call was active and ended without agent pressing End
+    // Detect caller disconnect: call ended without agent pressing End.
+    // Uses confirmedAnsweredRef (stable latch) — not the live customerAnswered.
     useEffect(() => {
-        if (wasAnsweredRef.current && !dispositionOpen && (callState === 'ended' || callState === 'failed')) {
+        if (!(callState === 'ended' || callState === 'failed') || dispositionOpen) return;
+        console.log(`[CALL-DBG] ▶ CALL ENDED: confirmedAnswered=${confirmedAnswered} isOutbound=${isOutbound} customerAnswered=${customerAnswered} callState=${callState}`);
+        if (confirmedAnswered) {
             setCallerDisconnected(true);
             setDispositionOpen(true);
         }
-    }, [callState, dispositionOpen]);
+    }, [callState, dispositionOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const firstName = lead?.contactName?.firstName ?? '';
     const lastName = lead?.contactName?.lastName ?? '';
@@ -180,6 +219,11 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
 
     const handleAppointmentSaved = (outcome: 'BOOKED' | 'RESCHEDULED' | 'CANCELLED') => {
         setAppointmentOpen(false);
+        refresh();
+        // Invalidate sidecar's caller context cache so AI gets fresh appointment data
+        if (lead?.id) {
+            apiClient.post('/api/caller/invalidate-context', { leadId: lead.id }, { silent: true }).catch(() => {});
+        }
         if (outcome === 'RESCHEDULED') {
             addActions('RESCHEDULE');
             notify.success('Appointment Rescheduled');
@@ -195,6 +239,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
     const handleReset = () => {
         setDispositionOpen(false);
         setCallerDisconnected(false);
+        setConfirmedAnswered(false);
         setActionsTaken([]);
         setCallState('idle');
         setCallerNumber(null);
@@ -203,6 +248,26 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
         onCallComplete?.();
     };
 
+    // Auto-dispose unanswered outbound calls to release agent from ACW immediately
+    useEffect(() => {
+        if (!confirmedAnswered && isOutbound && (callState === 'ended' || callState === 'failed') && callUcid && !unansweredDisposeFired.current) {
+            unansweredDisposeFired.current = true;
+            const agentCfg = JSON.parse(localStorage.getItem('helix_agent_config') ?? '{}');
+            console.log(`[CALL-DBG] ▶ Auto-disposing unanswered outbound: ucid=${callUcid} agent=${agentCfg.ozonetelAgentId}`);
+            apiClient.post('/api/ozonetel/dispose', {
+                ucid: callUcid,
+                disposition: 'NO_ANSWER',
+                agentId: agentCfg.ozonetelAgentId,
+                callerPhone,
+                direction: 'OUTBOUND',
+                durationSec: 0,
+                leadId: lead?.id ?? null,
+                leadName: fullName || null,
+                notes: 'Auto-disposed — customer did not answer',
+            }).catch((err) => console.error('[CALL-DBG] Auto-dispose failed:', err));
+        }
+    }, [callState, callUcid]); // eslint-disable-line react-hooks/exhaustive-deps
+
     // Outbound ringing
     if (callState === 'ringing-out') {
         return (
@@ -220,11 +285,9 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
                         {fullName && <p className="text-sm text-secondary">{phoneDisplay}</p>}
                     </div>
                 </div>
-                <div className="mt-3 flex gap-2">
-                    <Button size="sm" color="primary-destructive" onClick={() => { hangup(); handleReset(); }}>
-                        Cancel
-                    </Button>
-                </div>
+                {/* Cancel button removed per product — risk: agent can't abort
+                    a misdialled outbound call before the customer answers.
+                    <Button size="sm" color="primary-destructive" onClick={() => { hangup(); handleReset(); }}>Cancel</Button> */}
             </div>
         );
     }
@@ -248,14 +311,14 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
                 </div>
                 <div className="mt-3 flex gap-2">
                     <Button size="sm" color="primary" onClick={answer}>Answer</Button>
-                    <Button size="sm" color="tertiary-destructive" onClick={reject}>Decline</Button>
+                    {/* Decline hidden per product — reject returns call to Ozonetel queue */}
                 </div>
             </div>
         );
     }
 
-    // Unanswered call (ringing → ended without ever reaching active)
-    if (!wasAnsweredRef.current && (callState === 'ended' || callState === 'failed')) {
+    if (!confirmedAnswered && (callState === 'ended' || callState === 'failed')) {
+        console.log(`[CALL-DBG] ▶ BACK-TO-WORKLIST PATH: confirmedAnswered=${confirmedAnswered} isOutbound=${isOutbound}`);
         return (
             <div className="rounded-xl border border-secondary bg-primary p-4 text-center">
                 <FontAwesomeIcon icon={faPhoneHangup} className="size-6 text-fg-quaternary mb-2" />
@@ -270,10 +333,23 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
 
     // Active call
     if (callState === 'active' || dispositionOpen) {
-        wasAnsweredRef.current = true;
         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">
@@ -338,17 +414,17 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
 
                             <Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
                                 iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
-                                isDisabled={!wasAnsweredRef.current}
+                                isDisabled={!buttonsEnabled}
                                 onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); setTransferOpen(false); }}>
                                 {leadAppointments.length > 0 ? 'New / Reschedule Appt' : 'New Appt'}
                             </Button>
                             <Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
                                 iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
-                                isDisabled={!wasAnsweredRef.current}
+                                isDisabled={!buttonsEnabled}
                                 onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); setTransferOpen(false); }}>Enquiry</Button>
                             <Button size="sm" color={transferOpen ? 'primary' : 'secondary'}
                                 iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
-                                isDisabled={!wasAnsweredRef.current}
+                                isDisabled={!buttonsEnabled}
                                 onClick={() => { setTransferOpen(!transferOpen); setAppointmentOpen(false); setEnquiryOpen(false); }}>Transfer</Button>
 
                             <Button size="sm" color="primary-destructive" className="ml-auto"
@@ -530,12 +606,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
                     isOpen={dispositionOpen}
                     callerName={fullName || phoneDisplay}
                     callerDisconnected={callerDisconnected}
-                    // wasAnsweredRef only flips true once callState reaches
-                    // 'active'. Outbound callbacks that never connect keep
-                    // this false, which narrows the disposition options to
-                    // no-answer outcomes and prevents SLA-gaming dispositions
-                    // like Info Provided on a call the customer never took.
-                    callAnswered={wasAnsweredRef.current}
+                    callAnswered={confirmedAnswered}
                     actionsTaken={actionsTaken}
                     onSubmit={handleDisposition}
                     onDismiss={() => {

src/components/layout/app-shell.tsx

@@ -15,6 +15,7 @@ import { useData } from '@/providers/data-provider';
 import { useMaintShortcuts } from '@/hooks/use-maint-shortcuts';
 import { useNetworkStatus } from '@/hooks/use-network-status';
 // import { GlobalSearch } from '@/components/shared/global-search';
+import { AiFloatingButton } from '@/components/shared/ai-floating-button';
 import { apiClient } from '@/lib/api-client';
 import { cx } from '@/utils/cx';
 
@@ -24,7 +25,7 @@ interface AppShellProps {
 
 export const AppShell = ({ children }: AppShellProps) => {
     const { pathname } = useLocation();
-    const { isCCAgent } = useAuth();
+    const { isCCAgent, isAdmin } = useAuth();
     const { isOpen, activeAction, close } = useMaintShortcuts();
     const { connectionStatus, isRegistered } = useSip();
     const networkQuality = useNetworkStatus();
@@ -143,6 +144,7 @@ export const AppShell = ({ children }: AppShellProps) => {
                     <main className="flex flex-1 flex-col overflow-hidden">{children}</main>
                 </div>
                 {isCCAgent && pathname !== '/' && pathname !== '/call-desk' && <CallWidget />}
+                {isAdmin && !isCCAgent && <AiFloatingButton />}
             </div>
             <MaintOtpModal
                 isOpen={isOpen}

src/components/leads/lead-table.tsx

@@ -1,8 +1,6 @@
 import { useMemo, useState } from 'react';
 import { TableBody as AriaTableBody } from 'react-aria-components';
 import type { SortDescriptor, Selection } from 'react-aria-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEye } from '@fortawesome/pro-duotone-svg-icons';
 import { Badge } from '@/components/base/badges/badges';
 import { Table } from '@/components/application/table/table';
 import { LeadStatusBadge } from '@/components/shared/status-badge';
@@ -94,7 +92,6 @@ export const LeadTable = ({
     }, [leads, expandedDupId]);
 
     const allColumns = [
-        { id: 'view', label: '', allowsSorting: false, defaultWidth: 40 },
         { id: 'phone', label: 'Phone', allowsSorting: true, defaultWidth: 150 },
         { id: 'name', label: 'Name', allowsSorting: true, defaultWidth: 160 },
         { id: 'email', label: 'Email', allowsSorting: false, defaultWidth: 180 },
@@ -110,7 +107,7 @@ export const LeadTable = ({
     ];
 
     const columns = visibleColumns
-        ? allColumns.filter(c => visibleColumns.has(c.id) || c.id === 'view')
+        ? allColumns.filter(c => visibleColumns.has(c.id))
         : allColumns;
 
     return (
@@ -156,7 +153,6 @@ export const LeadTable = ({
                                     id={row.id}
                                     className="bg-warning-primary"
                                 >
-                                    <Table.Cell />
                                     <Table.Cell className="pl-10">
                                         <span className="text-xs text-tertiary">{phone}</span>
                                     </Table.Cell>
@@ -207,20 +203,12 @@ export const LeadTable = ({
                                 key={row.id}
                                 id={row.id}
                                 className={cx(
-                                    'group/row',
+                                    'group/row cursor-pointer',
                                     isSpamRow && !isSelected && 'bg-warning-primary',
                                     isSelected && 'bg-brand-primary',
                                 )}
+                                onAction={() => onViewActivity?.(lead)}
                             >
-                                <Table.Cell>
-                                    <button
-                                        onClick={(e) => { e.stopPropagation(); onViewActivity?.(lead); }}
-                                        className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
-                                        title="View details"
-                                    >
-                                        <FontAwesomeIcon icon={faEye} className="size-3.5" />
-                                    </button>
-                                </Table.Cell>
                                 {isCol('phone') && <Table.Cell>
                                     {phoneRaw ? (
                                         <PhoneActionCell phoneNumber={phoneRaw} displayNumber={phone} />

src/components/shared/ai-floating-button.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSparkles, faXmark } from '@fortawesome/pro-duotone-svg-icons';
+import { AiChatPanel } from '@/components/call-desk/ai-chat-panel';
+import { cx } from '@/utils/cx';
+
+export const AiFloatingButton = () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            {/* FAB — bottom right, hidden when drawer is open */}
+            {!open && (
+                <button
+                    onClick={() => setOpen(true)}
+                    className="fixed bottom-6 right-6 z-50 flex size-12 items-center justify-center rounded-full bg-brand-solid text-white shadow-lg hover:bg-brand-solid_hover transition duration-100 ease-linear"
+                    title="AI Assistant"
+                >
+                    <FontAwesomeIcon icon={faSparkles} className="size-5" />
+                </button>
+            )}
+
+            {/* Drawer — slides in from right */}
+            <div className={cx(
+                'fixed top-0 right-0 z-50 h-full bg-primary border-l border-secondary shadow-xl transition-all duration-200 ease-linear flex flex-col',
+                open ? 'w-[400px]' : 'w-0 overflow-hidden border-l-0',
+            )}>
+                {open && (
+                    <>
+                        <div className="flex shrink-0 items-center justify-between border-b border-secondary px-4 py-3">
+                            <div className="flex items-center gap-2">
+                                <FontAwesomeIcon icon={faSparkles} className="size-3.5 text-fg-brand-primary" />
+                                <span className="text-sm font-semibold text-primary">AI Assistant</span>
+                            </div>
+                            <button
+                                onClick={() => setOpen(false)}
+                                className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
+                            >
+                                <FontAwesomeIcon icon={faXmark} className="size-4" />
+                            </button>
+                        </div>
+                        <div className="flex-1 min-h-0 overflow-hidden">
+                            <AiChatPanel callerContext={{ type: 'supervisor' }} />
+                        </div>
+                    </>
+                )}
+            </div>
+        </>
+    );
+};

src/pages/all-leads.tsx

@@ -146,9 +146,7 @@ export const AllLeadsPage = () => {
             result = result.filter((l) => l.assignedAgent === user.name);
         }
         if (campaignFilter) {
-            result = campaignFilter === '__none__'
-                ? result.filter((l) => !l.campaignId)
-                : result.filter((l) => l.campaignId === campaignFilter);
+            result = result.filter((l) => l.campaignId === campaignFilter);
         }
         return result;
     }, [sortedLeads, myLeadsOnly, user.name, campaignFilter]);
@@ -320,17 +318,6 @@ export const AllLeadsPage = () => {
                                 </button>
                             );
                         })}
-                        <button
-                            onClick={() => { setCampaignFilter(campaignFilter === '__none__' ? null : '__none__'); setCurrentPage(1); }}
-                            className={cx(
-                                'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
-                                campaignFilter === '__none__'
-                                    ? 'bg-brand-solid text-white'
-                                    : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
-                            )}
-                        >
-                            No Campaign ({filteredLeads.filter(l => !l.campaignId).length})
-                        </button>
                     </div>
                 )}
 

src/pages/appointments-v2.tsx

@@ -1,8 +1,9 @@
-// Appointments v2 — lean table + detail side panel + reschedule + reminder
+// Appointments v2 — lean table + detail side panel + reschedule
+// Uses DataProvider as single source of truth for appointment data.
 import { useEffect, useMemo, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-    faMagnifyingGlass, faPenToSquare, faEye, faBell, faXmark,
+    faMagnifyingGlass, faPenToSquare, faXmark,
     faCalendarCheck, faUserDoctor, faBuilding, faStethoscope, faNotesMedical,
 } from '@fortawesome/pro-duotone-svg-icons';
 import { faIcon } from '@/lib/icon-wrapper';
@@ -12,7 +13,6 @@ import { Badge } from '@/components/base/badges/badges';
 import { Input } from '@/components/base/input/input';
 import { Table } from '@/components/application/table/table';
 import { PaginationCardDefault } from '@/components/application/pagination/pagination';
-// TopBar replaced by inline header
 import { Button } from '@/components/base/buttons/button';
 import { ModalOverlay, Modal, Dialog } from '@/components/application/modals/modal';
 import { Select } from '@/components/base/select/select';
@@ -21,33 +21,11 @@ import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
 import { PhoneActionCell } from '@/components/call-desk/phone-action-cell';
 import { PageHeader } from '@/components/layout/page-header';
 import { formatPhone, formatDateOnly, formatTimeOnly } from '@/lib/format';
+import { useData } from '@/providers/data-provider';
 import { apiClient } from '@/lib/api-client';
 import { notify } from '@/lib/toast';
 import { cx } from '@/utils/cx';
-
-type AppointmentRecord = {
-    id: string;
-    scheduledAt: string | null;
-    durationMin: number | null;
-    appointmentType: string | null;
-    status: string | null;
-    doctorName: string | null;
-    department: string | null;
-    reasonForVisit: string | null;
-    patient: {
-        id: string;
-        fullName: { firstName: string; lastName: string } | null;
-        phones: { primaryPhoneNumber: string } | null;
-    } | null;
-    clinic: {
-        id?: string;
-        clinicName: string;
-    } | null;
-    doctor: {
-        id: string;
-        fullName?: { firstName: string; lastName: string } | null;
-    } | null;
-};
+import type { Appointment } from '@/types/entities';
 
 type StatusTab = 'all' | 'SCHEDULED' | 'COMPLETED' | 'CANCELLED' | 'RESCHEDULED';
 
@@ -69,43 +47,14 @@ const STATUS_LABELS: Record<string, string> = {
     RESCHEDULED: 'Rescheduled',
 };
 
-const QUERY = `{ appointments(first: 200, orderBy: [{ scheduledAt: DescNullsLast }]) { edges { node {
-    id scheduledAt durationMin appointmentType status
-    doctorName department reasonForVisit
-    patient { id fullName { firstName lastName } phones { primaryPhoneNumber } }
-    clinic { id clinicName }
-    doctor { id fullName { firstName lastName } }
-} } } }`;
+const getPatientName = (appt: Appointment): string =>
+    appt.patientName || 'Unknown';
 
-const formatDateTime = (iso: string): string =>
-    `${formatDateOnly(iso)}, ${formatTimeOnly(iso)}`;
+const getPhone = (appt: Appointment): string =>
+    appt.patientPhone ?? '';
 
-const getPatientName = (appt: AppointmentRecord): string => {
-    if (!appt.patient?.fullName) return 'Unknown';
-    return `${appt.patient.fullName.firstName} ${appt.patient.fullName.lastName}`.trim() || 'Unknown';
-};
-
-const getPhone = (appt: AppointmentRecord): string =>
-    appt.patient?.phones?.primaryPhoneNumber ?? '';
-
-const isUpcoming = (appt: AppointmentRecord): boolean => {
-    if (appt.status !== 'SCHEDULED' && appt.status !== 'CONFIRMED') return false;
-    if (!appt.scheduledAt) return false;
-    return new Date(appt.scheduledAt).getTime() >= Date.now();
-};
-
-// Can edit/reschedule: anything that isn't completed or cancelled
-const canEdit = (appt: AppointmentRecord): boolean => {
-    return appt.status !== 'COMPLETED' && appt.status !== 'CANCELLED' && appt.status !== 'NO_SHOW';
-};
-
-const buildReminderMessage = (appt: AppointmentRecord): string => {
-    const name = getPatientName(appt);
-    const doctor = appt.doctorName ?? 'your doctor';
-    const date = appt.scheduledAt ? formatDateTime(appt.scheduledAt) : 'your scheduled time';
-    const branch = appt.clinic?.clinicName ?? 'our clinic';
-    return `Hi ${name}, this is a reminder for your appointment with ${doctor} on ${date} at ${branch}. Please confirm or call us to reschedule.`;
-};
+const canEdit = (appt: Appointment): boolean =>
+    appt.appointmentStatus !== 'COMPLETED' && appt.appointmentStatus !== 'CANCELLED' && appt.appointmentStatus !== 'NO_SHOW';
 
 // ── Detail Panel ─────────────────────────────────────────────────
 const DetailRow = ({ icon, label, value }: { icon: any; label: string; value: string }) => (
@@ -123,7 +72,7 @@ const AppointmentDetailPanel = ({
     onClose,
     onReschedule,
 }: {
-    appointment: AppointmentRecord;
+    appointment: Appointment;
     onClose: () => void;
     onReschedule: () => void;
 }) => {
@@ -155,12 +104,11 @@ const AppointmentDetailPanel = ({
             </div>
             <div className="flex-1 overflow-y-auto px-5 py-4 space-y-1">
                 <div className="mb-4">
-                    <Badge size="md" color={STATUS_COLORS[appointment.status ?? ''] ?? 'gray'} type="pill-color">
-                        {STATUS_LABELS[appointment.status ?? ''] ?? appointment.status ?? '—'}
+                    <Badge size="md" color={STATUS_COLORS[appointment.appointmentStatus ?? ''] ?? 'gray'} type="pill-color">
+                        {STATUS_LABELS[appointment.appointmentStatus ?? ''] ?? appointment.appointmentStatus ?? '—'}
                     </Badge>
                 </div>
 
-                {/* Date & Time — 2 lines */}
                 <div className="flex items-start gap-3 py-2.5">
                     <FontAwesomeIcon icon={faCalendarCheck} className="size-4 text-fg-quaternary mt-0.5 shrink-0" />
                     <div>
@@ -176,7 +124,7 @@ const AppointmentDetailPanel = ({
 
                 <DetailRow icon={faUserDoctor} label="Doctor" value={appointment.doctorName ?? '—'} />
                 <DetailRow icon={faStethoscope} label="Department" value={appointment.department ?? '—'} />
-                <DetailRow icon={faBuilding} label="Branch / Clinic" value={appointment.clinic?.clinicName ?? '—'} />
+                <DetailRow icon={faBuilding} label="Branch / Clinic" value={appointment.clinicName ?? '—'} />
                 <DetailRow icon={faNotesMedical} label="Chief Complaint" value={appointment.reasonForVisit ?? '—'} />
 
                 <div className="border-t border-secondary pt-3 mt-3">
@@ -190,7 +138,6 @@ const AppointmentDetailPanel = ({
                 </div>
             </div>
 
-            {/* Reschedule confirm modal — same pattern as call desk */}
             <ModalOverlay
                 isOpen={reschedulePromptOpen}
                 onOpenChange={(open) => { if (!open) setReschedulePromptOpen(false); }}
@@ -203,7 +150,6 @@ const AppointmentDetailPanel = ({
                                 <h2 className="text-lg font-semibold text-primary">Reschedule this appointment?</h2>
                                 <p className="text-sm text-tertiary">
                                     Choose "Yes, reschedule" to change the date, time, or doctor.
-                                    Choose "No, just view" to see the details without changing anything.
                                 </p>
                                 <div className="flex items-center gap-2 justify-end">
                                     <Button size="sm" color="secondary" onClick={() => setReschedulePromptOpen(false)}>
@@ -223,10 +169,6 @@ const AppointmentDetailPanel = ({
 };
 
 // ── Reschedule Panel ─────────────────────────────────────────────
-// Dedicated form for rescheduling from the Appointments page.
-// No patient creation, no lead updates, no modal — just update the
-// existing appointment's doctor, date, time, and chief complaint.
-
 type Doctor = { id: string; name: string; department: string };
 
 const DOCTORS_QUERY = `{ doctors(first: 50) { edges { node {
@@ -238,13 +180,13 @@ const ReschedulePanel = ({
     onClose,
     onSaved,
 }: {
-    appointment: AppointmentRecord;
+    appointment: Appointment;
     onClose: () => void;
     onSaved: () => void;
 }) => {
     const [doctors, setDoctors] = useState<Doctor[]>([]);
     const [department, setDepartment] = useState(appointment.department ?? '');
-    const [doctor, setDoctor] = useState(appointment.doctor?.id ?? '');
+    const [doctor, setDoctor] = useState(appointment.doctorId ?? '');
     const [date, setDate] = useState(() => appointment.scheduledAt?.split('T')[0] ?? '');
     const [timeSlot, setTimeSlot] = useState(() => {
         if (!appointment.scheduledAt) return '';
@@ -257,7 +199,6 @@ const ReschedulePanel = ({
     const [error, setError] = useState<string | null>(null);
     const [cancelConfirm, setCancelConfirm] = useState(false);
 
-    // Fetch doctors once
     useEffect(() => {
         apiClient.graphql<any>(DOCTORS_QUERY, undefined, { silent: true })
             .then(data => {
@@ -273,11 +214,9 @@ const ReschedulePanel = ({
             .catch(() => {});
     }, []);
 
-    // Departments derived from doctors
     const departments = useMemo(() => [...new Set(doctors.map(d => d.department).filter(Boolean))], [doctors]);
     const filteredDoctors = useMemo(() => department ? doctors.filter(d => d.department === department) : doctors, [doctors, department]);
 
-    // Fetch slots when doctor + date change
     useEffect(() => {
         if (!doctor || !date) { setSlots([]); return; }
         apiClient.get<Array<{ time: string; label: string }>>(`/api/masterdata/slots?doctorId=${doctor}&date=${date}`, { silent: true })
@@ -346,7 +285,6 @@ const ReschedulePanel = ({
             </div>
 
             <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
-                {/* Department */}
                 <div>
                     <span className="text-xs font-medium text-secondary">Department</span>
                     <Select
@@ -360,7 +298,6 @@ const ReschedulePanel = ({
                     </Select>
                 </div>
 
-                {/* Doctor */}
                 <div>
                     <span className="text-xs font-medium text-secondary">Doctor <span className="text-error-primary">*</span></span>
                     <Select
@@ -374,7 +311,6 @@ const ReschedulePanel = ({
                     </Select>
                 </div>
 
-                {/* Date */}
                 <div>
                     <span className="text-xs font-medium text-secondary">Date <span className="text-error-primary">*</span></span>
                     <DatePicker
@@ -387,7 +323,6 @@ const ReschedulePanel = ({
                     />
                 </div>
 
-                {/* Time slots */}
                 {doctor && date && slots.length > 0 && (
                     <div>
                         <span className="text-xs font-medium text-secondary">Time Slot <span className="text-error-primary">*</span></span>
@@ -413,7 +348,6 @@ const ReschedulePanel = ({
                     <p className="text-xs text-tertiary">No available slots for this date</p>
                 )}
 
-                {/* Chief Complaint */}
                 <div>
                     <span className="text-xs font-medium text-secondary">Chief Complaint</span>
                     <textarea
@@ -428,7 +362,6 @@ const ReschedulePanel = ({
                 {error && <p className="text-sm text-error-primary">{error}</p>}
             </div>
 
-            {/* Footer buttons */}
             <div className="flex items-center justify-between gap-2 border-t border-secondary px-5 py-3">
                 <Button size="sm" color="primary-destructive" onClick={() => setCancelConfirm(true)} isDisabled={saving}>
                     Cancel Appointment
@@ -438,7 +371,6 @@ const ReschedulePanel = ({
                 </Button>
             </div>
 
-            {/* Cancel confirm modal */}
             <ModalOverlay
                 isOpen={cancelConfirm}
                 onOpenChange={(open) => { if (!open) setCancelConfirm(false); }}
@@ -471,37 +403,31 @@ const ReschedulePanel = ({
 
 // ── Page ─────────────────────────────────────────────────────────
 export const AppointmentsPageV2 = () => {
-    const [appointments, setAppointments] = useState<AppointmentRecord[]>([]);
-    const [loading, setLoading] = useState(true);
+    const { appointments, loading, refresh } = useData();
     const [tab, setTab] = useState<StatusTab>('all');
     const [search, setSearch] = useState('');
     const [page, setPage] = useState(1);
-    const [selectedAppt, setSelectedAppt] = useState<AppointmentRecord | null>(null);
+    const [selectedAppt, setSelectedAppt] = useState<Appointment | null>(null);
     const [panelOpen, setPanelOpen] = useState(false);
     const [rescheduleOpen, setRescheduleOpen] = useState(false);
     const PAGE_SIZE = 20;
 
-    const fetchAppointments = () => {
-        apiClient.graphql<{ appointments: { edges: Array<{ node: AppointmentRecord }> } }>(QUERY, undefined, { silent: true })
-            .then(data => setAppointments(data.appointments.edges.map(e => e.node)))
-            .catch(() => {})
-            .finally(() => setLoading(false));
-    };
-
-    useEffect(() => { fetchAppointments(); }, []);
-
     const statusCounts = useMemo(() => {
         const counts: Record<string, number> = {};
         for (const a of appointments) {
-            const s = a.status ?? 'UNKNOWN';
+            const s = a.appointmentStatus ?? 'UNKNOWN';
             counts[s] = (counts[s] ?? 0) + 1;
         }
         return counts;
     }, [appointments]);
 
     const filtered = useMemo(() => {
-        let rows = appointments;
-        if (tab !== 'all') rows = rows.filter(a => a.status === tab);
+        let rows = [...appointments].sort((a, b) => {
+            const da = a.scheduledAt ? new Date(a.scheduledAt).getTime() : 0;
+            const db = b.scheduledAt ? new Date(b.scheduledAt).getTime() : 0;
+            return db - da;
+        });
+        if (tab !== 'all') rows = rows.filter(a => a.appointmentStatus === tab);
         if (search.trim()) {
             const q = search.toLowerCase();
             rows = rows.filter(a => {
@@ -527,25 +453,17 @@ export const AppointmentsPageV2 = () => {
         { id: 'RESCHEDULED' as const, label: 'Rescheduled', badge: statusCounts.RESCHEDULED ? String(statusCounts.RESCHEDULED) : undefined },
     ];
 
-    const handleEditClick = (appt: AppointmentRecord) => {
+    const handleEditClick = (appt: Appointment) => {
         setSelectedAppt(appt);
         setPanelOpen(true);
         setRescheduleOpen(false);
     };
 
-    const handleSendReminder = (appt: AppointmentRecord) => {
-        const phone = getPhone(appt);
-        if (!phone) return;
-        const msg = encodeURIComponent(buildReminderMessage(appt));
-        window.open(`https://wa.me/91${phone}?text=${msg}`, '_blank');
-        notify.success('Reminder', `WhatsApp opened for ${getPatientName(appt)}`);
-    };
-
     const handleRescheduleSaved = () => {
         setRescheduleOpen(false);
         setPanelOpen(false);
         setSelectedAppt(null);
-        fetchAppointments();
+        refresh();
         notify.success('Appointment Rescheduled');
     };
 
@@ -554,7 +472,7 @@ export const AppointmentsPageV2 = () => {
             <PageHeader
                 title="Appointments"
                 badge={filtered.length}
-                infoText="All scheduled, completed, cancelled, and rescheduled appointments. Click the eye icon to view details or reschedule."
+                infoText="All scheduled, completed, cancelled, and rescheduled appointments. Click a row to view details or reschedule."
                 controls={
                     <div className="w-56">
                         <Input
@@ -589,7 +507,6 @@ export const AppointmentsPageV2 = () => {
 
             <div className="flex flex-1 overflow-hidden">
                 <div className="flex flex-1 flex-col overflow-hidden">
-
                     <div className="flex flex-1 flex-col overflow-hidden px-4 pt-3">
                         {loading ? (
                             <div className="flex items-center justify-center py-12">
@@ -602,47 +519,31 @@ export const AppointmentsPageV2 = () => {
                         ) : (
                             <Table size="sm">
                                 <Table.Header>
-                                    <Table.Head label="" className="w-8" isRowHeader />
-                                    <Table.Head label="PATIENT" className="min-w-[180px]" />
+                                    <Table.Head label="PATIENT" className="min-w-[180px]" isRowHeader />
                                     <Table.Head label="DATE & TIME" className="w-28" />
                                     <Table.Head label="DOCTOR" className="min-w-[160px]" />
                                     <Table.Head label="STATUS" className="w-24" />
-                                    <Table.Head label="REMIND" className="w-20" />
                                 </Table.Header>
                                 <Table.Body items={pagedRows}>
                                     {(appt) => {
                                         const name = getPatientName(appt);
                                         const phone = getPhone(appt);
-                                        const statusLabel = STATUS_LABELS[appt.status ?? ''] ?? appt.status ?? '—';
-                                        const statusColor = STATUS_COLORS[appt.status ?? ''] ?? 'gray';
-                                        const upcoming = isUpcoming(appt);
+                                        const statusLabel = STATUS_LABELS[appt.appointmentStatus ?? ''] ?? appt.appointmentStatus ?? '—';
+                                        const statusColor = STATUS_COLORS[appt.appointmentStatus ?? ''] ?? 'gray';
                                         const isSelected = selectedAppt?.id === appt.id;
 
                                         return (
                                             <Table.Row
                                                 id={appt.id}
-                                                className={cx('group/row', isSelected && 'bg-brand-primary')}
+                                                className={cx('group/row cursor-pointer', isSelected && 'bg-brand-primary')}
+                                                onAction={() => handleEditClick(appt)}
                                             >
-                                                {/* Eye icon — first column */}
-                                                <Table.Cell>
-                                                    <button
-                                                        onClick={(e) => { e.stopPropagation(); handleEditClick(appt); }}
-                                                        className="flex size-7 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
-                                                        title="View details"
-                                                    >
-                                                        <FontAwesomeIcon icon={faEye} className="size-3.5" />
-                                                    </button>
-                                                </Table.Cell>
-
-                                                {/* Patient: name + phone on 2 lines */}
                                                 <Table.Cell>
                                                     <div className="min-w-0">
                                                         <p className="text-sm font-medium text-primary truncate">{name}</p>
                                                         {phone && <PhoneActionCell phoneNumber={phone} displayNumber={formatPhone({ number: phone, callingCode: '+91' })} />}
                                                     </div>
                                                 </Table.Cell>
-
-                                                {/* Date & Time: date + time on 2 lines */}
                                                 <Table.Cell>
                                                     {appt.scheduledAt ? (
                                                         <div>
@@ -651,38 +552,17 @@ export const AppointmentsPageV2 = () => {
                                                         </div>
                                                     ) : <span className="text-sm text-quaternary">—</span>}
                                                 </Table.Cell>
-
-                                                {/* Doctor: name + department on 2 lines */}
                                                 <Table.Cell>
                                                     <div className="min-w-0">
                                                         <p className="text-sm text-primary truncate">{appt.doctorName ?? '—'}</p>
                                                         {appt.department && <p className="text-xs text-tertiary truncate">{appt.department}</p>}
                                                     </div>
                                                 </Table.Cell>
-
-                                                {/* Status */}
                                                 <Table.Cell>
                                                     <Badge size="sm" color={statusColor} type="pill-color">
                                                         {statusLabel}
                                                     </Badge>
                                                 </Table.Cell>
-
-                                                {/* Reminder */}
-                                                <Table.Cell>
-                                                    {upcoming ? (
-                                                        <button
-                                                            onClick={(e) => { e.stopPropagation(); handleSendReminder(appt); }}
-                                                            className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-medium text-brand-secondary hover:bg-brand-primary transition duration-100 ease-linear"
-                                                            title="Send WhatsApp reminder"
-                                                        >
-                                                            <FontAwesomeIcon icon={faBell} className="size-3" />
-                                                            Send
-                                                        </button>
-                                                    ) : (
-                                                        <span className="text-xs text-quaternary">—</span>
-                                                    )}
-                                                </Table.Cell>
-
                                             </Table.Row>
                                         );
                                     }}
@@ -699,7 +579,6 @@ export const AppointmentsPageV2 = () => {
                     </div>
                 </div>
 
-                {/* Detail side panel */}
                 <div className={cx(
                     "shrink-0 border-l border-secondary bg-primary flex flex-col overflow-hidden transition-all duration-200 ease-linear",
                     panelOpen && selectedAppt ? "w-[380px]" : "w-0 border-l-0",

src/pages/campaign-detail.tsx

@@ -73,9 +73,40 @@ export const CampaignDetailPage = () => {
 
             <KpiStrip campaign={campaign} />
 
-            {/* Main body: leads table on the left, campaign details + funnel + source on the right */}
-            <div className="px-7 pt-5 pb-7">
-                <div className="grid grid-cols-1 gap-5 xl:grid-cols-[1fr_340px]">
+            {/* Campaign details + funnel + source — horizontal cards above table */}
+            <div className="px-7 pt-5">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-3 mb-6">
+                    <div className="rounded-xl border border-secondary bg-primary p-4">
+                        <h4 className="mb-3 text-sm font-bold text-primary">Campaign Details</h4>
+                        <dl className="space-y-1.5 text-xs">
+                            {[
+                                ['Type', campaign.campaignType?.replace(/_/g, ' ') ?? '--'],
+                                ['Platform', campaign.platform ?? '--'],
+                                ['Start', formatDateShort(campaign.startDate)],
+                                ['End', formatDateShort(campaign.endDate)],
+                                ['Budget', campaign.budget ? formatCurrency(campaign.budget.amountMicros, campaign.budget.currencyCode) : '--'],
+                                ['Impressions', campaign.impressionCount?.toLocaleString('en-IN') ?? '--'],
+                                ['Clicks', campaign.clickCount?.toLocaleString('en-IN') ?? '--'],
+                            ].map(([label, value]) => (
+                                <div key={label} className="flex justify-between">
+                                    <dt className="text-quaternary">{label}</dt>
+                                    <dd className="font-medium text-secondary">{value}</dd>
+                                </div>
+                            ))}
+                        </dl>
+                        <div className="mt-3 space-y-2">
+                            <BudgetBar spent={campaign.amountSpent} budget={campaign.budget} />
+                            <HealthIndicator campaign={campaign} leads={campaignLeads} />
+                        </div>
+                    </div>
+
+                    <ConversionFunnel campaign={campaign} leads={campaignLeads} />
+                    <SourceBreakdown leads={campaignLeads} />
+                </div>
+            </div>
+
+            {/* Leads table — full width */}
+            <div className="px-7 pb-7">
                 <div className="space-y-6">
                     <div>
                         <div className="mb-3 flex items-center justify-between">
@@ -96,6 +127,7 @@ export const CampaignDetailPage = () => {
                                 sortDirection={sortDirection}
                                 onSort={handleSort}
                                 onViewActivity={(lead) => setActivityLead(lead)}
+                                visibleColumns={new Set(['phone', 'name', 'source', 'status', 'lastContactedAt', 'createdAt'])}
                             />
                         )}
                     </div>
@@ -113,68 +145,6 @@ export const CampaignDetailPage = () => {
                         </div>
                     )}
                 </div>
-
-                    <div className="space-y-4">
-                        <div className="rounded-xl border border-secondary bg-primary p-4">
-                            <h4 className="mb-3 text-sm font-bold text-primary">Campaign Details</h4>
-                            <dl className="space-y-2 text-xs">
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Type</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {campaign.campaignType?.replace(/_/g, ' ') ?? '--'}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Platform</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {campaign.platform ?? '--'}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Start Date</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {formatDateShort(campaign.startDate)}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">End Date</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {formatDateShort(campaign.endDate)}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Budget</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {campaign.budget
-                                            ? formatCurrency(campaign.budget.amountMicros, campaign.budget.currencyCode)
-                                            : '--'}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Impressions</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {campaign.impressionCount?.toLocaleString('en-IN') ?? '--'}
-                                    </dd>
-                                </div>
-                                <div className="flex justify-between">
-                                    <dt className="text-quaternary">Clicks</dt>
-                                    <dd className="font-medium text-secondary">
-                                        {campaign.clickCount?.toLocaleString('en-IN') ?? '--'}
-                                    </dd>
-                                </div>
-                            </dl>
-
-                            <div className="mt-4 space-y-3">
-                                <BudgetBar spent={campaign.amountSpent} budget={campaign.budget} />
-                                <HealthIndicator campaign={campaign} leads={campaignLeads} />
-                            </div>
-                        </div>
-
-                        <ConversionFunnel campaign={campaign} leads={campaignLeads} />
-
-                        <SourceBreakdown leads={campaignLeads} />
-                    </div>
-                </div>
             </div>
 
             {activityLead && (

src/pages/patients.tsx

@@ -133,8 +133,6 @@ export const PatientsPage = () => {
                                 <Table.Head label="PATIENT" isRowHeader />
                                 <Table.Head label="PHONE" />
                                 <Table.Head label="EMAIL" />
-                                <Table.Head label="GENDER" />
-                                <Table.Head label="AGE" />
                             </Table.Header>
                             <Table.Body items={pagedPatients} dependencies={[selectedPatient?.id]}>
                                 {(patient) => {
@@ -197,19 +195,6 @@ export const PatientsPage = () => {
                                                 )}
                                             </Table.Cell>
 
-                                            {/* Gender */}
-                                            <Table.Cell>
-                                                <span className="text-sm text-secondary">
-                                                    {patient.gender ? patient.gender.charAt(0) + patient.gender.slice(1).toLowerCase() : '—'}
-                                                </span>
-                                            </Table.Cell>
-
-                                            {/* Age */}
-                                            <Table.Cell>
-                                                <span className="text-sm text-secondary">
-                                                    {age !== null ? `${age} yrs` : '—'}
-                                                </span>
-                                            </Table.Cell>
 
                                         </Table.Row>
                                     );

src/pages/team-dashboard.tsx

@@ -1,8 +1,5 @@
 import { useMemo, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSidebarFlip, faSidebar } from '@fortawesome/pro-duotone-svg-icons';
 import { PageHeader } from '@/components/layout/page-header';
-import { AiChatPanel } from '@/components/call-desk/ai-chat-panel';
 import { DashboardKpi } from '@/components/dashboard/kpi-cards';
 import { MissedQueue } from '@/components/dashboard/missed-queue';
 import {
@@ -29,7 +26,6 @@ const getDateRangeStart = (range: DateRange): Date => {
 export const TeamDashboardPage = () => {
     const { calls, leads, campaigns, loading } = useData();
     const [dateRange, setDateRange] = useState<DateRange>('week');
-    const [aiOpen, setAiOpen] = useState(true);
 
     // Pull the richer supervisor rollup (NPS, idle, time breakdown, alerts)
     // from the sidecar. Only `today`/`week`/`month` overlap with the rollup's
@@ -61,7 +57,6 @@ export const TeamDashboardPage = () => {
                 subtitle={dateRangeLabel}
                 infoText="Aggregated call metrics, agent performance, and operational alerts."
                 controls={
-                    <>
                     <div className="flex rounded-lg border border-secondary overflow-hidden">
                         {(['today', 'week', 'month'] as const).map((range) => (
                             <button
@@ -76,14 +71,6 @@ export const TeamDashboardPage = () => {
                             </button>
                         ))}
                     </div>
-                        <button
-                            onClick={() => setAiOpen(!aiOpen)}
-                            className="flex size-8 items-center justify-center rounded-lg text-fg-quaternary hover:text-fg-secondary hover:bg-primary_hover transition duration-100 ease-linear"
-                            title={aiOpen ? 'Hide AI panel' : 'Show AI panel'}
-                        >
-                            <FontAwesomeIcon icon={aiOpen ? faSidebarFlip : faSidebar} className="size-4" />
-                        </button>
-                    </>
                 }
             />
 
@@ -154,17 +141,6 @@ export const TeamDashboardPage = () => {
                     </div>
                 </div>
 
-                {/* AI panel — collapsible */}
-                <div className={cx(
-                    "shrink-0 border-l border-secondary bg-primary flex flex-col overflow-hidden transition-all duration-200 ease-linear",
-                    aiOpen ? "w-[380px]" : "w-0 border-l-0",
-                )}>
-                    {aiOpen && (
-                        <div className="flex h-full flex-col p-4">
-                            <AiChatPanel callerContext={{ type: 'supervisor' }} />
-                        </div>
-                    )}
-                </div>
             </div>
 
         </div>