added SavingsOverview

components/stats/SavingsOverview.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import useFetch from '../../hooks/useFetch';
+
+const SavingsOverview = () => {
+    const { colors } = useTheme();
+    const [saved, setSaved] = useState(0);
+    const [goal, setGoal] = useState(0);
+
+    const savedQuery = {
+        sql: "SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = 'savings'",
+        args: []
+    };  
+
+    const goalQuery = {
+        sql: "SELECT SUM(allocated_amount) as total FROM category WHERE type = 'budget'",
+        args: []
+    };
+
+    const { data: savedData, isLoading: savedLoading } = useFetch(savedQuery);
+    const { data: goalData, isLoading: goalLoading } = useFetch(goalQuery);
+
+    useEffect(() => {
+        if (savedData) {
+            setSaved(savedData[0]?.total || 0);
+        }
+        if (goalData) {
+            setGoal(goalData[0]?.total || 0);
+        }
+    }, [savedData, goalData]);
+
+    const styles = StyleSheet.create({
+        container: {
+            margin: 10,
+            borderRadius: 5,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        text: {
+            fontSize: 26,
+            color: colors.primaryText
+        },
+        boldText: {
+            fontWeight: 'bold'
+        }
+    });
+
+    if (savedLoading || goalLoading) {
+        return <Text>Loading...</Text>;
+    }
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.text}>
+                You have saved <Text style={styles.boldText}>{saved.toFixed(2)}€</Text> out of your goal of <Text style={styles.boldText}>{goal.toFixed(2)}€</Text>.
+            </Text>
+        </View>
+    );
+};
+
+export default SavingsOverview;