From f926ab2701a5d39faa2a6e8ece08379ffc974b6b Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Thu, 7 May 2026 12:21:08 +0800
Subject: [PATCH] feat: add colored top border to stats cards

---
 src/frontend/components/StatsCard.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/components/StatsCard.tsx b/src/frontend/components/StatsCard.tsx
index 8525456..09e9ffd 100644
--- a/src/frontend/components/StatsCard.tsx
+++ b/src/frontend/components/StatsCard.tsx
@@ -14,18 +14,21 @@ interface StatsCardProps {
 }
 
 export function StatsCard({ title, value, description, icon: Icon, color, trend }: StatsCardProps) {
+  const accentColor = `var(--mantine-color-${color ?? 'brand-blue'}-5)`
+
   return (
     <Card
       withBorder
       padding="lg"
       radius="xl"
       className="premium-card"
-      styles={(theme) => ({
+      styles={{
         root: {
           backgroundColor: 'var(--mantine-color-body)',
           borderColor: 'rgba(128,128,128,0.1)',
+          borderTop: `3px solid ${accentColor}`,
         },
-      })}
+      }}
     >
       <Group justify="space-between" mb="xs">
         <ThemeIcon