everything refactored

components/stats/CategoryProgressBar.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+
+interface CategoryProgressBarProps {
+    categoryName: string;
+    color?: string;
+    maxValue: number;
+    currentValue: number;
+}
+
+const CategoryProgressBar: React.FC<CategoryProgressBarProps> = ({
+    categoryName,
+    color,
+    maxValue,
+    currentValue,
+}) => {
+    const { colors } = useTheme();
+
+    const progress = (currentValue / maxValue) * 100;
+    const progressText = `${currentValue}€ / ${maxValue}€`;
+
+    const dynamicStyles = StyleSheet.create({
+        progressBarFill: {
+            height: '100%',
+            width: `${progress}%`,
+            backgroundColor: color || colors.accentColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        progressText: {
+            color: colors.primaryText,
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+    });
+
+    const styles = StyleSheet.create({
+        container: {
+            padding: 10,
+        },
+        progressBarContainer: {
+            flexDirection: 'row',
+            height: 50,
+            backgroundColor: colors.elementSelectedColor,
+            borderRadius: 15,
+            overflow: 'hidden',
+            marginTop: 4,
+        },
+        categoryName: {
+            color: colors.primaryText,
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.categoryName}>{categoryName}</Text>
+            <View style={styles.progressBarContainer}>
+                <View style={dynamicStyles.progressBarFill}>
+                    <Text style={dynamicStyles.progressText}>{progressText}</Text>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default CategoryProgressBar;