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:
223
src/components/call-desk/worklist-panel.tsx
Normal file
223
src/components/call-desk/worklist-panel.tsx
Normal file
@@ -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 };
|
||||
Reference in New Issue
Block a user