mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat: add worklist with missed calls, follow-ups, and leads sections
This commit is contained in:
@@ -1,31 +1,101 @@
|
||||
import { useState } from 'react';
|
||||
import type { FC, HTMLAttributes } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faPhoneXmark, faBell, faUsers, faPhoneArrowUp, faSparkles, faChartSimple } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { useAuth } from '@/providers/auth-provider';
|
||||
import { useData } from '@/providers/data-provider';
|
||||
import { useLeads } from '@/hooks/use-leads';
|
||||
import { useWorklist } from '@/hooks/use-worklist';
|
||||
import { useSip } from '@/providers/sip-provider';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import { IncomingCallCard } from '@/components/call-desk/incoming-call-card';
|
||||
import { ClickToCallButton } from '@/components/call-desk/click-to-call-button';
|
||||
import { CallLog } from '@/components/call-desk/call-log';
|
||||
import { DailyStats } from '@/components/call-desk/daily-stats';
|
||||
import { BadgeWithDot } from '@/components/base/badges/badges';
|
||||
import { AiChatPanel } from '@/components/call-desk/ai-chat-panel';
|
||||
import { Badge, BadgeWithDot } from '@/components/base/badges/badges';
|
||||
import { formatPhone } from '@/lib/format';
|
||||
|
||||
// FA icon wrappers compatible with Untitled UI component props
|
||||
const IconPhoneMissed: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
|
||||
<FontAwesomeIcon icon={faPhoneXmark} className={className} />
|
||||
);
|
||||
const IconBell: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
|
||||
<FontAwesomeIcon icon={faBell} className={className} />
|
||||
);
|
||||
const IconUsers: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
|
||||
<FontAwesomeIcon icon={faUsers} className={className} />
|
||||
);
|
||||
const IconPhoneOutgoing: FC<HTMLAttributes<HTMLOrSVGElement>> = ({ className }) => (
|
||||
<FontAwesomeIcon icon={faPhoneArrowUp} className={className} />
|
||||
);
|
||||
|
||||
const isToday = (dateStr: string): boolean => {
|
||||
const d = new Date(dateStr);
|
||||
const now = new Date();
|
||||
return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate();
|
||||
};
|
||||
|
||||
// Calculate minutes since a given ISO timestamp
|
||||
const minutesSince = (dateStr: string): number => {
|
||||
return Math.max(0, Math.round((Date.now() - new Date(dateStr).getTime()) / 60000));
|
||||
};
|
||||
|
||||
// SLA color based on minutes elapsed
|
||||
const getSlaColor = (minutes: number): 'success' | 'warning' | 'error' => {
|
||||
if (minutes < 15) return 'success';
|
||||
if (minutes <= 30) return 'warning';
|
||||
return 'error';
|
||||
};
|
||||
|
||||
// Format minutes into a readable age string
|
||||
const formatAge = (minutes: number): string => {
|
||||
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 ${minutes % 60}m ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
};
|
||||
|
||||
// Section header with count badge
|
||||
const SectionHeader = ({
|
||||
icon: Icon,
|
||||
title,
|
||||
count,
|
||||
badgeColor,
|
||||
}: {
|
||||
icon: FC<HTMLAttributes<HTMLOrSVGElement>>;
|
||||
title: string;
|
||||
count: number;
|
||||
badgeColor: 'error' | 'blue' | 'brand';
|
||||
}) => (
|
||||
<div className="flex items-center gap-2 border-b border-secondary px-5 py-3">
|
||||
<Icon className="size-4 text-fg-quaternary" />
|
||||
<h3 className="text-sm font-bold text-primary">{title}</h3>
|
||||
{count > 0 && (
|
||||
<Badge size="sm" color={badgeColor} type="pill-color">
|
||||
{count}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const CallDeskPage = () => {
|
||||
const { user } = useAuth();
|
||||
const { calls, leadActivities, campaigns } = useData();
|
||||
const { leads } = useLeads();
|
||||
const { leads: fallbackLeads } = useLeads();
|
||||
const { connectionStatus, isRegistered } = useSip();
|
||||
const { missedCalls, followUps, marketingLeads, totalPending, loading, error } = useWorklist();
|
||||
|
||||
const todaysCalls = calls.filter(
|
||||
(c) => c.agentName === user.name && c.startedAt !== null && isToday(c.startedAt),
|
||||
);
|
||||
|
||||
// When sidecar is unavailable, show fallback leads from DataProvider
|
||||
const hasSidecarData = error === null && !loading;
|
||||
const showFallbackLeads = !hasSidecarData && fallbackLeads.length > 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col">
|
||||
<TopBar title="Call Desk" subtitle={`${user.name} \u00B7 Global Hospital`} />
|
||||
@@ -41,17 +111,167 @@ export const CallDeskPage = () => {
|
||||
>
|
||||
{isRegistered ? 'Phone Ready' : `Phone: ${connectionStatus}`}
|
||||
</BadgeWithDot>
|
||||
|
||||
{hasSidecarData && totalPending > 0 && (
|
||||
<Badge size="sm" color="brand" type="pill-color">
|
||||
{totalPending} pending
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{error !== null && (
|
||||
<Badge size="sm" color="warning" type="pill-color">
|
||||
Offline mode
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Worklist: leads with click-to-call */}
|
||||
{leads.length > 0 && (
|
||||
{/* Section 1: Missed Calls (highest priority) */}
|
||||
{hasSidecarData && missedCalls.length > 0 && (
|
||||
<div className="rounded-2xl border border-error bg-primary">
|
||||
<SectionHeader icon={IconPhoneMissed} title="Missed Calls" count={missedCalls.length} badgeColor="error" />
|
||||
<div className="divide-y divide-secondary">
|
||||
{missedCalls.map((call) => {
|
||||
const callerPhone = call.callerNumber?.[0];
|
||||
const phoneDisplay = callerPhone ? formatPhone(callerPhone) : 'Unknown';
|
||||
const phoneNumber = callerPhone?.number ?? '';
|
||||
const minutesAgo = call.createdAt ? minutesSince(call.createdAt) : 0;
|
||||
const slaColor = getSlaColor(minutesAgo);
|
||||
|
||||
return (
|
||||
<div key={call.id} className="flex items-center justify-between gap-3 px-5 py-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-primary">{phoneDisplay}</span>
|
||||
<BadgeWithDot color={slaColor} size="sm" type="pill-color">
|
||||
{formatAge(minutesAgo)}
|
||||
</BadgeWithDot>
|
||||
</div>
|
||||
{call.startedAt !== null && (
|
||||
<p className="text-xs text-tertiary">
|
||||
{new Date(call.startedAt).toLocaleTimeString('en-IN', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ClickToCallButton phoneNumber={phoneNumber} label="Call Back" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section 2: Follow-ups Due */}
|
||||
{hasSidecarData && followUps.length > 0 && (
|
||||
<div className="rounded-2xl border border-secondary bg-primary">
|
||||
<SectionHeader icon={IconBell} title="Follow-ups" count={followUps.length} badgeColor="blue" />
|
||||
<div className="divide-y divide-secondary">
|
||||
{followUps.map((followUp) => {
|
||||
const isOverdue =
|
||||
followUp.followUpStatus === 'OVERDUE' ||
|
||||
(followUp.scheduledAt !== null && new Date(followUp.scheduledAt) < new Date());
|
||||
const scheduledDisplay = followUp.scheduledAt
|
||||
? new Date(followUp.scheduledAt).toLocaleString('en-IN', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
})
|
||||
: 'Not scheduled';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={followUp.id}
|
||||
className={`flex items-center justify-between gap-3 px-5 py-3 ${isOverdue ? 'bg-error-primary/5' : ''}`}
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-primary">
|
||||
{followUp.followUpType ?? 'Follow-up'}
|
||||
</span>
|
||||
{isOverdue && (
|
||||
<Badge size="sm" color="error" type="pill-color">
|
||||
Overdue
|
||||
</Badge>
|
||||
)}
|
||||
{followUp.priority === 'HIGH' || followUp.priority === 'URGENT' ? (
|
||||
<Badge size="sm" color="warning" type="pill-color">
|
||||
{followUp.priority}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-xs text-tertiary">{scheduledDisplay}</p>
|
||||
</div>
|
||||
<ClickToCallButton phoneNumber="" label="Call" />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section 3: Marketing Leads (from sidecar or fallback) */}
|
||||
{hasSidecarData && marketingLeads.length > 0 && (
|
||||
<div className="rounded-2xl border border-secondary bg-primary">
|
||||
<SectionHeader icon={IconUsers} title="Assigned Leads" count={marketingLeads.length} badgeColor="brand" />
|
||||
<div className="divide-y divide-secondary">
|
||||
{marketingLeads.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) : 'No phone';
|
||||
const phoneNumber = phone?.number ?? '';
|
||||
const daysSinceCreated = lead.createdAt
|
||||
? Math.floor((Date.now() - new Date(lead.createdAt).getTime()) / (1000 * 60 * 60 * 24))
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div key={lead.id} className="flex items-center justify-between gap-3 px-5 py-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-primary">{fullName}</span>
|
||||
<span className="text-sm text-tertiary">{phoneDisplay}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-quaternary">
|
||||
{lead.leadSource !== null && <span>{lead.leadSource}</span>}
|
||||
{lead.interestedService !== null && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{lead.interestedService}</span>
|
||||
</>
|
||||
)}
|
||||
{daysSinceCreated > 0 && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span>{daysSinceCreated}d old</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ClickToCallButton phoneNumber={phoneNumber} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fallback: show DataProvider leads when sidecar is unavailable */}
|
||||
{showFallbackLeads && (
|
||||
<div className="rounded-2xl border border-secondary bg-primary">
|
||||
<div className="border-b border-secondary px-5 py-3">
|
||||
<h3 className="text-sm font-bold text-primary">Worklist</h3>
|
||||
<p className="text-xs text-tertiary">Click to start an outbound call</p>
|
||||
</div>
|
||||
<div className="divide-y divide-secondary">
|
||||
{leads.slice(0, 10).map((lead) => {
|
||||
{fallbackLeads.slice(0, 10).map((lead) => {
|
||||
const firstName = lead.contactName?.firstName ?? '';
|
||||
const lastName = lead.contactName?.lastName ?? '';
|
||||
const fullName = `${firstName} ${lastName}`.trim() || 'Unknown';
|
||||
@@ -76,7 +296,23 @@ export const CallDeskPage = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Incoming call card — driven by SIP phone state via the floating CallWidget */}
|
||||
{/* Loading state */}
|
||||
{loading && (
|
||||
<div className="rounded-2xl border border-secondary bg-primary px-5 py-8 text-center">
|
||||
<p className="text-sm text-tertiary">Loading worklist...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{hasSidecarData && missedCalls.length === 0 && followUps.length === 0 && marketingLeads.length === 0 && !loading && (
|
||||
<div className="rounded-2xl border border-secondary bg-primary px-5 py-8 text-center">
|
||||
<IconPhoneOutgoing className="mx-auto mb-2 size-6 text-fg-quaternary" />
|
||||
<p className="text-sm font-semibold text-primary">All clear</p>
|
||||
<p className="text-xs text-tertiary">No pending items in your worklist</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Incoming call card */}
|
||||
<IncomingCallCard
|
||||
callState="idle"
|
||||
lead={null}
|
||||
|
||||
Reference in New Issue
Block a user