made hook to streamline getting totals and expense by type of category

app/(tabs)/stats/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import BudgetTotal from '../../../components/stats/BudgetTotal';
+import { useTheme } from '../../contexts/ThemeContext';
+import Widget from '../../../components/stats/Widget';
+import DebugMenu from '../../../services/DebugMenu';
+import SavingsOverview from '../../../components/stats/SavingsOverview';
+import FinancialAdvice from '../../../components/stats/FinancialAdvice';
+import BudgetOverview from '../../../components/stats/BudgetOverview';
+
+export default function Page() {
+    const { colors } = useTheme();
+
+    // Mock data #TODO Database einbinden
+    // what to do when amount too small?
+
+    const spent = 120.75;
+    const budget = 696.96;
+
+  
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: colors.backgroundColor,
+            marginTop: 50,
+            alignItems: 'center',
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <ScrollView>
+                <DebugMenu />
+                <Widget title='"Financial" Tips' backgroundColor='orange'>
+                    <FinancialAdvice/>
+                </Widget>
+                <Widget title="Budget Overview" />
+                <Widget>
+                    <BudgetTotal/>
+                </Widget>
+                <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
+                <Widget>
+                    <BudgetOverview/>
+                </Widget>
+                <Widget>
+                    <SavingsOverview/>
+                </Widget>
+            </ScrollView>
+        </View>
+    );
+}