From 94f4a180358d0fcef90f7668bd2a03b95b5241a0 Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Thu, 19 Mar 2026 13:13:19 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20call=20desk=20layout=20=E2=80=94=20colla?=
 =?UTF-8?q?psible=20context=20panel,=20worklist/calls=20tabs,=20phone=20nu?=
 =?UTF-8?q?mbers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Context panel now collapsible via toggle button (sidebar icon in status bar)
- Fixed width 400px when open, full-width worklist when closed
- Worklist and Today's Calls as separate tabs instead of stacked
- Fix missed calls callerNumber transform (PHONES composite → array)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/hooks/use-worklist.ts |   3 +
 src/pages/call-desk.tsx   | 114 ++++++++++++++++++++++++++------------
 2 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/src/hooks/use-worklist.ts b/src/hooks/use-worklist.ts
index de4bc49..e632e96 100644
--- a/src/hooks/use-worklist.ts
+++ b/src/hooks/use-worklist.ts
@@ -102,6 +102,9 @@ export const useWorklist = (): UseWorklistResult => {
                     ...call,
                     callDirection: call.direction ?? call.callDirection,
                     durationSeconds: call.durationSec ?? call.durationSeconds ?? 0,
+                    callerNumber: call.callerNumber?.primaryPhoneNumber
+                        ? [{ number: call.callerNumber.primaryPhoneNumber, callingCode: '+91' }]
+                        : call.callerNumber,
                 })),
                 followUps: (json.followUps ?? []).map((fu: any) => ({
                     ...fu,
diff --git a/src/pages/call-desk.tsx b/src/pages/call-desk.tsx
index d637a9f..035d67f 100644
--- a/src/pages/call-desk.tsx
+++ b/src/pages/call-desk.tsx
@@ -1,4 +1,6 @@
 import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSidebarFlip, faSidebar } from '@fortawesome/pro-duotone-svg-icons';
 import { useAuth } from '@/providers/auth-provider';
 import { useData } from '@/providers/data-provider';
 import { useWorklist } from '@/hooks/use-worklist';
@@ -11,6 +13,9 @@ import { ActiveCallCard } from '@/components/call-desk/active-call-card';
 import { CallPrepCard } from '@/components/call-desk/call-prep-card';
 import { CallLog } from '@/components/call-desk/call-log';
 import { BadgeWithDot, Badge } from '@/components/base/badges/badges';
+import { cx } from '@/utils/cx';
+
+type MainTab = 'worklist' | 'calls';
 
 const isToday = (dateStr: string): boolean => {
     const d = new Date(dateStr);
@@ -24,6 +29,8 @@ export const CallDeskPage = () => {
     const { connectionStatus, isRegistered, callState, callerNumber } = useSip();
     const { missedCalls, followUps, marketingLeads, totalPending, loading } = useWorklist();
     const [selectedLead, setSelectedLead] = useState<WorklistLead | null>(null);
+    const [contextOpen, setContextOpen] = useState(true);
+    const [mainTab, setMainTab] = useState<MainTab>('worklist');
 
     const todaysCalls = calls.filter(
         (c) => c.agentName === user.name && c.startedAt !== null && isToday(c.startedAt),
@@ -31,50 +38,83 @@ export const CallDeskPage = () => {
 
     const isInCall = callState === 'ringing-in' || callState === 'ringing-out' || callState === 'active';
 
-    // Find lead matching caller number during active call
     const callerLead = callerNumber
         ? marketingLeads.find((l) => l.contactPhone?.[0]?.number?.endsWith(callerNumber) || callerNumber.endsWith(l.contactPhone?.[0]?.number ?? '---'))
         : null;
 
     const activeLead = isInCall ? (callerLead ?? selectedLead) : selectedLead;
-
-    // Convert worklist lead to full Lead type for components that need it
     const activeLeadFull = activeLead as any;
 
     return (
         <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Sticky header */}
             <TopBar title="Call Desk" subtitle={`${user.name} \u00B7 Global Hospital`} />
 
-            {/* Status bar — sticky below header */}
-            <div className="flex shrink-0 items-center gap-2 border-b border-secondary px-6 py-2">
-                <BadgeWithDot
-                    color={isRegistered ? 'success' : connectionStatus === 'connecting' ? 'warning' : 'gray'}
-                    size="sm"
-                    type="pill-color"
-                >
-                    {isRegistered ? 'Ready' : connectionStatus}
-                </BadgeWithDot>
-                {totalPending > 0 && (
-                    <Badge size="sm" color="brand" type="pill-color">{totalPending} pending</Badge>
-                )}
+            {/* Status bar */}
+            <div className="flex shrink-0 items-center justify-between border-b border-secondary px-6 py-2">
+                <div className="flex items-center gap-2">
+                    <BadgeWithDot
+                        color={isRegistered ? 'success' : connectionStatus === 'connecting' ? 'warning' : 'gray'}
+                        size="sm"
+                        type="pill-color"
+                    >
+                        {isRegistered ? 'Ready' : connectionStatus}
+                    </BadgeWithDot>
+                    {totalPending > 0 && (
+                        <Badge size="sm" color="brand" type="pill-color">{totalPending} pending</Badge>
+                    )}
+                </div>
+
+                <div className="flex items-center gap-3">
+                    {/* Main tab toggle */}
+                    {!isInCall && (
+                        <div className="flex rounded-lg border border-secondary">
+                            <button
+                                onClick={() => setMainTab('worklist')}
+                                className={cx(
+                                    "px-3 py-1 text-xs font-semibold transition duration-100 ease-linear rounded-l-lg",
+                                    mainTab === 'worklist' ? "bg-active text-brand-secondary" : "text-tertiary hover:text-secondary",
+                                )}
+                            >
+                                Worklist
+                            </button>
+                            <button
+                                onClick={() => setMainTab('calls')}
+                                className={cx(
+                                    "px-3 py-1 text-xs font-semibold transition duration-100 ease-linear rounded-r-lg",
+                                    mainTab === 'calls' ? "bg-active text-brand-secondary" : "text-tertiary hover:text-secondary",
+                                )}
+                            >
+                                Today&apos;s Calls ({todaysCalls.length})
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Context panel toggle */}
+                    <button
+                        onClick={() => setContextOpen(!contextOpen)}
+                        className="flex size-7 items-center justify-center rounded-md text-fg-quaternary hover:text-fg-secondary hover:bg-secondary transition duration-100 ease-linear"
+                        title={contextOpen ? 'Hide AI panel' : 'Show AI panel'}
+                    >
+                        <FontAwesomeIcon icon={contextOpen ? faSidebarFlip : faSidebar} className="size-4" />
+                    </button>
+                </div>
             </div>
 
-            {/* 2-panel layout — only this area scrolls */}
+            {/* Main content */}
             <div className="flex flex-1 overflow-hidden">
-                {/* Main panel (60%) */}
-                <div className="flex flex-[3] flex-col overflow-y-auto">
-                    <div className="flex-1 space-y-4 p-5">
-                        {/* Active call card (replaces worklist when in call) */}
+                {/* Main panel — expands when context is closed */}
+                <div className="flex flex-1 flex-col overflow-y-auto">
+                    <div className="flex-1 p-5">
+                        {/* Active call */}
                         {isInCall && (
-                            <>
+                            <div className="space-y-4">
                                 <ActiveCallCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} />
                                 <CallPrepCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} activities={leadActivities} />
-                            </>
+                            </div>
                         )}
 
-                        {/* Worklist (visible when idle) */}
-                        {!isInCall && (
+                        {/* Worklist tab */}
+                        {!isInCall && mainTab === 'worklist' && (
                             <WorklistPanel
                                 missedCalls={missedCalls}
                                 followUps={followUps}
@@ -85,19 +125,23 @@ export const CallDeskPage = () => {
                             />
                         )}
 
-                        {/* Today's calls — always visible */}
-                        <CallLog calls={todaysCalls} />
+                        {/* Today's Calls tab */}
+                        {!isInCall && mainTab === 'calls' && (
+                            <CallLog calls={todaysCalls} />
+                        )}
                     </div>
                 </div>
 
-                {/* Context panel (40%) — border-left, fixed height */}
-                <div className="hidden flex-[2] border-l border-secondary bg-primary xl:flex xl:flex-col">
-                    <ContextPanel
-                        selectedLead={activeLeadFull}
-                        activities={leadActivities}
-                        callerPhone={callerNumber ?? undefined}
-                    />
-                </div>
+                {/* Context panel — collapsible */}
+                {contextOpen && (
+                    <div className="w-[400px] shrink-0 border-l border-secondary bg-primary flex flex-col">
+                        <ContextPanel
+                            selectedLead={activeLeadFull}
+                            activities={leadActivities}
+                            callerPhone={callerNumber ?? undefined}
+                        />
+                    </div>
+                )}
             </div>
         </div>
     );