feat: call desk redesign — 2-panel layout, collapsible sidebar, inline AI, ringtone

- Collapsible sidebar with Jotai atom (icon-only mode, persisted to localStorage)
- 2-panel call desk: worklist (60%) + context panel (40%) with AI + Lead 360 tabs
- Inline AI call prep card — known lead summary or unknown caller script
- Active call card with compact Answer/Decline buttons
- Worklist panel with human-readable labels, priority badges, click-to-select
- Context panel auto-switches to Lead 360 when lead selected or call incoming
- Browser ringtone via Web Audio API on incoming calls
- Sonner + Untitled UI IconNotification for toast system
- apiClient pattern: centralized post/get/graphql with auto-toast on errors
- Remove duplicate avatar from top bar, hide floating widget on call desk
- Fix Link routing in collapsed sidebar (was using <a> causing full page reload)
- Fix GraphQL field names: adStatus→status, platformUrl needs subfield selection
- Silent mode for DataProvider queries to prevent toast spam

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

src/components/call-desk/active-call-card.tsx

@@ -0,0 +1,110 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPhone, faPhoneHangup, faMicrophone, faMicrophoneSlash, faPause, faPlay } from '@fortawesome/pro-duotone-svg-icons';
+import { Button } from '@/components/base/buttons/button';
+import { Badge } from '@/components/base/badges/badges';
+import { useSip } from '@/providers/sip-provider';
+import { formatPhone } from '@/lib/format';
+import type { Lead } from '@/types/entities';
+
+interface ActiveCallCardProps {
+    lead: Lead | null;
+    callerPhone: string;
+}
+
+const formatDuration = (seconds: number): string => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+};
+
+export const ActiveCallCard = ({ lead, callerPhone }: ActiveCallCardProps) => {
+    const { callState, callDuration, isMuted, isOnHold, answer, reject, hangup, toggleMute, toggleHold } = useSip();
+
+    const firstName = lead?.contactName?.firstName ?? '';
+    const lastName = lead?.contactName?.lastName ?? '';
+    const fullName = `${firstName} ${lastName}`.trim();
+    const phone = lead?.contactPhone?.[0];
+    const phoneDisplay = phone ? formatPhone(phone) : callerPhone || 'Unknown';
+
+    if (callState === 'ringing-in') {
+        return (
+            <div className="rounded-xl bg-brand-primary p-4">
+                <div className="flex items-center gap-3">
+                    <div className="relative">
+                        <div className="absolute inset-0 animate-ping rounded-full bg-brand-solid opacity-20" />
+                        <div className="relative flex size-10 items-center justify-center rounded-full bg-brand-solid">
+                            <FontAwesomeIcon icon={faPhone} className="size-4 text-white animate-bounce" />
+                        </div>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <p className="text-xs font-bold uppercase tracking-wider text-brand-secondary">Incoming Call</p>
+                        <p className="text-lg font-bold text-primary">{fullName || phoneDisplay}</p>
+                        {fullName && <p className="text-sm text-secondary">{phoneDisplay}</p>}
+                    </div>
+                </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>
+                </div>
+            </div>
+        );
+    }
+
+    if (callState === 'active') {
+        return (
+            <div className="rounded-xl border border-brand bg-primary p-4">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <div className="flex size-10 items-center justify-center rounded-full bg-success-solid">
+                            <FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
+                        </div>
+                        <div>
+                            <p className="text-sm font-bold text-primary">{fullName || phoneDisplay}</p>
+                            {fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
+                        </div>
+                    </div>
+                    <Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
+                </div>
+                <div className="mt-3 flex gap-2">
+                    <Button
+                        size="sm"
+                        color={isMuted ? 'primary-destructive' : 'secondary'}
+                        iconLeading={({ className }: { className?: string }) => (
+                            <FontAwesomeIcon icon={isMuted ? faMicrophoneSlash : faMicrophone} className={className} />
+                        )}
+                        onClick={toggleMute}
+                    >
+                        {isMuted ? 'Unmute' : 'Mute'}
+                    </Button>
+                    <Button
+                        size="sm"
+                        color={isOnHold ? 'primary-destructive' : 'secondary'}
+                        iconLeading={({ className }: { className?: string }) => (
+                            <FontAwesomeIcon icon={isOnHold ? faPlay : faPause} className={className} />
+                        )}
+                        onClick={toggleHold}
+                    >
+                        {isOnHold ? 'Resume' : 'Hold'}
+                    </Button>
+                    <Button
+                        size="sm"
+                        color="primary-destructive"
+                        iconLeading={({ className }: { className?: string }) => (
+                            <FontAwesomeIcon icon={faPhoneHangup} className={className} />
+                        )}
+                        onClick={hangup}
+                        className="ml-auto"
+                    >
+                        End
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};

src/components/call-desk/ai-chat-panel.tsx

@@ -4,8 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPaperPlaneTop, faRobot, faSparkles, faUserHeadset } from '@fortawesome/pro-duotone-svg-icons';
 import { apiClient } from '@/lib/api-client';
 
-const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
-
 type ChatMessage = {
     id: string;
     role: 'user' | 'assistant';
@@ -61,25 +59,11 @@ export const AiChatPanel = ({ callerContext }: AiChatPanelProps) => {
         setIsLoading(true);
 
         try {
-            const token = apiClient.getStoredToken();
-            const response = await fetch(`${API_URL}/api/ai/chat`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    ...(token ? { Authorization: `Bearer ${token}` } : {}),
-                },
-                body: JSON.stringify({
-                    message: messageText,
-                    context: callerContext,
-                }),
+            const data = await apiClient.post<{ reply: string; sources?: string[] }>('/api/ai/chat', {
+                message: messageText,
+                context: callerContext,
             });
 
-            if (!response.ok) {
-                throw new Error(`Request failed with status ${response.status}`);
-            }
-
-            const data = await response.json();
-
             const assistantMessage: ChatMessage = {
                 id: `assistant-${Date.now()}`,
                 role: 'assistant',

src/components/call-desk/call-prep-card.tsx

@@ -0,0 +1,95 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSparkles, faUserPlus } from '@fortawesome/pro-duotone-svg-icons';
+import { Badge } from '@/components/base/badges/badges';
+import { Button } from '@/components/base/buttons/button';
+import { formatShortDate } from '@/lib/format';
+import type { Lead, LeadActivity } from '@/types/entities';
+
+interface CallPrepCardProps {
+    lead: Lead | null;
+    callerPhone: string;
+    activities: LeadActivity[];
+}
+
+export const CallPrepCard = ({ lead, callerPhone, activities }: CallPrepCardProps) => {
+    if (!lead) {
+        return <UnknownCallerPrep callerPhone={callerPhone} />;
+    }
+
+    const leadActivities = activities
+        .filter((a) => a.leadId === lead.id)
+        .sort((a, b) => {
+            const dateA = a.occurredAt ?? a.createdAt ?? '';
+            const dateB = b.occurredAt ?? b.createdAt ?? '';
+            return new Date(dateB).getTime() - new Date(dateA).getTime();
+        })
+        .slice(0, 3);
+
+    return (
+        <div className="rounded-xl bg-brand-primary p-4">
+            <div className="mb-2 flex items-center gap-1.5">
+                <FontAwesomeIcon icon={faSparkles} className="size-3.5 text-fg-brand-primary" />
+                <span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">AI Call Prep</span>
+            </div>
+
+            {lead.aiSummary && (
+                <p className="text-sm text-primary">{lead.aiSummary}</p>
+            )}
+
+            {lead.aiSuggestedAction && (
+                <span className="mt-2 inline-block rounded-lg bg-brand-solid px-3 py-1.5 text-xs font-semibold text-white">
+                    {lead.aiSuggestedAction}
+                </span>
+            )}
+
+            {!lead.aiSummary && !lead.aiSuggestedAction && (
+                <p className="text-sm text-quaternary">No AI insights available for this lead.</p>
+            )}
+
+            {leadActivities.length > 0 && (
+                <div className="mt-3 border-t border-brand pt-3">
+                    <span className="text-xs font-semibold text-secondary">Recent Activity</span>
+                    <div className="mt-1.5 space-y-1">
+                        {leadActivities.map((a) => (
+                            <div key={a.id} className="flex items-start gap-2">
+                                <Badge size="sm" color="gray" className="shrink-0 mt-0.5">{a.activityType}</Badge>
+                                <span className="flex-1 text-xs text-secondary">{a.summary}</span>
+                                {a.occurredAt && (
+                                    <span className="shrink-0 text-xs text-quaternary">{formatShortDate(a.occurredAt)}</span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+const UnknownCallerPrep = ({ callerPhone }: { callerPhone: string }) => (
+    <div className="rounded-xl bg-secondary p-4">
+        <div className="mb-2 flex items-center gap-1.5">
+            <FontAwesomeIcon icon={faSparkles} className="size-3.5 text-fg-quaternary" />
+            <span className="text-xs font-bold uppercase tracking-wider text-tertiary">Unknown Caller</span>
+        </div>
+        <p className="text-sm text-secondary">
+            No record found for <span className="font-semibold">{callerPhone || 'this number'}</span>
+        </p>
+        <div className="mt-3 space-y-1.5">
+            <p className="text-xs font-semibold text-secondary">Suggested script:</p>
+            <ul className="space-y-1 text-xs text-tertiary">
+                <li>• Ask for name and date of birth</li>
+                <li>• What service are they interested in?</li>
+                <li>• How did they hear about Global Hospital?</li>
+                <li>• Offer to book a consultation</li>
+            </ul>
+        </div>
+        <div className="mt-3">
+            <Button size="sm" color="secondary" iconLeading={({ className }: { className?: string }) => (
+                <FontAwesomeIcon icon={faUserPlus} className={className} />
+            )}>
+                Create Lead
+            </Button>
+        </div>
+    </div>
+);

src/components/call-desk/click-to-call-button.tsx

@@ -1,25 +1,43 @@
+import { useState } from 'react';
 import { Phone01 } from '@untitledui/icons';
 import { Button } from '@/components/base/buttons/button';
 import { useSip } from '@/providers/sip-provider';
+import { apiClient } from '@/lib/api-client';
+import { notify } from '@/lib/toast';
 
 interface ClickToCallButtonProps {
     phoneNumber: string;
+    leadId?: string;
     label?: string;
     size?: 'sm' | 'md';
 }
 
-export const ClickToCallButton = ({ phoneNumber, label, size = 'sm' }: ClickToCallButtonProps) => {
-    const { makeCall, isRegistered, isInCall } = useSip();
+export const ClickToCallButton = ({ phoneNumber, leadId, label, size = 'sm' }: ClickToCallButtonProps) => {
+    const { isRegistered, isInCall } = useSip();
+    const [dialing, setDialing] = useState(false);
+
+    const handleDial = async () => {
+        setDialing(true);
+        try {
+            await apiClient.post('/api/ozonetel/dial', { phoneNumber, leadId });
+            notify.success('Dialing', `Calling ${phoneNumber}...`);
+        } catch {
+            // apiClient.post already toasts the error
+        } finally {
+            setDialing(false);
+        }
+    };
 
     return (
         <Button
             size={size}
             color="primary"
             iconLeading={Phone01}
-            onClick={() => makeCall(phoneNumber)}
-            isDisabled={!isRegistered || isInCall || phoneNumber === ''}
+            onClick={handleDial}
+            isDisabled={!isRegistered || isInCall || !phoneNumber || dialing}
+            isLoading={dialing}
         >
-            {label ?? 'Call'}
+            {dialing ? 'Dialing...' : (label ?? 'Call')}
         </Button>
     );
 };

src/components/call-desk/context-panel.tsx

@@ -0,0 +1,157 @@
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSparkles, faUser } from '@fortawesome/pro-duotone-svg-icons';
+import { AiChatPanel } from './ai-chat-panel';
+import { Badge } from '@/components/base/badges/badges';
+import { formatPhone, formatShortDate } from '@/lib/format';
+import { cx } from '@/utils/cx';
+import type { Lead, LeadActivity } from '@/types/entities';
+
+type ContextTab = 'ai' | 'lead360';
+
+interface ContextPanelProps {
+    selectedLead: Lead | null;
+    activities: LeadActivity[];
+    callerPhone?: string;
+}
+
+export const ContextPanel = ({ selectedLead, activities, callerPhone }: ContextPanelProps) => {
+    const [activeTab, setActiveTab] = useState<ContextTab>('ai');
+
+    // Auto-switch to lead 360 when a lead is selected
+    useEffect(() => {
+        if (selectedLead) {
+            setActiveTab('lead360');
+        }
+    }, [selectedLead?.id]);
+
+    const callerContext = selectedLead ? {
+        callerPhone: selectedLead.contactPhone?.[0]?.number ?? callerPhone,
+        leadId: selectedLead.id,
+        leadName: `${selectedLead.contactName?.firstName ?? ''} ${selectedLead.contactName?.lastName ?? ''}`.trim(),
+    } : callerPhone ? { callerPhone } : undefined;
+
+    return (
+        <div className="flex h-full flex-col">
+            {/* Tab bar */}
+            <div className="flex shrink-0 border-b border-secondary">
+                <button
+                    onClick={() => setActiveTab('ai')}
+                    className={cx(
+                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
+                        activeTab === 'ai'
+                            ? "border-b-2 border-brand text-brand-secondary"
+                            : "text-tertiary hover:text-secondary",
+                    )}
+                >
+                    <FontAwesomeIcon icon={faSparkles} className="size-3.5" />
+                    AI Assistant
+                </button>
+                <button
+                    onClick={() => setActiveTab('lead360')}
+                    className={cx(
+                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
+                        activeTab === 'lead360'
+                            ? "border-b-2 border-brand text-brand-secondary"
+                            : "text-tertiary hover:text-secondary",
+                    )}
+                >
+                    <FontAwesomeIcon icon={faUser} className="size-3.5" />
+                    Lead 360
+                </button>
+            </div>
+
+            {/* Tab content */}
+            <div className="flex-1 overflow-y-auto">
+                {activeTab === 'ai' && (
+                    <div className="flex h-full flex-col p-4">
+                        <AiChatPanel callerContext={callerContext} />
+                    </div>
+                )}
+                {activeTab === 'lead360' && (
+                    <Lead360Tab lead={selectedLead} activities={activities} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadActivity[] }) => {
+    if (!lead) {
+        return (
+            <div className="flex flex-col items-center justify-center py-16 text-center px-4">
+                <FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
+                <p className="text-sm text-tertiary">Select a lead from the worklist to see their full profile.</p>
+            </div>
+        );
+    }
+
+    const firstName = lead.contactName?.firstName ?? '';
+    const lastName = lead.contactName?.lastName ?? '';
+    const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
+    const phone = lead.contactPhone?.[0];
+    const email = lead.contactEmail?.[0]?.address;
+
+    const leadActivities = activities
+        .filter((a) => a.leadId === lead.id)
+        .sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? '').getTime() - new Date(a.occurredAt ?? a.createdAt ?? '').getTime())
+        .slice(0, 10);
+
+    return (
+        <div className="p-4 space-y-4">
+            {/* Profile */}
+            <div>
+                <h3 className="text-lg font-bold text-primary">{fullName}</h3>
+                {phone && <p className="text-sm text-secondary">{formatPhone(phone)}</p>}
+                {email && <p className="text-xs text-tertiary">{email}</p>}
+                <div className="mt-2 flex flex-wrap gap-1.5">
+                    {lead.leadStatus && <Badge size="sm" color="brand">{lead.leadStatus}</Badge>}
+                    {lead.leadSource && <Badge size="sm" color="gray">{lead.leadSource}</Badge>}
+                    {lead.priority && lead.priority !== 'NORMAL' && (
+                        <Badge size="sm" color={lead.priority === 'URGENT' ? 'error' : 'warning'}>{lead.priority}</Badge>
+                    )}
+                </div>
+                {lead.interestedService && (
+                    <p className="mt-2 text-sm text-secondary">Interested in: {lead.interestedService}</p>
+                )}
+                {lead.leadScore !== null && lead.leadScore !== undefined && (
+                    <p className="text-xs text-tertiary">Lead score: {lead.leadScore}</p>
+                )}
+            </div>
+
+            {/* AI Insight */}
+            {(lead.aiSummary || lead.aiSuggestedAction) && (
+                <div className="rounded-lg bg-brand-primary p-3">
+                    <div className="mb-1 flex items-center gap-1.5">
+                        <FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-brand-secondary">AI Insight</span>
+                    </div>
+                    {lead.aiSummary && <p className="text-xs text-primary">{lead.aiSummary}</p>}
+                    {lead.aiSuggestedAction && (
+                        <p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>
+                    )}
+                </div>
+            )}
+
+            {/* Activity timeline */}
+            {leadActivities.length > 0 && (
+                <div>
+                    <h4 className="mb-2 text-xs font-bold text-secondary uppercase">Activity</h4>
+                    <div className="space-y-2">
+                        {leadActivities.map((a) => (
+                            <div key={a.id} className="flex items-start gap-2">
+                                <div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
+                                <div className="min-w-0 flex-1">
+                                    <p className="text-xs text-primary">{a.summary}</p>
+                                    <p className="text-[10px] text-quaternary">
+                                        {a.activityType}{a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ''}
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

src/components/call-desk/worklist-panel.tsx

@@ -0,0 +1,223 @@
+import type { FC, HTMLAttributes } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPhoneXmark, faBell, faUsers } from '@fortawesome/pro-duotone-svg-icons';
+import { Badge } from '@/components/base/badges/badges';
+import { ClickToCallButton } from './click-to-call-button';
+import { formatPhone } from '@/lib/format';
+import { cx } from '@/utils/cx';
+
+type WorklistLead = {
+    id: string;
+    createdAt: string;
+    contactName: { firstName: string; lastName: string } | null;
+    contactPhone: { number: string; callingCode: string }[] | null;
+    leadSource: string | null;
+    leadStatus: string | null;
+    interestedService: string | null;
+    aiSummary: string | null;
+    aiSuggestedAction: string | null;
+};
+
+type WorklistFollowUp = {
+    id: string;
+    followUpType: string | null;
+    followUpStatus: string | null;
+    scheduledAt: string | null;
+    priority: string | null;
+};
+
+type MissedCall = {
+    id: string;
+    createdAt: string;
+    callerNumber: { number: string; callingCode: string }[] | null;
+    startedAt: string | null;
+    leadId: string | null;
+};
+
+interface WorklistPanelProps {
+    missedCalls: MissedCall[];
+    followUps: WorklistFollowUp[];
+    leads: WorklistLead[];
+    loading: boolean;
+    onSelectLead: (lead: WorklistLead) => void;
+    selectedLeadId: string | null;
+}
+
+const IconMissed: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faPhoneXmark} className={className} />
+);
+const IconFollowUp: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faBell} className={className} />
+);
+const IconLeads: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
+    <FontAwesomeIcon icon={faUsers} className={className} />
+);
+
+const formatAge = (dateStr: string): string => {
+    const minutes = Math.max(0, Math.round((Date.now() - new Date(dateStr).getTime()) / 60000));
+    if (minutes < 1) return 'Just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+};
+
+const followUpLabel: Record<string, string> = {
+    CALLBACK: 'Callback',
+    APPOINTMENT_REMINDER: 'Appointment Reminder',
+    POST_VISIT: 'Post-visit Follow-up',
+    MARKETING: 'Marketing',
+    REVIEW_REQUEST: 'Review Request',
+};
+
+const priorityConfig: Record<string, { color: 'error' | 'warning' | 'brand' | 'gray'; label: string }> = {
+    URGENT: { color: 'error', label: 'Urgent' },
+    HIGH: { color: 'warning', label: 'High' },
+    NORMAL: { color: 'brand', label: 'Normal' },
+    LOW: { color: 'gray', label: 'Low' },
+};
+
+const SectionHeader = ({ icon: Icon, title, count, color }: {
+    icon: FC<HTMLAttributes<HTMLOrSVGElement>>;
+    title: string;
+    count: number;
+    color: 'error' | 'blue' | 'brand';
+}) => (
+    <div className="flex items-center gap-2 px-4 pt-4 pb-2">
+        <Icon className="size-4 text-fg-quaternary" />
+        <span className="text-xs font-bold text-tertiary uppercase tracking-wider">{title}</span>
+        {count > 0 && <Badge size="sm" color={color} type="pill-color">{count}</Badge>}
+    </div>
+);
+
+export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelectLead, selectedLeadId }: WorklistPanelProps) => {
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center py-12">
+                <p className="text-sm text-tertiary">Loading worklist...</p>
+            </div>
+        );
+    }
+
+    const isEmpty = missedCalls.length === 0 && followUps.length === 0 && leads.length === 0;
+
+    if (isEmpty) {
+        return (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+                <p className="text-sm font-semibold text-primary">All clear</p>
+                <p className="text-xs text-tertiary mt-1">No pending items in your worklist</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="divide-y divide-secondary">
+            {/* Missed calls */}
+            {missedCalls.length > 0 && (
+                <div>
+                    <SectionHeader icon={IconMissed} title="Missed Calls" count={missedCalls.length} color="error" />
+                    <div className="px-3 pb-3">
+                        {missedCalls.map((call) => {
+                            const phone = call.callerNumber?.[0];
+                            const phoneDisplay = phone ? formatPhone(phone) : 'Unknown number';
+                            const phoneNumber = phone?.number ?? '';
+                            return (
+                                <div key={call.id} className="flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 hover:bg-primary_hover transition duration-100 ease-linear">
+                                    <div className="min-w-0 flex-1">
+                                        <div className="flex items-center gap-2">
+                                            <span className="text-sm font-semibold text-primary">{phoneDisplay}</span>
+                                            <Badge size="sm" color="error" type="pill-color">
+                                                {call.createdAt ? formatAge(call.createdAt) : 'Unknown'}
+                                            </Badge>
+                                        </div>
+                                        {call.startedAt && (
+                                            <p className="text-xs text-tertiary mt-0.5">
+                                                {new Date(call.startedAt).toLocaleTimeString('en-IN', { hour: 'numeric', minute: '2-digit', hour12: true })}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <ClickToCallButton phoneNumber={phoneNumber} leadId={call.leadId ?? undefined} label="Call Back" size="sm" />
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Follow-ups */}
+            {followUps.length > 0 && (
+                <div>
+                    <SectionHeader icon={IconFollowUp} title="Follow-ups" count={followUps.length} color="blue" />
+                    <div className="px-3 pb-3 space-y-1">
+                        {followUps.map((fu) => {
+                            const isOverdue = fu.followUpStatus === 'OVERDUE' ||
+                                (fu.scheduledAt && new Date(fu.scheduledAt) < new Date());
+                            const label = followUpLabel[fu.followUpType ?? ''] ?? fu.followUpType ?? 'Follow-up';
+                            const priority = priorityConfig[fu.priority ?? 'NORMAL'] ?? priorityConfig.NORMAL;
+
+                            return (
+                                <div key={fu.id} className={cx(
+                                    "rounded-lg px-3 py-2.5 transition duration-100 ease-linear",
+                                    isOverdue ? "bg-error-primary" : "hover:bg-primary_hover",
+                                )}>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-sm font-semibold text-primary">{label}</span>
+                                        {isOverdue && <Badge size="sm" color="error" type="pill-color">Overdue</Badge>}
+                                        <Badge size="sm" color={priority.color} type="pill-color">{priority.label}</Badge>
+                                    </div>
+                                    {fu.scheduledAt && (
+                                        <p className="text-xs text-tertiary mt-0.5">
+                                            {new Date(fu.scheduledAt).toLocaleString('en-IN', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true })}
+                                        </p>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* Assigned leads */}
+            {leads.length > 0 && (
+                <div>
+                    <SectionHeader icon={IconLeads} title="Assigned Leads" count={leads.length} color="brand" />
+                    <div className="px-3 pb-3 space-y-1">
+                        {leads.map((lead) => {
+                            const firstName = lead.contactName?.firstName ?? '';
+                            const lastName = lead.contactName?.lastName ?? '';
+                            const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
+                            const phone = lead.contactPhone?.[0];
+                            const phoneDisplay = phone ? formatPhone(phone) : '';
+                            const phoneNumber = phone?.number ?? '';
+                            const isSelected = lead.id === selectedLeadId;
+
+                            return (
+                                <div
+                                    key={lead.id}
+                                    onClick={() => onSelectLead(lead)}
+                                    className={cx(
+                                        "flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 cursor-pointer transition duration-100 ease-linear",
+                                        isSelected ? "bg-brand-primary ring-1 ring-brand" : "hover:bg-primary_hover",
+                                    )}
+                                >
+                                    <div className="min-w-0 flex-1">
+                                        <div className="flex items-baseline gap-2">
+                                            <span className="text-sm font-semibold text-primary">{fullName}</span>
+                                            {phoneDisplay && <span className="text-xs text-tertiary">{phoneDisplay}</span>}
+                                        </div>
+                                        {lead.interestedService && (
+                                            <p className="text-xs text-quaternary mt-0.5">{lead.interestedService}</p>
+                                        )}
+                                    </div>
+                                    <ClickToCallButton phoneNumber={phoneNumber} leadId={lead.id} size="sm" />
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export type { WorklistLead };