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

fix: UUID type mismatch, slot conflict, appt/enquiry tabs, dialler in header

Browse Source 
- Changed $id: ID! to $id: UUID! in all update mutations (4 files)
- Removed redundant slot availability check (UI already disables booked slots)
- Book Appt and Enquiry act as toggle tabs — one closes the other
- Dialler moved from FAB to header dropdown next to status toggle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-24 10:54:56 +05:30
parent 1df40f14ff
commit dbd8391f2c
5 changed files with 64 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/pages/call-desk.tsx
View File

@@ -72,6 +72,61 @@ export const CallDeskPage = () => {
</div>
<div className="flex items-center gap-2">
{!isInCall && (
<div className="relative">
<button
onClick={() => setDiallerOpen(!diallerOpen)}
className={cx(
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition duration-100 ease-linear',
diallerOpen
? 'bg-brand-solid text-white'
: 'bg-secondary text-secondary hover:bg-secondary_hover',
)}
>
<FontAwesomeIcon icon={faPhone} className="size-3" />
Dial
</button>
{diallerOpen && (
<div className="absolute top-full right-0 mt-2 w-72 rounded-xl bg-primary shadow-xl ring-1 ring-secondary p-4 z-50">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-semibold text-primary">Dial</span>
<button onClick={() => setDiallerOpen(false)} className="text-fg-quaternary hover:text-fg-secondary">
<FontAwesomeIcon icon={faXmark} className="size-4" />
</button>
</div>
<div className="flex items-center gap-2 mb-3 px-3 py-2.5 rounded-lg bg-secondary min-h-[40px]">
<span className="flex-1 text-lg font-semibold text-primary tracking-wider text-center">
{dialNumber || <span className="text-placeholder font-normal text-sm">Enter number</span>}
</span>
{dialNumber && (
<button onClick={() => setDialNumber(dialNumber.slice(0, -1))} className="text-fg-quaternary hover:text-fg-secondary shrink-0">
<FontAwesomeIcon icon={faDeleteLeft} className="size-4" />
</button>
)}
</div>
<div className="grid grid-cols-3 gap-1.5 mb-3">
{['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map(key => (
<button
key={key}
onClick={() => setDialNumber(prev => prev + key)}
className="flex items-center justify-center h-11 rounded-lg text-sm font-semibold text-primary bg-primary hover:bg-secondary border border-secondary transition duration-100 ease-linear active:scale-95"
>
{key}
</button>
))}
</div>
<button
onClick={handleDial}
disabled={dialling || dialNumber.replace(/[^0-9]/g, '').length < 10}
className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faPhone} className="size-3.5" />
{dialling ? 'Dialling...' : 'Call'}
</button>
</div>
)}
</div>
)}
<AgentStatusToggle isRegistered={isRegistered} connectionStatus={connectionStatus} />
{totalPending > 0 && (
<Badge size="sm" color="brand" type="pill-color">{totalPending} pending</Badge>
@@ -127,68 +182,6 @@ export const CallDeskPage = () => {
</div>
</div>
{/* Dialler FAB */}
{!isInCall && (
<div className="fixed bottom-6 right-6 z-40 flex flex-col items-end gap-3">
{diallerOpen && (
<div className="w-72 rounded-xl bg-primary shadow-xl ring-1 ring-secondary p-4">
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-semibold text-primary">Dial</span>
<button onClick={() => setDiallerOpen(false)} className="text-fg-quaternary hover:text-fg-secondary">
<FontAwesomeIcon icon={faXmark} className="size-4" />
</button>
</div>
{/* Number display */}
<div className="flex items-center gap-2 mb-3 px-3 py-2.5 rounded-lg bg-secondary min-h-[40px]">
<span className="flex-1 text-lg font-semibold text-primary tracking-wider text-center">
{dialNumber || <span className="text-placeholder font-normal text-sm">Enter number</span>}
</span>
{dialNumber && (
<button onClick={() => setDialNumber(dialNumber.slice(0, -1))} className="text-fg-quaternary hover:text-fg-secondary shrink-0">
<FontAwesomeIcon icon={faDeleteLeft} className="size-4" />
</button>
)}
</div>
{/* Numpad */}
<div className="grid grid-cols-3 gap-1.5 mb-3">
{['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map(key => (
<button
key={key}
onClick={() => setDialNumber(prev => prev + key)}
className="flex items-center justify-center h-11 rounded-lg text-sm font-semibold text-primary bg-primary hover:bg-secondary border border-secondary transition duration-100 ease-linear active:scale-95"
>
{key}
</button>
))}
</div>
{/* Call button */}
<button
onClick={handleDial}
disabled={dialling || dialNumber.replace(/[^0-9]/g, '').length < 10}
className="w-full flex items-center justify-center gap-2 rounded-lg bg-success-solid py-2.5 text-sm font-medium text-white hover:opacity-90 disabled:bg-disabled disabled:cursor-not-allowed transition duration-100 ease-linear"
>
<FontAwesomeIcon icon={faPhone} className="size-3.5" />
{dialling ? 'Dialling...' : 'Call'}
</button>
</div>
)}
<button
onClick={() => setDiallerOpen(!diallerOpen)}
className={cx(
'flex size-14 items-center justify-center rounded-full shadow-lg transition duration-100 ease-linear',
diallerOpen
? 'bg-secondary text-fg-secondary'
: 'bg-brand-solid text-white hover:bg-brand-solid_hover',
)}
title="Quick dial"
>
<FontAwesomeIcon icon={diallerOpen ? faXmark : faPhone} className="size-5" />
</button>
</div>
)}
</div>
);
};