refactor: simplify StatCard UI by removing background containers and applying icon colors directly

This commit is contained in:
Yashwin 2026-05-12 17:36:48 +05:30
parent c324e1d5cb
commit 43221dd274

View File

@ -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>