helix-admin/helix-engage
1
0
Fork 0
mirror of https://dev.azure.com/globalhealthx/EMR/_git/helix-engage synced 2026-04-12 02:38:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: disposition modal, persistent top bar, pagination, QA fixes

Browse Source 
- DispositionModal: single modal for all call endings. Dismissable (agent can resume call).
  Agent clicks End → modal → select reason → hangup + dispose. Caller disconnects → same modal.
- One call screen: CallWidget stripped to ringing notification + auto-redirect to Call Desk.
- Persistent top bar in AppShell: agent status toggle + network indicator on all pages.
- Network indicator always visible (Connected/Unstable/No connection).
- Pagination: Untitled UI PaginationCardDefault on Call History + Appointments (20/page).
- Pinned table headers/footers: sticky column headers, scrollable body, pinned pagination.
  Applied to Call Desk worklist, Call History, Appointments, Call Recordings, Missed Calls.
- "Patient" → "Caller" column label in Call History.
- Offline → Ready toggle enabled.
- Profile status dot reflects Ozonetel state.
- NavAccountCard: popover placement top, View Profile + Account Settings restored.
- WIP pages for /profile and /account-settings.
- Enquiry form PHONE_INQUIRY → PHONE enum fix.
- Force Ready / View Profile / Account Settings removed then restored properly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-25 20:29:54 +05:30
parent daa2fbb0c2
commit e6b2208077
21 changed files with 645 additions and 816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/application/app-navigation/base-components/nav-account-card.tsx
View File

@@ -2,12 +2,11 @@ import type { FC, HTMLAttributes } from "react";
import { useCallback, useEffect, useRef } from "react";
import type { Placement } from "@react-types/overlays";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser, faGear, faArrowRightFromBracket, faPhoneVolume, faSort } from "@fortawesome/pro-duotone-svg-icons";
import { faArrowRightFromBracket, faSort, faUser, faGear } from "@fortawesome/pro-duotone-svg-icons";
const IconUser: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faUser} className={className} />;
const IconSettings: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faGear} className={className} />;
const IconLogout: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRightFromBracket} className={className} />;
const IconForceReady: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faPhoneVolume} className={className} />;
import { useFocusManager } from "react-aria";
import type { DialogProps as AriaDialogProps } from "react-aria-components";
import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
@@ -32,9 +31,10 @@ type NavAccountType = {
export const NavAccountMenu = ({
className,
onSignOut,
onForceReady,
onViewProfile,
onAccountSettings,
...dialogProps
}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string; onSignOut?: () => void; onForceReady?: () => void }) => {
}: AriaDialogProps & { className?: string; accounts?: NavAccountType[]; selectedAccountId?: string; onSignOut?: () => void; onViewProfile?: () => void; onAccountSettings?: () => void }) => {
const focusManager = useFocusManager();
const dialogRef = useRef<HTMLDivElement>(null);
@@ -75,12 +75,10 @@ export const NavAccountMenu = ({
<>
<div className="rounded-xl bg-primary ring-1 ring-secondary">
<div className="flex flex-col gap-0.5 py-1.5">
<NavAccountCardMenuItem label="View profile" icon={IconUser} shortcut="⌘K->P" />
<NavAccountCardMenuItem label="Account settings" icon={IconSettings} shortcut="⌘S" />
<NavAccountCardMenuItem label="Force Ready" icon={IconForceReady} onClick={() => { close(); onForceReady?.(); }} />
<NavAccountCardMenuItem label="View profile" icon={IconUser} onClick={() => { close(); onViewProfile?.(); }} />
<NavAccountCardMenuItem label="Account settings" icon={IconSettings} onClick={() => { close(); onAccountSettings?.(); }} />
</div>
</div>
<div className="pt-1 pb-1.5">
<NavAccountCardMenuItem label="Sign out" icon={IconLogout} shortcut="⌥⇧Q" onClick={() => { close(); onSignOut?.(); }} />
</div>
@@ -126,13 +124,15 @@ export const NavAccountCard = ({
selectedAccountId,
items = [],
onSignOut,
onForceReady,
onViewProfile,
onAccountSettings,
}: {
popoverPlacement?: Placement;
selectedAccountId?: string;
items?: NavAccountType[];
onSignOut?: () => void;
onForceReady?: () => void;
onViewProfile?: () => void;
onAccountSettings?: () => void;
}) => {
const triggerRef = useRef<HTMLDivElement>(null);
const isDesktop = useBreakpoint("lg");
@@ -173,7 +173,7 @@ export const NavAccountCard = ({
)
}
>
<NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} onSignOut={onSignOut} onForceReady={onForceReady} />
<NavAccountMenu selectedAccountId={selectedAccountId} accounts={items} onSignOut={onSignOut} onViewProfile={onViewProfile} onAccountSettings={onAccountSettings} />
</AriaPopover>
</AriaDialogTrigger>
</div>

146
src/components/application/pagination/pagination.tsx
View File

@@ -1,11 +1,10 @@
import type { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faArrowRight } from "@fortawesome/pro-duotone-svg-icons";
import { Button } from "@/components/base/buttons/button";
const ArrowLeft: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowLeft} className={className} />;
const ArrowRight: FC<{ className?: string }> = ({ className }) => <FontAwesomeIcon icon={faArrowRight} className={className} />;
import { ButtonGroup, ButtonGroupItem } from "@/components/base/button-group/button-group";
import { Button } from "@/components/base/buttons/button";
import { useBreakpoint } from "@/hooks/use-breakpoint";
import { cx } from "@/utils/cx";
import type { PaginationRootProps } from "./pagination-base";
@@ -23,7 +22,7 @@ const PaginationItem = ({ value, rounded, isCurrent }: { value: number; rounded?
isCurrent={isCurrent}
className={({ isSelected }) =>
cx(
"flex size-10 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
"flex size-9 cursor-pointer items-center justify-center p-3 text-sm font-medium text-quaternary outline-focus-ring transition duration-100 ease-linear hover:bg-primary_hover hover:text-secondary focus-visible:z-10 focus-visible:bg-primary_hover focus-visible:outline-2 focus-visible:outline-offset-2",
rounded ? "rounded-full" : "rounded-lg",
isSelected && "bg-primary_hover text-secondary",
)
@@ -34,43 +33,6 @@ const PaginationItem = ({ value, rounded, isCurrent }: { value: number; rounded?
);
};
interface MobilePaginationProps {
/** The current page. */
page?: number;
/** The total number of pages. */
total?: number;
/** The class name of the pagination component. */
className?: string;
/** The function to call when the page changes. */
onPageChange?: (page: number) => void;
}
const MobilePagination = ({ page = 1, total = 10, className, onPageChange }: MobilePaginationProps) => {
return (
<nav aria-label="Pagination" className={cx("flex items-center justify-between md:hidden", className)}>
<Button
aria-label="Go to previous page"
iconLeading={ArrowLeft}
color="secondary"
size="sm"
onClick={() => onPageChange?.(Math.max(0, page - 1))}
/>
<span className="text-sm text-fg-secondary">
Page <span className="font-medium">{page}</span> of <span className="font-medium">{total}</span>
</span>
<Button
aria-label="Go to next page"
iconLeading={ArrowRight}
color="secondary"
size="sm"
onClick={() => onPageChange?.(Math.min(total, page + 1))}
/>
</nav>
);
};
export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className, ...props }: PaginationProps) => {
const isDesktop = useBreakpoint("md");
@@ -84,7 +46,7 @@ export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className
<div className="hidden flex-1 justify-start md:flex">
<Pagination.PrevTrigger asChild>
<Button iconLeading={ArrowLeft} color="link-gray" size="sm">
{isDesktop ? "Previous" : undefined}{" "}
{isDesktop ? "Previous" : undefined}
</Button>
</Pagination.PrevTrigger>
</div>
@@ -103,7 +65,7 @@ export const PaginationPageDefault = ({ rounded, page = 1, total = 10, className
page.type === "page" ? (
<PaginationItem key={index} rounded={rounded} {...page} />
) : (
<Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
<Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
&#8230;
</Pagination.Ellipsis>
),
@@ -159,7 +121,7 @@ export const PaginationPageMinimalCenter = ({ rounded, page = 1, total = 10, cla
page.type === "page" ? (
<PaginationItem key={index} rounded={rounded} {...page} />
) : (
<Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
<Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
&#8230;
</Pagination.Ellipsis>
),
@@ -210,7 +172,7 @@ export const PaginationCardDefault = ({ rounded, page = 1, total = 10, ...props
page.type === "page" ? (
<PaginationItem key={index} rounded={rounded} {...page} />
) : (
<Pagination.Ellipsis key={index} className="flex size-10 shrink-0 items-center justify-center text-tertiary">
<Pagination.Ellipsis key={index} className="flex size-9 shrink-0 items-center justify-center text-tertiary">
&#8230;
</Pagination.Ellipsis>
),
@@ -235,99 +197,3 @@ export const PaginationCardDefault = ({ rounded, page = 1, total = 10, ...props
);
};
interface PaginationCardMinimalProps {
/** The current page. */
page?: number;
/** The total number of pages. */
total?: number;
/** The alignment of the pagination. */
align?: "left" | "center" | "right";
/** The class name of the pagination component. */
className?: string;
/** The function to call when the page changes. */
onPageChange?: (page: number) => void;
}
export const PaginationCardMinimal = ({ page = 1, total = 10, align = "left", onPageChange, className }: PaginationCardMinimalProps) => {
return (
<div className={cx("border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4", className)}>
<MobilePagination page={page} total={total} onPageChange={onPageChange} />
<nav aria-label="Pagination" className={cx("hidden items-center gap-3 md:flex", align === "center" && "justify-between")}>
<div className={cx(align === "center" && "flex flex-1 justify-start")}>
<Button isDisabled={page === 1} color="secondary" size="sm" onClick={() => onPageChange?.(Math.max(0, page - 1))}>
Previous
</Button>
</div>
<span
className={cx(
"text-sm font-medium text-fg-secondary",
align === "right" && "order-first mr-auto",
align === "left" && "order-last ml-auto",
)}
>
Page {page} of {total}
</span>
<div className={cx(align === "center" && "flex flex-1 justify-end")}>
<Button isDisabled={page === total} color="secondary" size="sm" onClick={() => onPageChange?.(Math.min(total, page + 1))}>
Next
</Button>
</div>
</nav>
</div>
);
};
interface PaginationButtonGroupProps extends Partial<Omit<PaginationRootProps, "children">> {
/** The alignment of the pagination. */
align?: "left" | "center" | "right";
}
export const PaginationButtonGroup = ({ align = "left", page = 1, total = 10, ...props }: PaginationButtonGroupProps) => {
const isDesktop = useBreakpoint("md");
return (
<div
className={cx(
"flex border-t border-secondary px-4 py-3 md:px-6 md:pt-3 md:pb-4",
align === "left" && "justify-start",
align === "center" && "justify-center",
align === "right" && "justify-end",
)}
>
<Pagination.Root {...props} page={page} total={total}>
<Pagination.Context>
{({ pages }) => (
<ButtonGroup size="md">
<Pagination.PrevTrigger asChild>
<ButtonGroupItem iconLeading={ArrowLeft}>{isDesktop ? "Previous" : undefined}</ButtonGroupItem>
</Pagination.PrevTrigger>
{pages.map((page, index) =>
page.type === "page" ? (
<Pagination.Item key={index} {...page} asChild>
<ButtonGroupItem isSelected={page.isCurrent} className="size-10 items-center justify-center">
{page.value}
</ButtonGroupItem>
</Pagination.Item>
) : (
<Pagination.Ellipsis key={index}>
<ButtonGroupItem className="pointer-events-none size-10 items-center justify-center rounded-none!">
&#8230;
</ButtonGroupItem>
</Pagination.Ellipsis>
),
)}
<Pagination.NextTrigger asChild>
<ButtonGroupItem iconTrailing={ArrowRight}>{isDesktop ? "Next" : undefined}</ButtonGroupItem>
</Pagination.NextTrigger>
</ButtonGroup>
)}
</Pagination.Context>
</Pagination.Root>
</div>
);
};

10
src/components/application/table/table.tsx
View File

@@ -55,7 +55,7 @@ const TableContext = createContext<{ size: "sm" | "md" }>({ size: "md" });
const TableCardRoot = ({ children, className, size = "md", ...props }: HTMLAttributes<HTMLDivElement> & { size?: "sm" | "md" }) => {
return (
<TableContext.Provider value={{ size }}>
<div {...props} className={cx("overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className)}>
<div {...props} className={cx("flex flex-col overflow-hidden rounded-xl bg-primary shadow-xs ring-1 ring-secondary", className)}>
{children}
</div>
</TableContext.Provider>
@@ -81,7 +81,7 @@ const TableCardHeader = ({ title, badge, description, contentTrailing, className
return (
<div
className={cx(
"relative flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row",
"relative shrink-0 flex flex-col items-start gap-4 border-b border-secondary bg-primary px-4 md:flex-row",
size === "sm" ? "py-4 md:px-5" : "py-5 md:px-6",
className,
)}
@@ -115,8 +115,8 @@ const TableRoot = ({ className, size = "md", ...props }: TableRootProps) => {
return (
<TableContext.Provider value={{ size: context?.size ?? size }}>
<div className="overflow-x-auto">
<AriaTable className={(state) => cx("w-full overflow-x-hidden", typeof className === "function" ? className(state) : className)} {...props} />
<div className="flex-1 overflow-auto min-h-0">
<AriaTable className={(state) => cx("w-full", typeof className === "function" ? className(state) : className)} {...props} />
</div>
</TableContext.Provider>
);
@@ -138,7 +138,7 @@ const TableHeader = <T extends object>({ columns, children, bordered = true, cla
{...props}
className={(state) =>
cx(
"relative bg-secondary",
"relative bg-secondary sticky top-0 z-10",
size === "sm" ? "h-9" : "h-11",
// Row border—using an "after" pseudo-element to avoid the border taking up space.

287
src/components/call-desk/active-call-card.tsx
View File

@@ -11,7 +11,7 @@ import { useSetAtom } from 'jotai';
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state';
import { setOutboundPending } from '@/state/sip-manager';
import { useSip } from '@/providers/sip-provider';
import { DispositionForm } from './disposition-form';
import { DispositionModal } from './disposition-modal';
import { AppointmentForm } from './appointment-form';
import { TransferDialog } from './transfer-dialog';
import { EnquiryForm } from './enquiry-form';
@@ -21,8 +21,6 @@ import { cx } from '@/utils/cx';
import { notify } from '@/lib/toast';
import type { Lead, CallDisposition } from '@/types/entities';
type PostCallStage = 'disposition' | 'appointment' | 'follow-up' | 'done';
interface ActiveCallCardProps {
lead: Lead | null;
callerPhone: string;
@@ -41,22 +39,28 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
const setCallState = useSetAtom(sipCallStateAtom);
const setCallerNumber = useSetAtom(sipCallerNumberAtom);
const setCallUcid = useSetAtom(sipCallUcidAtom);
const [postCallStage, setPostCallStage] = useState<PostCallStage | null>(null);
const [appointmentOpen, setAppointmentOpen] = useState(false);
const [appointmentBookedDuringCall, setAppointmentBookedDuringCall] = useState(false);
const [transferOpen, setTransferOpen] = useState(false);
const [recordingPaused, setRecordingPaused] = useState(false);
const [enquiryOpen, setEnquiryOpen] = useState(false);
// Capture direction at mount — survives through disposition stage
const [dispositionOpen, setDispositionOpen] = useState(false);
const [callerDisconnected, setCallerDisconnected] = useState(false);
const callDirectionRef = useRef(callState === 'ringing-out' ? 'OUTBOUND' : 'INBOUND');
// Track if the call was ever answered (reached 'active' state)
const wasAnsweredRef = useRef(callState === 'active');
// Log mount so we can tell which component handled the call
useEffect(() => {
console.log(`[ACTIVE-CALL-CARD] Mounted: state=${callState} direction=${callDirectionRef.current} ucid=${callUcid ?? 'none'} lead=${lead?.id ?? 'none'} phone=${callerPhone}`);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// Detect caller disconnect: call was active and ended without agent pressing End
useEffect(() => {
if (wasAnsweredRef.current && !dispositionOpen && (callState === 'ended' || callState === 'failed')) {
setCallerDisconnected(true);
setDispositionOpen(true);
}
}, [callState, dispositionOpen]);
const firstName = lead?.contactName?.firstName ?? '';
const lastName = lead?.contactName?.lastName ?? '';
const fullName = `${firstName} ${lastName}`.trim();
@@ -64,8 +68,12 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
const phoneDisplay = phone ? formatPhone(phone) : callerPhone || 'Unknown';
const handleDisposition = async (disposition: CallDisposition, notes: string) => {
// Hangup if still connected
if (callState === 'active' || callState === 'ringing-out' || callState === 'ringing-in') {
hangup();
}
// Submit disposition to sidecar — handles Ozonetel ACW release
// Submit disposition to sidecar
if (callUcid) {
const disposePayload = {
ucid: callUcid,
@@ -85,7 +93,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
console.warn('[DISPOSE] No callUcid — skipping disposition');
}
// Side effects per disposition type
// Side effects
if (disposition === 'FOLLOW_UP_SCHEDULED') {
try {
await apiClient.graphql(`mutation($data: FollowUpCreateInput!) { createFollowUp(data: $data) { id } }`, {
@@ -104,7 +112,6 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
}
}
// Disposition is the last step — return to worklist immediately
notify.success('Call Logged', `Disposition: ${disposition.replace(/_/g, ' ').toLowerCase()}`);
handleReset();
};
@@ -112,13 +119,11 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
const handleAppointmentSaved = () => {
setAppointmentOpen(false);
notify.success('Appointment Booked', 'Payment link will be sent to the patient');
if (callState === 'active') {
setAppointmentBookedDuringCall(true);
}
};
const handleReset = () => {
setPostCallStage(null);
setDispositionOpen(false);
setCallerDisconnected(false);
setCallState('idle');
setCallerNumber(null);
setCallUcid(null);
@@ -126,7 +131,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
onCallComplete?.();
};
// Outbound ringing — agent initiated the call
// Outbound ringing
if (callState === 'ringing-out') {
return (
<div className="rounded-xl bg-brand-primary p-4">
@@ -145,7 +150,7 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
</div>
<div className="mt-3 flex gap-2">
<Button size="sm" color="primary-destructive" onClick={() => { hangup(); handleReset(); }}>
End Call
Cancel
</Button>
</div>
</div>
@@ -177,8 +182,8 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
);
}
// Skip disposition for unanswered calls (ringing-in → ended without ever reaching active)
if (!wasAnsweredRef.current && postCallStage === null && (callState === 'ended' || callState === 'failed')) {
// Unanswered call (ringing → ended without ever reaching active)
if (!wasAnsweredRef.current && (callState === 'ended' || callState === 'failed')) {
return (
<div className="rounded-xl border border-secondary bg-primary p-4 text-center">
<FontAwesomeIcon icon={faPhoneHangup} className="size-6 text-fg-quaternary mb-2" />
@@ -191,149 +196,133 @@ export const ActiveCallCard = ({ lead, callerPhone, missedCallId, onCallComplete
);
}
// Post-call flow takes priority over active state (handles race between hangup + SIP ended event)
if (postCallStage !== null || callState === 'ended' || callState === 'failed') {
// Disposition form + enquiry access
// Active call
if (callState === 'active' || dispositionOpen) {
wasAnsweredRef.current = true;
return (
<>
<div className="rounded-xl border border-secondary bg-primary p-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className="flex size-8 items-center justify-center rounded-full bg-secondary">
<FontAwesomeIcon icon={faPhoneHangup} className="size-3.5 text-fg-quaternary" />
<div className="rounded-xl border border-brand bg-primary p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-full bg-success-solid">
<FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
</div>
<div>
<p className="text-sm font-semibold text-primary">Call Ended — {fullName || phoneDisplay}</p>
<p className="text-xs text-tertiary">{formatDuration(callDuration)} · Log this call</p>
<p className="text-sm font-bold text-primary">{fullName || phoneDisplay}</p>
{fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
</div>
</div>
<Button size="sm" color="secondary"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
onClick={() => setEnquiryOpen(!enquiryOpen)}>Enquiry</Button>
<Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
</div>
<DispositionForm onSubmit={handleDisposition} defaultDisposition={appointmentBookedDuringCall ? 'APPOINTMENT_BOOKED' : null} />
{/* Call controls */}
<div className="mt-3 flex items-center gap-1.5 flex-wrap">
<button
onClick={toggleMute}
title={isMuted ? 'Unmute' : 'Mute'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
isMuted ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={isMuted ? faMicrophoneSlash : faMicrophone} className="size-3.5" />
</button>
<button
onClick={toggleHold}
title={isOnHold ? 'Resume' : 'Hold'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
isOnHold ? 'bg-warning-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={isOnHold ? faPlay : faPause} className="size-3.5" />
</button>
<button
onClick={() => {
const action = recordingPaused ? 'unPause' : 'pause';
if (callUcid) apiClient.post('/api/ozonetel/recording', { ucid: callUcid, action }).catch(() => {});
setRecordingPaused(!recordingPaused);
}}
title={recordingPaused ? 'Resume Recording' : 'Pause Recording'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
recordingPaused ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={faRecordVinyl} className="size-3.5" />
</button>
<div className="w-px h-6 bg-secondary mx-0.5" />
<Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); }}>Book Appt</Button>
<Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); }}>Enquiry</Button>
<Button size="sm" color="secondary"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
onClick={() => setTransferOpen(!transferOpen)}>Transfer</Button>
<Button size="sm" color="primary-destructive" className="ml-auto"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneHangup} className={className} {...rest} />}
onClick={() => setDispositionOpen(true)}>End Call</Button>
</div>
{/* Transfer dialog */}
{transferOpen && callUcid && (
<TransferDialog
ucid={callUcid}
onClose={() => setTransferOpen(false)}
onTransferred={() => {
setTransferOpen(false);
setDispositionOpen(true);
}}
/>
)}
{/* Appointment form */}
<AppointmentForm
isOpen={appointmentOpen}
onOpenChange={setAppointmentOpen}
callerNumber={callerPhone}
leadName={fullName || null}
leadId={lead?.id ?? null}
patientId={(lead as any)?.patientId ?? null}
onSaved={handleAppointmentSaved}
/>
{/* Enquiry form */}
<EnquiryForm
isOpen={enquiryOpen}
onOpenChange={setEnquiryOpen}
callerPhone={callerPhone}
onSaved={() => {
setEnquiryOpen(false);
notify.success('Enquiry Logged');
}}
/>
</div>
<EnquiryForm
isOpen={enquiryOpen}
onOpenChange={setEnquiryOpen}
callerPhone={callerPhone}
onSaved={() => {
setEnquiryOpen(false);
notify.success('Enquiry Logged');
{/* Disposition Modal — the ONLY path to end a call */}
<DispositionModal
isOpen={dispositionOpen}
callerName={fullName || phoneDisplay}
callerDisconnected={callerDisconnected}
onSubmit={handleDisposition}
onDismiss={() => {
// Agent wants to continue the call — close modal, call stays active
if (!callerDisconnected) {
setDispositionOpen(false);
} else {
// Caller already disconnected — dismiss goes to worklist
handleReset();
}
}}
/>
</>
);
}
// Active call
if (callState === 'active') {
wasAnsweredRef.current = true;
return (
<div className="rounded-xl border border-brand bg-primary p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="flex size-10 items-center justify-center rounded-full bg-success-solid">
<FontAwesomeIcon icon={faPhone} className="size-4 text-white" />
</div>
<div>
<p className="text-sm font-bold text-primary">{fullName || phoneDisplay}</p>
{fullName && <p className="text-xs text-tertiary">{phoneDisplay}</p>}
</div>
</div>
<Badge size="md" color="success" type="pill-color">{formatDuration(callDuration)}</Badge>
</div>
<div className="mt-3 flex items-center gap-1.5">
{/* Icon-only toggles */}
<button
onClick={toggleMute}
title={isMuted ? 'Unmute' : 'Mute'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
isMuted ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={isMuted ? faMicrophoneSlash : faMicrophone} className="size-3.5" />
</button>
<button
onClick={toggleHold}
title={isOnHold ? 'Resume' : 'Hold'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
isOnHold ? 'bg-warning-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={isOnHold ? faPlay : faPause} className="size-3.5" />
</button>
<button
onClick={() => {
const action = recordingPaused ? 'unPause' : 'pause';
if (callUcid) apiClient.post('/api/ozonetel/recording', { ucid: callUcid, action }).catch(() => {});
setRecordingPaused(!recordingPaused);
}}
title={recordingPaused ? 'Resume Recording' : 'Pause Recording'}
className={cx(
'flex size-8 items-center justify-center rounded-lg transition duration-100 ease-linear',
recordingPaused ? 'bg-error-solid text-white' : 'bg-secondary text-fg-quaternary hover:bg-secondary_hover hover:text-fg-secondary',
)}
>
<FontAwesomeIcon icon={faRecordVinyl} className="size-3.5" />
</button>
<div className="w-px h-6 bg-secondary mx-0.5" />
{/* Text+Icon primary actions */}
<Button size="sm" color={appointmentOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faCalendarPlus} className={className} {...rest} />}
onClick={() => { setAppointmentOpen(!appointmentOpen); setEnquiryOpen(false); }}>Book Appt</Button>
<Button size="sm" color={enquiryOpen ? 'primary' : 'secondary'}
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faClipboardQuestion} className={className} {...rest} />}
onClick={() => { setEnquiryOpen(!enquiryOpen); setAppointmentOpen(false); }}>Enquiry</Button>
<Button size="sm" color="secondary"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneArrowRight} className={className} {...rest} />}
onClick={() => setTransferOpen(!transferOpen)}>Transfer</Button>
<Button size="sm" color="primary-destructive" className="ml-auto"
iconLeading={({ className, ...rest }: any) => <FontAwesomeIcon icon={faPhoneHangup} className={className} {...rest} />}
onClick={() => { hangup(); setPostCallStage('disposition'); }}>End</Button>
</div>
{/* Transfer dialog */}
{transferOpen && callUcid && (
<TransferDialog
ucid={callUcid}
onClose={() => setTransferOpen(false)}
onTransferred={() => {
setTransferOpen(false);
hangup();
setPostCallStage('disposition');
}}
/>
)}
{/* Appointment form accessible during call */}
<AppointmentForm
isOpen={appointmentOpen}
onOpenChange={setAppointmentOpen}
callerNumber={callerPhone}
leadName={fullName || null}
leadId={lead?.id ?? null}
patientId={(lead as any)?.patientId ?? null}
onSaved={handleAppointmentSaved}
/>
{/* Enquiry form */}
<EnquiryForm
isOpen={enquiryOpen}
onOpenChange={setEnquiryOpen}
callerPhone={callerPhone}
onSaved={() => {
setEnquiryOpen(false);
notify.success('Enquiry Logged');
}}
/>
</div>
);
}
return null;
};

2
src/components/call-desk/agent-status-toggle.tsx
View File

@@ -74,7 +74,7 @@ export const AgentStatusToggle = ({ isRegistered, connectionStatus }: AgentStatu
}
const current = displayConfig[ozonetelState] ?? displayConfig.offline;
const canToggle = ozonetelState === 'ready' || ozonetelState === 'break' || ozonetelState === 'training';
const canToggle = ozonetelState === 'ready' || ozonetelState === 'break' || ozonetelState === 'training' || ozonetelState === 'offline';
return (
<div className="relative">

478
src/components/call-desk/call-widget.tsx
View File

@@ -1,174 +1,41 @@
import { useState, useEffect, useRef } from 'react';
import {
faPhone,
faPhoneArrowDown,
faPhoneArrowUp,
faPhoneHangup,
faPhoneXmark,
faMicrophoneSlash,
faMicrophone,
faPause,
faCircleCheck,
faFloppyDisk,
faCalendarPlus,
} from '@fortawesome/pro-duotone-svg-icons';
import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router';
import { faPhone, faPhoneArrowDown, faPhoneXmark, faCircleCheck } from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';
const Phone01 = faIcon(faPhone);
const PhoneIncoming01 = faIcon(faPhoneArrowDown);
const PhoneOutgoing01 = faIcon(faPhoneArrowUp);
const PhoneHangUp = faIcon(faPhoneHangup);
const PhoneX = faIcon(faPhoneXmark);
const MicrophoneOff01 = faIcon(faMicrophoneSlash);
const Microphone01 = faIcon(faMicrophone);
const PauseCircle = faIcon(faPause);
const CheckCircle = faIcon(faCircleCheck);
const Save01 = faIcon(faFloppyDisk);
const CalendarPlus02 = faIcon(faCalendarPlus);
import { Button } from '@/components/base/buttons/button';
import { TextArea } from '@/components/base/textarea/textarea';
import { AppointmentForm } from '@/components/call-desk/appointment-form';
import { useSetAtom } from 'jotai';
import { sipCallStateAtom } from '@/state/sip-state';
import { useSip } from '@/providers/sip-provider';
import { useAuth } from '@/providers/auth-provider';
import { cx } from '@/utils/cx';
import type { CallDisposition } from '@/types/entities';
const formatDuration = (seconds: number): string => {
const m = Math.floor(seconds / 60)
.toString()
.padStart(2, '0');
const m = Math.floor(seconds / 60).toString().padStart(2, '0');
const s = (seconds % 60).toString().padStart(2, '0');
return `${m}:${s}`;
};
const dispositionOptions: Array<{
value: CallDisposition;
label: string;
activeClass: string;
defaultClass: string;
}> = [
{
value: 'APPOINTMENT_BOOKED',
label: 'Appt Booked',
activeClass: 'bg-success-solid text-white ring-transparent',
defaultClass: 'bg-success-primary text-success-primary border-success',
},
{
value: 'FOLLOW_UP_SCHEDULED',
label: 'Follow-up',
activeClass: 'bg-brand-solid text-white ring-transparent',
defaultClass: 'bg-brand-primary text-brand-secondary border-brand',
},
{
value: 'INFO_PROVIDED',
label: 'Info Given',
activeClass: 'bg-utility-blue-light-600 text-white ring-transparent',
defaultClass: 'bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200',
},
{
value: 'NO_ANSWER',
label: 'No Answer',
activeClass: 'bg-warning-solid text-white ring-transparent',
defaultClass: 'bg-warning-primary text-warning-primary border-warning',
},
{
value: 'WRONG_NUMBER',
label: 'Wrong #',
activeClass: 'bg-secondary-solid text-white ring-transparent',
defaultClass: 'bg-secondary text-secondary border-secondary',
},
{
value: 'CALLBACK_REQUESTED',
label: 'Not Interested',
activeClass: 'bg-error-solid text-white ring-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error',
},
];
// CallWidget is a lightweight floating notification for calls outside the Call Desk.
// It only handles: ringing (answer/decline) + auto-redirect to Call Desk.
// All active call management (mute, hold, end, disposition) happens on the Call Desk via ActiveCallCard.
export const CallWidget = () => {
const {
callState,
callerNumber,
isMuted,
isOnHold,
callDuration,
answer,
reject,
hangup,
toggleMute,
toggleHold,
} = useSip();
const { user } = useAuth();
const { callState, callerNumber, callDuration, answer, reject } = useSip();
const setCallState = useSetAtom(sipCallStateAtom);
const navigate = useNavigate();
const { pathname } = useLocation();
const [disposition, setDisposition] = useState<CallDisposition | null>(null);
const [notes, setNotes] = useState('');
const [lastDuration, setLastDuration] = useState(0);
const [matchedLead, setMatchedLead] = useState<any>(null);
const [leadActivities, setLeadActivities] = useState<any[]>([]);
const [isSaving, setIsSaving] = useState(false);
const [isAppointmentOpen, setIsAppointmentOpen] = useState(false);
const callStartTimeRef = useRef<string | null>(null);
// Capture duration right before call ends
// Auto-navigate to Call Desk when a call becomes active or outbound ringing starts
useEffect(() => {
if (callState === 'active' && callDuration > 0) {
setLastDuration(callDuration);
if (pathname === '/call-desk') return;
if (callState === 'active' || callState === 'ringing-out') {
console.log(`[CALL-WIDGET] Redirecting to Call Desk (state=${callState})`);
navigate('/call-desk');
}
}, [callState, callDuration]);
// Track call start time
useEffect(() => {
if (callState === 'active' && !callStartTimeRef.current) {
callStartTimeRef.current = new Date().toISOString();
}
if (callState === 'idle') {
callStartTimeRef.current = null;
}
}, [callState]);
// Look up caller when call becomes active
useEffect(() => {
if (callState === 'ringing-in' && callerNumber && callerNumber !== 'Unknown') {
const lookup = async () => {
try {
const { apiClient } = await import('@/lib/api-client');
const token = apiClient.getStoredToken();
if (!token) return;
const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:4100';
const res = await fetch(`${API_URL}/api/call/lookup`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
},
body: JSON.stringify({ phoneNumber: callerNumber }),
});
const data = await res.json();
if (data.matched && data.lead) {
setMatchedLead(data.lead);
setLeadActivities(data.activities ?? []);
}
} catch (err) {
console.warn('Lead lookup failed:', err);
}
};
lookup();
}
}, [callState, callerNumber]);
// Reset state when returning to idle
useEffect(() => {
if (callState === 'idle') {
setDisposition(null);
setNotes('');
setMatchedLead(null);
setLeadActivities([]);
}
}, [callState]);
}, [callState, pathname, navigate]);
// Auto-dismiss ended/failed state after 3 seconds
useEffect(() => {
@@ -181,127 +48,35 @@ export const CallWidget = () => {
}
}, [callState, setCallState]);
const handleSaveAndClose = async () => {
if (!disposition) return;
console.log(`[CALL-WIDGET] Save & Close: disposition=${disposition} lead=${matchedLead?.id ?? 'none'}`);
setIsSaving(true);
try {
const { apiClient } = await import('@/lib/api-client');
// 1. Create Call record on platform
await apiClient.graphql(
`mutation CreateCall($data: CallCreateInput!) {
createCall(data: $data) { id }
}`,
{
data: {
callDirection: 'INBOUND',
callStatus: 'COMPLETED',
agentName: user.name,
startedAt: callStartTimeRef.current,
endedAt: new Date().toISOString(),
durationSeconds: callDuration,
disposition,
callNotes: notes || null,
leadId: matchedLead?.id ?? null,
},
},
).catch(err => console.warn('Failed to create call record:', err));
// 2. Update lead status if matched
if (matchedLead?.id) {
const statusMap: Partial<Record<string, string>> = {
APPOINTMENT_BOOKED: 'APPOINTMENT_SET',
FOLLOW_UP_SCHEDULED: 'CONTACTED',
INFO_PROVIDED: 'CONTACTED',
NO_ANSWER: 'CONTACTED',
WRONG_NUMBER: 'LOST',
CALLBACK_REQUESTED: 'CONTACTED',
NOT_INTERESTED: 'LOST',
};
const newStatus = statusMap[disposition];
if (newStatus) {
await apiClient.graphql(
`mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
updateLead(id: $id, data: $data) { id }
}`,
{
id: matchedLead.id,
data: {
leadStatus: newStatus,
lastContactedAt: new Date().toISOString(),
},
},
).catch(err => console.warn('Failed to update lead:', err));
}
// 3. Create lead activity
await apiClient.graphql(
`mutation CreateLeadActivity($data: LeadActivityCreateInput!) {
createLeadActivity(data: $data) { id }
}`,
{
data: {
activityType: 'CALL_RECEIVED',
summary: `Inbound call — ${disposition.replace(/_/g, ' ')}`,
occurredAt: new Date().toISOString(),
performedBy: user.name,
channel: 'PHONE',
durationSeconds: callDuration,
leadId: matchedLead.id,
},
},
).catch(err => console.warn('Failed to create activity:', err));
}
} catch (err) {
console.error('Save failed:', err);
}
setIsSaving(false);
hangup();
setDisposition(null);
setNotes('');
};
// Log state changes for observability
// Log state changes
useEffect(() => {
if (callState !== 'idle') {
console.log(`[CALL-WIDGET] State: ${callState} | caller=${callerNumber ?? 'none'}`);
}
}, [callState, callerNumber]);
// Idle: nothing to show — call desk has its own status toggle
if (callState === 'idle') {
return null;
}
if (callState === 'idle') return null;
// Ringing inbound
// Ringing inbound — answer redirects to Call Desk
if (callState === 'ringing-in') {
return (
<div
className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col items-center gap-5 rounded-2xl border border-secondary bg-primary p-6 shadow-2xl',
'transition-all duration-300',
)}
>
<div className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col items-center gap-5 rounded-2xl border border-secondary bg-primary p-6 shadow-2xl',
'transition-all duration-300',
)}>
<div className="relative">
<div className="absolute inset-0 animate-ping rounded-full bg-brand-solid opacity-20" />
<div className="relative animate-bounce">
<PhoneIncoming01 className="size-10 text-fg-brand-primary" />
</div>
</div>
<div className="flex flex-col items-center gap-1">
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">
Incoming Call
</span>
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">Incoming Call</span>
<span className="text-lg font-bold text-primary">{callerNumber ?? 'Unknown'}</span>
</div>
<div className="flex items-center gap-3">
<Button size="md" color="primary" iconLeading={Phone01} onClick={answer}>
<Button size="md" color="primary" iconLeading={Phone01} onClick={() => { answer(); navigate('/call-desk'); }}>
Answer
</Button>
<Button size="md" color="primary-destructive" iconLeading={PhoneX} onClick={reject}>
@@ -312,208 +87,25 @@ export const CallWidget = () => {
);
}
// Ringing outbound
if (callState === 'ringing-out') {
return (
<div
className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col items-center gap-5 rounded-2xl border border-secondary bg-primary p-6 shadow-2xl',
'transition-all duration-300',
)}
>
<PhoneOutgoing01 className="size-10 animate-pulse text-fg-brand-primary" />
<div className="flex flex-col items-center gap-1">
<span className="text-xs font-bold uppercase tracking-wider text-brand-secondary">
Calling...
</span>
<span className="text-lg font-bold text-primary">{callerNumber ?? 'Unknown'}</span>
</div>
<Button size="md" color="primary-destructive" iconLeading={PhoneHangUp} onClick={hangup}>
Cancel
</Button>
</div>
);
}
// Active call (full widget)
if (callState === 'active') {
return (
<div
className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col gap-4 rounded-2xl border border-secondary bg-primary p-5 shadow-2xl',
'transition-all duration-300',
)}
>
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Phone01 className="size-4 text-fg-success-primary" />
<span className="text-sm font-semibold text-primary">Active Call</span>
</div>
<span className="font-mono text-sm font-bold tabular-nums text-brand-secondary">
{formatDuration(callDuration)}
</span>
</div>
{/* Caller info */}
<div>
<span className="text-lg font-bold text-primary">
{matchedLead?.contactName
? `${matchedLead.contactName.firstName ?? ''} ${matchedLead.contactName.lastName ?? ''}`.trim()
: callerNumber ?? 'Unknown'}
</span>
{matchedLead && (
<span className="ml-2 text-sm text-tertiary">{callerNumber}</span>
)}
</div>
{/* AI Summary */}
{matchedLead?.aiSummary && (
<div className="rounded-xl bg-brand-primary p-3">
<div className="mb-1 text-xs font-bold uppercase tracking-wider text-brand-secondary">AI Insight</div>
<p className="text-sm text-primary">{matchedLead.aiSummary}</p>
{matchedLead.aiSuggestedAction && (
<span className="mt-2 inline-block rounded-lg bg-brand-solid px-3 py-1 text-xs font-semibold text-white">
{matchedLead.aiSuggestedAction}
</span>
)}
</div>
)}
{/* Recent activity */}
{leadActivities.length > 0 && (
<div className="space-y-1">
<div className="text-xs font-semibold text-tertiary">Recent Activity</div>
{leadActivities.slice(0, 3).map((a: any, i: number) => (
<div key={i} className="text-xs text-quaternary">
{a.activityType?.replace(/_/g, ' ')}: {a.summary}
</div>
))}
</div>
)}
{/* Call controls */}
<div className="flex items-center gap-2">
<Button
size="sm"
color={isMuted ? 'primary' : 'secondary'}
iconLeading={isMuted ? MicrophoneOff01 : Microphone01}
onClick={toggleMute}
>
{isMuted ? 'Unmute' : 'Mute'}
</Button>
<Button
size="sm"
color={isOnHold ? 'primary' : 'secondary'}
iconLeading={PauseCircle}
onClick={toggleHold}
>
{isOnHold ? 'Resume' : 'Hold'}
</Button>
<Button size="sm" color="primary-destructive" iconLeading={PhoneHangUp} onClick={hangup}>
End
</Button>
</div>
{/* Book Appointment */}
<Button
size="sm"
color="primary"
iconLeading={CalendarPlus02}
onClick={() => setIsAppointmentOpen(true)}
className="w-full"
>
Book Appointment
</Button>
<AppointmentForm
isOpen={isAppointmentOpen}
onOpenChange={setIsAppointmentOpen}
callerNumber={callerNumber}
leadName={matchedLead ? `${matchedLead.contactName?.firstName ?? ''} ${matchedLead.contactName?.lastName ?? ''}`.trim() : null}
leadId={matchedLead?.id}
patientId={matchedLead?.patientId}
onSaved={() => {
setIsAppointmentOpen(false);
setDisposition('APPOINTMENT_BOOKED');
}}
/>
{/* Divider */}
<div className="border-t border-secondary" />
{/* Disposition */}
<div className="flex flex-col gap-2.5">
<span className="text-xs font-bold uppercase tracking-wider text-secondary">Disposition</span>
<div className="grid grid-cols-2 gap-1.5">
{dispositionOptions.map((opt) => {
const isSelected = disposition === opt.value;
return (
<button
key={opt.value}
type="button"
onClick={() => setDisposition(opt.value)}
className={cx(
'cursor-pointer rounded-lg border px-2.5 py-1.5 text-xs font-semibold transition duration-100 ease-linear',
isSelected ? cx(opt.activeClass, 'ring-2 ring-brand') : opt.defaultClass,
)}
>
{opt.label}
</button>
);
})}
</div>
<TextArea
placeholder="Add notes..."
value={notes}
onChange={(value) => setNotes(value)}
rows={2}
textAreaClassName="text-xs"
/>
<Button
size="sm"
color="primary"
iconLeading={Save01}
isDisabled={disposition === null || isSaving}
isLoading={isSaving}
onClick={handleSaveAndClose}
className="w-full"
>
{isSaving ? 'Saving...' : 'Save & Close'}
</Button>
</div>
</div>
);
}
// Ended / Failed
// Ended / Failed — brief notification
if (callState === 'ended' || callState === 'failed') {
const isEnded = callState === 'ended';
return (
<div
className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col items-center gap-2 rounded-2xl border border-secondary bg-primary p-5 shadow-2xl',
'transition-all duration-300',
)}
>
<CheckCircle
className={cx('size-8', isEnded ? 'text-fg-success-primary' : 'text-fg-error-primary')}
/>
<div className={cx(
'fixed bottom-6 right-6 z-50 w-80',
'flex flex-col items-center gap-2 rounded-2xl border border-secondary bg-primary p-5 shadow-2xl',
'transition-all duration-300',
)}>
<CheckCircle className={cx('size-8', isEnded ? 'text-fg-success-primary' : 'text-fg-error-primary')} />
<span className="text-sm font-semibold text-primary">
{isEnded ? 'Call Ended' : 'Call Failed'}
{lastDuration > 0 && ` \u00B7 ${formatDuration(lastDuration)}`}
{callDuration > 0 && ` \u00B7 ${formatDuration(callDuration)}`}
</span>
<span className="text-xs text-tertiary">auto-closing...</span>
</div>
);
}
// Any other state (active, ringing-out) on a non-call-desk page — redirect handled by useEffect above
return null;
};

160
src/components/call-desk/disposition-modal.tsx Normal file
View File

@@ -0,0 +1,160 @@
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneHangup } from '@fortawesome/pro-duotone-svg-icons';
import { Dialog, Modal, ModalOverlay } from '@/components/application/modals/modal';
import { FeaturedIcon } from '@/components/foundations/featured-icon/featured-icon';
import { TextArea } from '@/components/base/textarea/textarea';
import type { FC } from 'react';
import type { CallDisposition } from '@/types/entities';
import { cx } from '@/utils/cx';
const PhoneHangUpIcon: FC<{ className?: string }> = ({ className }) => (
<FontAwesomeIcon icon={faPhoneHangup} className={className} />
);
const dispositionOptions: Array<{
value: CallDisposition;
label: string;
activeClass: string;
defaultClass: string;
}> = [
{
value: 'APPOINTMENT_BOOKED',
label: 'Appointment Booked',
activeClass: 'bg-success-solid text-white border-transparent',
defaultClass: 'bg-success-primary text-success-primary border-success',
},
{
value: 'FOLLOW_UP_SCHEDULED',
label: 'Follow-up Needed',
activeClass: 'bg-brand-solid text-white border-transparent',
defaultClass: 'bg-brand-primary text-brand-secondary border-brand',
},
{
value: 'INFO_PROVIDED',
label: 'Info Provided',
activeClass: 'bg-utility-blue-light-600 text-white border-transparent',
defaultClass: 'bg-utility-blue-light-50 text-utility-blue-light-700 border-utility-blue-light-200',
},
{
value: 'NO_ANSWER',
label: 'No Answer',
activeClass: 'bg-warning-solid text-white border-transparent',
defaultClass: 'bg-warning-primary text-warning-primary border-warning',
},
{
value: 'WRONG_NUMBER',
label: 'Wrong Number',
activeClass: 'bg-secondary-solid text-white border-transparent',
defaultClass: 'bg-secondary text-secondary border-secondary',
},
{
value: 'CALLBACK_REQUESTED',
label: 'Not Interested',
activeClass: 'bg-error-solid text-white border-transparent',
defaultClass: 'bg-error-primary text-error-primary border-error',
},
];
type DispositionModalProps = {
isOpen: boolean;
callerName: string;
callerDisconnected: boolean;
onSubmit: (disposition: CallDisposition, notes: string) => void;
onDismiss?: () => void;
};
export const DispositionModal = ({ isOpen, callerName, callerDisconnected, onSubmit, onDismiss }: DispositionModalProps) => {
const [selected, setSelected] = useState<CallDisposition | null>(null);
const [notes, setNotes] = useState('');
const handleSubmit = () => {
if (selected === null) return;
onSubmit(selected, notes);
setSelected(null);
setNotes('');
};
return (
<ModalOverlay isOpen={isOpen} isDismissable onOpenChange={(open) => { if (!open && onDismiss) onDismiss(); }}>
<Modal className="sm:max-w-md">
<Dialog>
{() => (
<div className="flex w-full flex-col rounded-xl bg-primary shadow-xl ring-1 ring-secondary overflow-hidden">
{/* Header */}
<div className="flex flex-col items-center gap-3 px-6 pt-6 pb-4">
<FeaturedIcon icon={PhoneHangUpIcon} color={callerDisconnected ? 'warning' : 'error'} theme="light" size="md" />
<div className="text-center">
<h2 className="text-lg font-semibold text-primary">
{callerDisconnected ? 'Call Disconnected' : 'End Call'}
</h2>
<p className="mt-1 text-sm text-tertiary">
{callerDisconnected
? `${callerName} disconnected. What was the outcome?`
: `Select a reason to end the call with ${callerName}.`
}
</p>
</div>
</div>
{/* Disposition options */}
<div className="px-6 pb-4">
<div className="grid grid-cols-2 gap-2">
{dispositionOptions.map((option) => {
const isSelected = selected === option.value;
return (
<button
key={option.value}
type="button"
onClick={() => setSelected(option.value)}
className={cx(
'cursor-pointer rounded-xl border-2 p-3 text-sm font-semibold transition duration-100 ease-linear',
isSelected
? cx(option.activeClass, 'ring-2 ring-brand')
: option.defaultClass,
)}
>
{option.label}
</button>
);
})}
</div>
<div className="mt-3">
<TextArea
label="Notes (optional)"
placeholder="Add any notes about this call..."
value={notes}
onChange={(value) => setNotes(value)}
rows={2}
textAreaClassName="text-sm"
/>
</div>
</div>
{/* Footer */}
<div className="border-t border-secondary px-6 py-4">
<button
type="button"
onClick={handleSubmit}
disabled={selected === null}
className={cx(
'w-full rounded-xl px-6 py-2.5 text-sm font-semibold transition duration-100 ease-linear',
selected !== null
? 'cursor-pointer bg-error-solid text-white hover:bg-error-solid_hover'
: 'cursor-not-allowed bg-disabled text-disabled',
)}
>
{callerDisconnected
? (selected ? 'Submit & Close' : 'Select a reason')
: (selected ? 'End Call & Submit' : 'Select a reason to end call')
}
</button>
</div>
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
);
};

2
src/components/call-desk/enquiry-form.tsx
View File

@@ -81,7 +81,7 @@ export const EnquiryForm = ({ isOpen, onOpenChange, callerPhone, onSaved }: Enqu
name: `Enquiry — ${patientName}`,
contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
contactPhone: registeredPhone ? { primaryPhoneNumber: registeredPhone } : undefined,
source: 'PHONE_INQUIRY',
source: 'PHONE',
status: disposition === 'CONVERTED' ? 'CONVERTED' : 'NEW',
interestedService: queryAsked.substring(0, 100),
},

10
src/components/call-desk/worklist-panel.tsx
View File

@@ -320,9 +320,9 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
}
return (
<div className="flex flex-1 flex-col">
<div className="flex flex-1 flex-col min-h-0 overflow-hidden">
{/* Filter tabs + search */}
<div className="flex items-end justify-between border-b border-secondary px-5 pt-3 pb-0.5">
<div className="flex shrink-0 items-end justify-between border-b border-secondary px-5 pt-3 pb-0.5">
<Tabs selectedKey={tab} onSelectionChange={(key) => handleTabChange(key as TabKey)}>
<TabList items={tabItems} type="underline" size="sm">
{(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
@@ -342,7 +342,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
{/* Missed call status sub-tabs */}
{tab === 'missed' && (
<div className="flex gap-1 px-5 py-2 border-b border-secondary">
<div className="flex shrink-0 gap-1 px-5 py-2 border-b border-secondary">
{(['pending', 'attempted', 'completed', 'invalid'] as MissedSubTab[]).map(sub => (
<button
key={sub}
@@ -372,7 +372,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
</p>
</div>
) : (
<div className="px-2 pt-3">
<div className="flex flex-1 flex-col min-h-0 overflow-hidden px-2 pt-3">
<Table size="sm">
<Table.Header>
<Table.Head label="PRIORITY" className="w-20" isRowHeader />
@@ -457,7 +457,7 @@ export const WorklistPanel = ({ missedCalls, followUps, leads, loading, onSelect
</Table.Body>
</Table>
{totalPages > 1 && (
<div className="flex items-center justify-between border-t border-secondary px-5 py-3">
<div className="flex shrink-0 items-center justify-between border-t border-secondary px-5 py-3">
<span className="text-xs text-tertiary">
Showing {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, filteredRows.length)} of {filteredRows.length}
</span>

33
src/components/layout/app-shell.tsx
View File

@@ -1,11 +1,17 @@
import { useEffect, type ReactNode } from 'react';
import { useLocation } from 'react-router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWifi, faWifiSlash } from '@fortawesome/pro-duotone-svg-icons';
import { Sidebar } from './sidebar';
import { SipProvider } from '@/providers/sip-provider';
import { useSip } from '@/providers/sip-provider';
import { CallWidget } from '@/components/call-desk/call-widget';
import { MaintOtpModal } from '@/components/modals/maint-otp-modal';
import { AgentStatusToggle } from '@/components/call-desk/agent-status-toggle';
import { useAuth } from '@/providers/auth-provider';
import { useMaintShortcuts } from '@/hooks/use-maint-shortcuts';
import { useNetworkStatus } from '@/hooks/use-network-status';
import { cx } from '@/utils/cx';
interface AppShellProps {
children: ReactNode;
@@ -15,6 +21,9 @@ export const AppShell = ({ children }: AppShellProps) => {
const { pathname } = useLocation();
const { isCCAgent } = useAuth();
const { isOpen, activeAction, close } = useMaintShortcuts();
const { connectionStatus, isRegistered } = useSip();
const networkQuality = useNetworkStatus();
const hasAgentConfig = !!localStorage.getItem('helix_agent_config');
// Heartbeat: keep agent session alive in Redis (CC agents only)
useEffect(() => {
@@ -39,7 +48,29 @@ export const AppShell = ({ children }: AppShellProps) => {
<SipProvider>
<div className="flex h-screen bg-primary">
<Sidebar activeUrl={pathname} />
<main className="flex flex-1 flex-col overflow-hidden">{children}</main>
<div className="flex flex-1 flex-col overflow-hidden">
{/* Persistent top bar — visible on all pages */}
{hasAgentConfig && (
<div className="flex shrink-0 items-center justify-end gap-2 border-b border-secondary px-4 py-2">
<div className={cx(
'flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium',
networkQuality === 'good'
? 'bg-success-primary text-success-primary'
: networkQuality === 'offline'
? 'bg-error-secondary text-error-primary'
: 'bg-warning-secondary text-warning-primary',
)}>
<FontAwesomeIcon
icon={networkQuality === 'offline' ? faWifiSlash : faWifi}
className="size-3"
/>
{networkQuality === 'good' ? 'Connected' : networkQuality === 'offline' ? 'No connection' : 'Unstable'}
</div>
<AgentStatusToggle isRegistered={isRegistered} connectionStatus={connectionStatus} />
</div>
)}
<main className="flex flex-1 flex-col overflow-hidden">{children}</main>
</div>
{isCCAgent && pathname !== '/' && pathname !== '/call-desk' && <CallWidget />}
</div>
<MaintOtpModal isOpen={isOpen} onOpenChange={(open) => !open && close()} action={activeAction} />

47
src/components/layout/sidebar.tsx
View File

@@ -13,8 +13,6 @@ import {
faCalendarCheck,
faPhone,
faUsers,
faWifi,
faWifiSlash,
faArrowRightFromBracket,
faTowerBroadcast,
faChartLine,
@@ -31,10 +29,8 @@ import { NavAccountCard } from "@/components/application/app-navigation/base-com
import { NavItemBase } from "@/components/application/app-navigation/base-components/nav-item";
import type { NavItemType } from "@/components/application/app-navigation/config";
import { Avatar } from "@/components/base/avatar/avatar";
import { apiClient } from "@/lib/api-client";
import { notify } from "@/lib/toast";
import { useAuth } from "@/providers/auth-provider";
import { useNetworkStatus } from "@/hooks/use-network-status";
import { useAgentState } from "@/hooks/use-agent-state";
import { sidebarCollapsedAtom } from "@/state/sidebar-state";
import { cx } from "@/utils/cx";
@@ -126,7 +122,10 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
const { logout, user } = useAuth();
const navigate = useNavigate();
const [collapsed, setCollapsed] = useAtom(sidebarCollapsedAtom);
const networkQuality = useNetworkStatus();
const agentConfig = typeof window !== 'undefined' ? localStorage.getItem('helix_agent_config') : null;
const agentId = agentConfig ? (() => { try { return JSON.parse(agentConfig).ozonetelAgentId; } catch { return null; } })() : null;
const ozonetelState = useAgentState(agentId);
const avatarStatus: 'online' | 'offline' = ozonetelState === 'ready' ? 'online' : 'offline';
const width = collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
@@ -142,15 +141,6 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
navigate('/login');
};
const handleForceReady = async () => {
try {
await apiClient.post('/api/ozonetel/agent-ready', {});
notify.success('Agent Ready', 'Agent state has been reset to Ready');
} catch {
notify.error('Force Ready Failed', 'Could not reset agent state');
}
};
const navSections = getNavSections(user.role);
const content = (
@@ -222,25 +212,6 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
))}
</ul>
{/* Network indicator — only shows when network is degraded */}
{networkQuality !== 'good' && (
<div className={cx(
"mx-3 mb-2 flex items-center gap-2 rounded-lg px-3 py-2 text-xs font-medium",
networkQuality === 'offline'
? "bg-error-secondary text-error-primary"
: "bg-warning-secondary text-warning-primary",
collapsed && "justify-center mx-2 px-2",
)}>
<FontAwesomeIcon
icon={networkQuality === 'offline' ? faWifiSlash : faWifi}
className="size-3.5 shrink-0"
/>
{!collapsed && (
<span>{networkQuality === 'offline' ? 'No connection' : 'Unstable network'}</span>
)}
</div>
)}
{/* Account card */}
<div className={cx("mt-auto py-4", collapsed ? "flex justify-center px-2" : "px-2 lg:px-4")}>
{collapsed ? (
@@ -249,7 +220,7 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
title={`${user.name}\nSign out`}
className="rounded-lg p-1 hover:bg-primary_hover transition duration-100 ease-linear"
>
<Avatar size="sm" initials={user.initials} status="online" />
<Avatar size="sm" initials={user.initials} status={avatarStatus} />
</button>
) : (
<NavAccountCard
@@ -258,11 +229,13 @@ export const Sidebar = ({ activeUrl = "/" }: SidebarProps) => {
name: user.name,
email: user.email,
avatar: '',
status: 'online' as const,
status: avatarStatus,
}]}
selectedAccountId="current"
popoverPlacement="top"
onSignOut={handleSignOut}
onForceReady={handleForceReady}
onViewProfile={() => navigate('/profile')}
onAccountSettings={() => navigate('/account-settings')}
/>
)}
</div>