yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yashwin 2026-05-12 17:36:48 +05:30
parent c324e1d5cb
commit 43221dd274
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/tenant/Tasks.tsx
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 }) => ( 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="bg-white border border-[rgba(0,0,0,0.08)] rounded-xl p-4 flex items-center gap-4 shadow-sm">
<div <div className="shrink-0">
className={cn("w-12 h-12 rounded-lg flex items-center justify-center shrink-0", color)} <Icon className={cn("w-7 h-7", color)} style={style} />
style={style}
>
<Icon className="w-6 h-6 text-white" />
</div> </div>
<div> <div>
<div className="text-2xl font-bold text-gray-900">{value}</div> <div className="text-2xl font-bold text-gray-900">{value}</div>
@ -215,25 +212,25 @@ const Tasks = (): ReactElement => {
icon={Inbox} icon={Inbox}
label="Pending Tasks" label="Pending Tasks"
value={counts?.pending || 0} value={counts?.pending || 0}
style={{ backgroundColor: primaryColor }} style={{ color: primaryColor }}
/> />
<StatCard <StatCard
icon={Clock} icon={Clock}
label="Overdue" label="Overdue"
value={counts?.overdue || 0} value={counts?.overdue || 0}
color="bg-red-500" color="text-red-500"
/> />
<StatCard <StatCard
icon={Calendar} icon={Calendar}
label="Due Soon" label="Due Soon"
value={counts?.due_soon || 0} value={counts?.due_soon || 0}
color="bg-yellow-500" color="text-yellow-500"
/> />
<StatCard <StatCard
icon={CheckCircle2} icon={CheckCircle2}
label="Completed (Week)" label="Completed (Week)"
value={counts?.completed_this_week || 0} value={counts?.completed_this_week || 0}
color="bg-green-500" color="text-green-500"
/> />
</div> </div>