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

components/stats/BudgetTotal.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import useFetch from '../../hooks/useFetch';
+import { CategoryType } from '../../services/database';
+import {useCategoryData} from '../../hooks/useCategoryData';
+
+const styles = StyleSheet.create({
+    container: {
+        margin: 10,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    text: {
+        fontSize: 26,
+        color: `black`
+    },
+    boldText: {
+        fontWeight: 'bold'
+    },
+    negativeText: {
+        color: 'red',
+    },
+    positiveText: {
+        color: 'green',
+    },
+});
+
+interface BudgetTotalProps {
+    goodColor?: string;
+    badColor?: string;
+}
+
+const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
+    const { colors } = useTheme();
+    const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);
+
+    const { total, expenseTotal } = data;
+
+    const remaining = total - expenseTotal;
+
+    if (isLoading) {
+        return <Text>Loading...</Text>;
+    }
+
+    return (
+        <Text style={[styles.text, { color: colors.primaryText }]}>
+            {remaining >= 0 ? (
+                <>
+                    Your remaining overall Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}€</Text>.
+                </>
+            ) : (
+                <>
+                    Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>.
+                </>
+            )}
+        </Text>
+    );
+};
+
+export default BudgetTotal;