From a59d0e985fcb75d928b9acbded62ddcf41deccdf Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Thu, 2 Jan 2025 15:23:30 -0500
Subject: [PATCH] Fix realtime chart and add icons to realtime cards

---
 .../dashboard/MiniRealtimeAnalytics.jsx       | 20 +++++++++++--------
 .../dashboard/RealtimeAnalytics.jsx           |  9 +++++++++
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
index 06687b3..11309c4 100644
--- a/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
+++ b/dashboard/src/components/dashboard/MiniRealtimeAnalytics.jsx
@@ -8,7 +8,7 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, Users, Activity } from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { format } from "date-fns";
 import {
@@ -100,9 +100,7 @@ const MiniRealtimeAnalytics = () => {
   }
 
   return (
-   
-
-      <CardContent className="p-0">
+   <div>
         {error && (
           <Alert variant="destructive" className="mb-4">
             <AlertTriangle className="h-4 w-4" />
@@ -119,7 +117,10 @@ const MiniRealtimeAnalytics = () => {
               colorClass: "text-sky-200",
               titleClass: "text-sky-100 font-bold text-md",
               descriptionClass: "text-sky-200 text-md font-semibold",
-              background: "bg-gradient-to-br from-sky-800 to-sky-700"
+              background: "bg-gradient-to-br from-sky-800 to-sky-700",
+              icon: Users,
+              iconColor: "text-sky-900",
+              iconBackground: "bg-sky-300"
             }
           )}
           {summaryCard(
@@ -130,12 +131,15 @@ const MiniRealtimeAnalytics = () => {
               colorClass: "text-sky-200",
               titleClass: "text-sky-100 font-bold text-md",
               descriptionClass: "text-sky-200 text-md font-semibold",
-              background: "bg-gradient-to-br from-sky-800 to-sky-700"
+              background: "bg-gradient-to-br from-sky-800 to-sky-700",
+              icon: Activity,
+              iconColor: "text-sky-900",
+              iconBackground: "bg-sky-300"
             }
           )}
         </div>
 
-        <div className="bg-gradient-to-br from-sky-800 to-sky-700 rounded-lg p-2">
+        <div className="bg-gradient-to-br from-sky-800 to-sky-700 rounded-lg p-2 h-[200px]">
           <ResponsiveContainer width="100%" height="100%">
             <BarChart
               data={basicData.byMinute}
@@ -182,7 +186,7 @@ const MiniRealtimeAnalytics = () => {
             </BarChart>
           </ResponsiveContainer>
         </div>
-      </CardContent>
+      </div>
   );
 };
 
diff --git a/dashboard/src/components/dashboard/RealtimeAnalytics.jsx b/dashboard/src/components/dashboard/RealtimeAnalytics.jsx
index 334c28d..e86dcc7 100644
--- a/dashboard/src/components/dashboard/RealtimeAnalytics.jsx
+++ b/dashboard/src/components/dashboard/RealtimeAnalytics.jsx
@@ -53,12 +53,21 @@ export const summaryCard = (label, sublabel, value, options = {}) => {
     titleClass = "text-sm font-medium text-gray-600 dark:text-gray-300",
     descriptionClass = "text-sm text-muted-foreground",
     background = "bg-white dark:bg-gray-900/60",
+    icon: Icon,
+    iconColor,
+    iconBackground
   } = options;
 
   return (
     <Card className={`${background} backdrop-blur-sm`}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 px-4 py-2">
         <span className={titleClass}>{label}</span>
+        {Icon && (
+          <div className="relative p-2">
+            <div className={`absolute inset-0 rounded-full ${iconBackground}`} />
+            <Icon className={`h-5 w-5 ${iconColor} relative`} />
+          </div>
+        )}
       </CardHeader>
       <CardContent className="px-4 pt-0 pb-2">
         <div className={`text-2xl font-bold mb-1 ${colorClass}`}>