mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
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>
This commit is contained in:
157
src/components/call-desk/context-panel.tsx
Normal file
157
src/components/call-desk/context-panel.tsx
Normal file
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user