From 71a05c51bf282cd868c8986a83970ae4876e378d Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 14:00:03 +0100
Subject: [PATCH] fix: update mobile metric cards with proper 500-range vibrant
 colors matching admin dashboard

---
 .../src/components/PerformanceMetrics.tsx     | 115 +++++++++++-------
 1 file changed, 72 insertions(+), 43 deletions(-)

diff --git a/apps/mobile/src/components/PerformanceMetrics.tsx b/apps/mobile/src/components/PerformanceMetrics.tsx
index 3e681c3..b21b053 100644
--- a/apps/mobile/src/components/PerformanceMetrics.tsx
+++ b/apps/mobile/src/components/PerformanceMetrics.tsx
@@ -10,42 +10,78 @@ interface MetricProps {
   change: string;
   trend: 'up' | 'down';
   icon: string;
-  colors: string[];
+  colorScheme: 'blue' | 'green' | 'purple' | 'orange';
 }
 
-const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon, colors }) => {
+const getColorScheme = (colorScheme: 'blue' | 'green' | 'purple' | 'orange') => {
+  const schemes = {
+    blue: {
+      colors: ['#3b82f6', '#06b6d4'],
+      text: '#ffffff',
+      badge: '#dbeafe',
+      badgeText: '#1e40af',
+      icon: '#60a5fa',
+    },
+    green: {
+      colors: ['#10b981', '#14b8a6'],
+      text: '#ffffff',
+      badge: '#dcfce7',
+      badgeText: '#047857',
+      icon: '#34d399',
+    },
+    purple: {
+      colors: ['#a855f7', '#3b82f6'],
+      text: '#ffffff',
+      badge: '#e9d5ff',
+      badgeText: '#6b21a8',
+      icon: '#c084fc',
+    },
+    orange: {
+      colors: ['#f97316', '#ef4444'],
+      text: '#ffffff',
+      badge: '#fed7aa',
+      badgeText: '#92400e',
+      icon: '#fb923c',
+    },
+  };
+  return schemes[colorScheme];
+};
+
+const MetricCard: React.FC<MetricProps> = ({ title, value, change, trend, icon, colorScheme }) => {
+  const colors = getColorScheme(colorScheme);
   const isPositive = trend === 'up';
-  const changeColor = isPositive ? '#10b981' : '#ef4444';
   const trendIcon = isPositive ? 'arrow-up' : 'arrow-down';
 
   return (
     <LinearGradient
-      colors={colors}
+      colors={colors.colors as any}
       start={{ x: 0, y: 0 }}
       end={{ x: 1, y: 1 }}
       style={styles.card}
     >
       <View style={styles.cardContent}>
-        <View style={styles.iconContainer}>
-          <Ionicons name={icon as any} size={24} color="#fff" />
+        <View style={styles.header}>
+          <Text style={[styles.label, { color: colors.text }]}>{title}</Text>
+          <View style={[styles.iconContainer, { backgroundColor: colors.icon + '40' }]}>
+            <Ionicons name={icon as any} size={20} color={colors.text} />
+          </View>
         </View>
 
-        <View style={styles.info}>
-          <Text style={styles.label}>{title}</Text>
-          <Text style={styles.value}>{value}</Text>
-        </View>
+        <Text style={[styles.value, { color: colors.text }]}>{value}</Text>
 
         <View style={styles.changeContainer}>
-          <View style={[styles.trendBadge, { backgroundColor: changeColor }]}>
+          <View style={[styles.trendBadge, { backgroundColor: colors.badge }]}>
             <Ionicons
               name={trendIcon}
               size={12}
-              color="#fff"
+              color={colors.badgeText}
               style={{ marginRight: 4 }}
             />
-            <Text style={styles.changeText}>{change}</Text>
+            <Text style={[styles.changeText, { color: colors.badgeText, fontWeight: '700' }]}>
+              {trend === 'up' ? '↑' : '↓'} {change}
+            </Text>
           </View>
-          <Text style={styles.compareText}>vs month</Text>
+          <Text style={[styles.compareText, { color: colors.text }]}>vs month</Text>
         </View>
       </View>
     </LinearGradient>
@@ -60,7 +96,7 @@ export const PerformanceMetrics: React.FC = () => {
       change: '+12%',
       trend: 'up',
       icon: 'people',
-      colors: ['#1e40af', '#0369a1'],
+      colorScheme: 'blue',
     },
     {
       title: 'Active Clients',
@@ -68,7 +104,7 @@ export const PerformanceMetrics: React.FC = () => {
       change: '+5%',
       trend: 'up',
       icon: 'person-add',
-      colors: ['#065f46', '#0d9488'],
+      colorScheme: 'green',
     },
     {
       title: 'Revenue',
@@ -76,7 +112,7 @@ export const PerformanceMetrics: React.FC = () => {
       change: '0%',
       trend: 'down',
       icon: 'wallet',
-      colors: ['#6b21a8', '#1e40af'],
+      colorScheme: 'purple',
     },
     {
       title: 'Growth',
@@ -84,7 +120,7 @@ export const PerformanceMetrics: React.FC = () => {
       change: '-2%',
       trend: 'down',
       icon: 'trending-up',
-      colors: ['#9a3412', '#dc2626'],
+      colorScheme: 'orange',
     },
   ];
 
@@ -116,7 +152,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 14,
     fontWeight: '600',
-    color: theme.colors.gray600,
+    color: '#4b5563',
     letterSpacing: 0.3,
   },
   metricsGrid: {
@@ -131,61 +167,54 @@ const styles = StyleSheet.create({
   card: {
     borderRadius: 20,
     overflow: 'hidden',
-    elevation: 5,
+    elevation: 8,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.15,
+    shadowOpacity: 0.2,
     shadowRadius: 12,
   },
   cardContent: {
     padding: 16,
-    minHeight: 140,
+    minHeight: 160,
     justifyContent: 'space-between',
   },
   iconContainer: {
-    width: 40,
-    height: 40,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    width: 36,
+    height: 36,
+    borderRadius: 10,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 12,
-  },
-  info: {
-    marginBottom: 12,
   },
   label: {
-    fontSize: 12,
-    fontWeight: '600',
-    color: '#fff',
-    letterSpacing: 0.5,
-    marginBottom: 6,
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.6,
+    marginBottom: 12,
     textTransform: 'uppercase',
   },
   value: {
-    fontSize: 24,
+    fontSize: 28,
     fontWeight: '800',
-    color: '#fff',
+    marginBottom: 12,
   },
   changeContainer: {
     alignItems: 'flex-start',
   },
   trendBadge: {
     flexDirection: 'row',
-    paddingHorizontal: 10,
+    paddingHorizontal: 8,
     paddingVertical: 4,
-    borderRadius: 8,
+    borderRadius: 6,
     alignItems: 'center',
-    marginBottom: 4,
+    marginBottom: 6,
   },
   changeText: {
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: '700',
-    color: '#fff',
   },
   compareText: {
     fontSize: 10,
-    color: '#fff',
     fontWeight: '500',
   },
 });
+