dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update mobile metric cards with proper 500-range vibrant colors matching admin dashboard

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 14:00:03 +01:00
parent e4eadc858c
commit 71a05c51bf
1 changed files with 72 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
apps/mobile/src/components/PerformanceMetrics.tsx
View File

@ -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',
},
});