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

fix: restore KPI card icons on live monitor page

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
saridsa2
2026-03-24 13:59:09 +05:30
parent d21841ddd5
commit d4f33d6c06
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/live-monitor.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeadset } from '@fortawesome/pro-duotone-svg-icons'; import { faHeadset, faPhoneVolume, faPause, faClock } from '@fortawesome/pro-duotone-svg-icons';
import { TopBar } from '@/components/layout/top-bar'; import { TopBar } from '@/components/layout/top-bar';
import { Badge } from '@/components/base/badges/badges'; import { Badge } from '@/components/base/badges/badges';
import { Button } from '@/components/base/buttons/button'; import { Button } from '@/components/base/buttons/button';
@@ -24,8 +24,9 @@ const formatDuration = (startTime: string): string => {
return `${m}:${s.toString().padStart(2, '0')}`; return `${m}:${s.toString().padStart(2, '0')}`;
}; };
const KpiCard = ({ value, label }: { value: string | number; label: string }) => ( const KpiCard = ({ value, label, icon }: { value: string | number; label: string; icon: any }) => (
<div className="flex flex-1 flex-col items-center justify-center rounded-xl border border-secondary bg-primary py-6"> <div className="flex flex-1 flex-col items-center justify-center rounded-xl border border-secondary bg-primary py-6">
<FontAwesomeIcon icon={icon} className="size-5 text-fg-quaternary mb-2" />
<p className="text-3xl font-bold text-primary">{value}</p> <p className="text-3xl font-bold text-primary">{value}</p>
<p className="text-xs text-tertiary mt-1">{label}</p> <p className="text-xs text-tertiary mt-1">{label}</p>
</div> </div>
@@ -89,9 +90,9 @@ export const LiveMonitorPage = () => {
{/* KPI Cards */} {/* KPI Cards */}
<div className="px-6 pt-5"> <div className="px-6 pt-5">
<div className="flex gap-4"> <div className="flex gap-4">
<KpiCard value={activeCalls.length} label="Active Calls" /> <KpiCard value={activeCalls.length} label="Active Calls" icon={faPhoneVolume} />
<KpiCard value={onHold} label="On Hold" /> <KpiCard value={onHold} label="On Hold" icon={faPause} />
<KpiCard value={avgDuration} label="Avg Duration" /> <KpiCard value={avgDuration} label="Avg Duration" icon={faClock} />
</div> </div>
</div> </div>