From d4f33d6c0651e0f7d79883dcd0e0f4108f54c65b Mon Sep 17 00:00:00 2001
From: saridsa2 <s.satya.suman@globaluniversityfoundation.com>
Date: Tue, 24 Mar 2026 13:59:09 +0530
Subject: [PATCH] fix: restore KPI card icons on live monitor page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/pages/live-monitor.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/pages/live-monitor.tsx b/src/pages/live-monitor.tsx
index 59afc87..4938012 100644
--- a/src/pages/live-monitor.tsx
+++ b/src/pages/live-monitor.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 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 { Badge } from '@/components/base/badges/badges';
 import { Button } from '@/components/base/buttons/button';
@@ -24,8 +24,9 @@ const formatDuration = (startTime: string): string => {
     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">
+        <FontAwesomeIcon icon={icon} className="size-5 text-fg-quaternary mb-2" />
         <p className="text-3xl font-bold text-primary">{value}</p>
         <p className="text-xs text-tertiary mt-1">{label}</p>
     </div>
@@ -89,9 +90,9 @@ export const LiveMonitorPage = () => {
                 {/* KPI Cards */}
                 <div className="px-6 pt-5">
                     <div className="flex gap-4">
-                        <KpiCard value={activeCalls.length} label="Active Calls" />
-                        <KpiCard value={onHold} label="On Hold" />
-                        <KpiCard value={avgDuration} label="Avg Duration" />
+                        <KpiCard value={activeCalls.length} label="Active Calls" icon={faPhoneVolume} />
+                        <KpiCard value={onHold} label="On Hold" icon={faPause} />
+                        <KpiCard value={avgDuration} label="Avg Duration" icon={faClock} />
                     </div>
                 </div>