added database connection

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 styles = StyleSheet.create({
+    text: {
+        fontSize: 26,
+    },
+    boldText: {
+        fontWeight: 'bold',
+    },
+});
 
-const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ budget, spent }) => {
+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;
 
-    const styles = StyleSheet.create({
-        container: {
-            margin: 10,
-            borderRadius: 5,
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        text: {
-            fontSize: 26,
-            color: colors.primaryText,
-        },
-        boldText: {
-            fontWeight: 'bold',
-        },
-    });
+    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>
     );