added database connection

app/(tabs)/stats/index.tsx

@@ -6,6 +6,7 @@ import Widget from '../../../components/stats/Widget';
 import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
 import BudgetRemaining from '../../../components/stats/BudgetRemaining';
 import DebugMenu from '../../../services/DebugMenu';
+import SavingsOverview from '../../../components/stats/SavingsOverview';
 
 export default function Page() {
     const { colors } = useTheme();
@@ -51,11 +52,14 @@ export default function Page() {
                 <DebugMenu />
                 <Widget title="Budget Overview" />
                 <Widget>
-                    <BudgetRemaining budget={budget} spent={spent} />
+                    <BudgetRemaining/>
                 </Widget>
                 <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
                 <Widget>
-                    <BudgetOverview budget={budget} spent={spent} />
+                    <BudgetOverview/>
+                </Widget>
+                <Widget>
+                    <SavingsOverview/>
                 </Widget>
             </ScrollView>
         </View>

components/stats/BudgetOverview.tsx

@@ -1,31 +1,55 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useTheme } from '../../app/contexts/ThemeContext';
+import useFetch from '../../hooks/useFetch';
 
-interface StatsBudgetProps {
-    spent: number;
-    budget: number;
-}
-
-const BudgetOverview: React.FC<StatsBudgetProps> = ({ spent, budget }) => {
+const BudgetOverview = () => {
     const { colors } = useTheme();
+    const [spent, setSpent] = useState(0);
+    const [budget, setBudget] = useState(0);
+
+    const spentQuery = {
+        sql: "SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = 'budget'",
+        args: []
+    };    
+
+    const budgetQuery = {
+        sql: "SELECT SUM(allocated_amount) as total FROM category WHERE type = 'budget'",
+        args: []
+    };
+
+    const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
+    const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
+
+    useEffect(() => {
+        if (spentData) {
+            setSpent(spentData[0]?.total || 0);
+        }
+        if (budgetData) {
+            setBudget(budgetData[0]?.total || 0);
+        }
+    }, [spentData, budgetData]);
 
     const styles = StyleSheet.create({
         container: {
             margin: 10,
             borderRadius: 5,
             alignItems: 'center',
-            justifyContent: 'center',
+            justifyContent: 'center'
         },
         text: {
             fontSize: 26,
-            color: colors.primaryText,
+            color: colors.primaryText
         },
         boldText: {
-            fontWeight: 'bold',
-        },
+            fontWeight: 'bold'
+        }
     });
 
+    if (spentLoading || budgetLoading) {
+        return <Text>Loading...</Text>;
+    }
+
     return (
         <View style={styles.container}>
             <Text style={styles.text}>
@@ -35,4 +59,4 @@ const BudgetOverview: React.FC<StatsBudgetProps> = ({ spent, budget }) => {
     );
 };
 
-export default BudgetOverview
+export default BudgetOverview;

components/stats/BudgetRemaining.tsx

@@ -1,35 +1,52 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Text, StyleSheet } from 'react-native';
 import { useTheme } from '../../app/contexts/ThemeContext';
+import useFetch from '../../hooks/useFetch';
 
-interface BudgetRemainingProps {
-    budget: number;
-    spent: number;
-}
-
-const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ budget, spent }) => {
-    const { colors } = useTheme();
-
-    const remaining = budget - spent;
-
-    const styles = StyleSheet.create({
-        container: {
-            margin: 10,
-            borderRadius: 5,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
+const styles = StyleSheet.create({
     text: {
         fontSize: 26,
-            color: colors.primaryText,
     },
     boldText: {
         fontWeight: 'bold',
     },
-    });
+});
+
+const BudgetRemaining = () => {
+    const { colors } = useTheme();
+    const [spent, setSpent] = useState(0);
+    const [budget, setBudget] = useState(0);
+
+    const spentQuery = {
+        sql: "SELECT SUM(amount) as total FROM expense",
+        args: []
+    };
+
+    const budgetQuery = {
+        sql: "SELECT SUM(allocated_amount) as total FROM category WHERE type = 'budget'",
+        args: []
+    };
+
+    const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
+    const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
+
+    useEffect(() => {
+        if (spentData) {
+            setSpent(spentData[0]?.total || 0);
+        }
+        if (budgetData) {
+            setBudget(budgetData[0]?.total || 0);
+        }
+    }, [spentData, budgetData]);
+
+    const remaining = budget - spent;
+
+    if (spentLoading || budgetLoading) {
+        return <Text>Loading...</Text>;
+    }
 
     return (
-        <Text style={styles.text}>
+        <Text style={[styles.text, {color: colors.primaryText}]}>
             You have <Text style={styles.boldText}>{remaining.toFixed(2)}€</Text> left.
         </Text>
     );