everything refactored

components/stats/BudgetOverview.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+
+interface StatsBudgetProps {
+    spent: number;
+    budget: number;
+}
+
+const BudgetOverview: React.FC<StatsBudgetProps> = ({ spent, budget }) => {
+    const { colors } = useTheme();
+
+    const styles = StyleSheet.create({
+        container: {
+            margin: 10,
+            borderRadius: 5,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        text: {
+            fontSize: 26,
+            color: colors.primaryText,
+        },
+        boldText: {
+            fontWeight: 'bold',
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>
+                You have spent <Text style={styles.boldText}>{spent.toFixed(2)}€</Text> out of your budget of <Text style={styles.boldText}>{budget.toFixed(2)}€</Text>.
+            </Text>
+        </View>
+    );
+};
+
+export default BudgetOverview