mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
fix: call desk layout — collapsible context panel, worklist/calls tabs, phone numbers
- 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>
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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,23 +38,20 @@ 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">
|
||||
{/* 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"
|
||||
@@ -60,21 +64,57 @@ export const CallDeskPage = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 2-panel layout — only this area scrolls */}
|
||||
<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) */}
|
||||
{isInCall && (
|
||||
<>
|
||||
<ActiveCallCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} />
|
||||
<CallPrepCard lead={activeLeadFull} callerPhone={callerNumber ?? ''} activities={leadActivities} />
|
||||
</>
|
||||
<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's Calls ({todaysCalls.length})
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Worklist (visible when idle) */}
|
||||
{!isInCall && (
|
||||
{/* 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>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* 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 tab */}
|
||||
{!isInCall && mainTab === 'worklist' && (
|
||||
<WorklistPanel
|
||||
missedCalls={missedCalls}
|
||||
followUps={followUps}
|
||||
@@ -85,19 +125,23 @@ export const CallDeskPage = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Today's calls — always visible */}
|
||||
{/* 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">
|
||||
{/* 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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user