From 43221dd2746539cab9de1a467d49334368554c3e Mon Sep 17 00:00:00 2001
From: Yashwin <yashwin.shankar@tech4biz.io>
Date: Tue, 12 May 2026 17:36:48 +0530
Subject: [PATCH] refactor: simplify StatCard UI by removing background
 containers and applying icon colors directly

---
 src/pages/tenant/Tasks.tsx | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/pages/tenant/Tasks.tsx b/src/pages/tenant/Tasks.tsx
index 09096ab..5eb1345 100644
--- a/src/pages/tenant/Tasks.tsx
+++ b/src/pages/tenant/Tasks.tsx
@@ -27,11 +27,8 @@ const formatDate = (value?: string | null): string => {
 
 const StatCard = ({ icon: Icon, label, value, color, style }: { icon: any, label: string, value: number, color?: string, style?: React.CSSProperties }) => (
   <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl p-4 flex items-center gap-4 shadow-sm">
-    <div 
-      className={cn("w-12 h-12 rounded-lg flex items-center justify-center shrink-0", color)}
-      style={style}
-    >
-      <Icon className="w-6 h-6 text-white" />
+    <div className="shrink-0">
+      <Icon className={cn("w-7 h-7", color)} style={style} />
     </div>
     <div>
       <div className="text-2xl font-bold text-gray-900">{value}</div>
@@ -215,25 +212,25 @@ const Tasks = (): ReactElement => {
             icon={Inbox} 
             label="Pending Tasks" 
             value={counts?.pending || 0} 
-            style={{ backgroundColor: primaryColor }}
+            style={{ color: primaryColor }}
           />
           <StatCard 
             icon={Clock} 
             label="Overdue" 
             value={counts?.overdue || 0} 
-            color="bg-red-500" 
+            color="text-red-500" 
           />
           <StatCard 
             icon={Calendar} 
             label="Due Soon" 
             value={counts?.due_soon || 0} 
-            color="bg-yellow-500" 
+            color="text-yellow-500" 
           />
           <StatCard 
             icon={CheckCircle2} 
             label="Completed (Week)" 
             value={counts?.completed_this_week || 0} 
-            color="bg-green-500" 
+            color="text-green-500" 
           />
         </div>