everything refactored

app/(tabs)/stats/index.tsx

@@ -1,61 +1,69 @@
-import { Query } from 'expo-sqlite';
-import { StyleSheet, Text, View } from 'react-native';
-import { addCategory, deleteDatabase, deleteExpenses, executeQuery, initDatabase } from '../../../services/database';
+import React from 'react';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import BudgetOverview from '../../../components/stats/BudgetOverview';
+import { useTheme } from '../../contexts/ThemeContext';
+import Widget from '../../../components/stats/Widget';
+import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
+import BudgetRemaining from '../../../components/stats/BudgetRemaining';
+import DebugMenu from '../../../services/DebugMenu';
 
 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 BudgetData = [
+        { name: 'Utilities', color: '#20B2AA', maxValue: 80, currentValue: 46 },
+        { name: 'Food', color: '#FF6347', maxValue: 88, currentValue: 31 },
+    ];
+
+    const SavingsData = [
+        { name: 'Education', color: '#FF6347', maxValue: 135, currentValue: 0 },
+        { name: 'Rent', color: '#DA70D6', maxValue: 140, currentValue: 96 },
+        { name: 'Food', color: '#F08080', maxValue: 84, currentValue: 78 },
+        { name: 'Healthcare', color: '#20B2AA', maxValue: 134, currentValue: 48 },
+        { name: 'Healthcare', color: '#32CD32', maxValue: 119, currentValue: 69 },
+        { name: 'Clothing', color: '#32CD32', maxValue: 115, currentValue: 99 },
+    ];
+
+    const categoryData = [
+        { category: 'Food', value: 50 },
+        { category: 'Rent', value: 300 },
+        { category: 'Utilities', value: 100 },
+    ];
+
     const styles = StyleSheet.create({
         container: {
             flex: 1,
-            justifyContent: 'space-evenly',
+            backgroundColor: colors.backgroundColor,
+            marginTop: 50,
             alignItems: 'center',
         },
-        text: {
-            fontSize: 40,
-            color: "yellow",
-        }
     });
 
     return (
-    <View style={styles.container}>
-        <Text style={styles.text} onPress={() => {
-            deleteExpenses().then(() => {
-                console.log("Expenses Deleted!");
-            })
-        }}>Reset Expenses</Text>
-        
-        <Text style={styles.text} onPress={() => {
-            deleteDatabase();
-            console.log("Database Deleted!");
-        }}>Reset Database</Text>
-
-        <Text style={styles.text} onPress={() => {
-            initDatabase().then(() => {
-                console.log("Database Initialized!");
-            });
-        }}>Init Database</Text>
-
-        <Text style={styles.text} onPress={() => {
-            addCategory("Category", "green", "expense", 500).then(() => {
-                const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
-                executeQuery(getCategoryQuery).then((result) => {
-                    if("rows" in result[0]) {
-                        console.log(result[0]["rows"]);
-                    }
-                })
-                console.log("Category added with success!");
-            })
-        }}>Add new Category Expense</Text>
-
-        <Text style={styles.text} onPress={() => {
-            addCategory("Category", "yellow", "saving", 420).then(() => {
-                const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
-                executeQuery(getCategoryQuery).then((result) => {
-                    if("rows" in result[0]) {
-                        console.log(result[0]["rows"]);
-                    }
-                })
-                console.log("Category added with success!");
-            })
-        }}>Add new Category Savings</Text>
-    </View>);
+        <View style={styles.container}>
+            <ScrollView>
+                <DebugMenu />
+                <Widget title="Budget Overview" />
+                <Widget>
+                    <BudgetRemaining budget={budget} spent={spent} />
+                </Widget>
+                <Widget text='#TODO Insert Pie-Chart' image='../../../assets/images/8b14el.jpg'/>
+                <Widget>
+                    <BudgetOverview budget={budget} spent={spent} />
+                </Widget>
+                <Widget title="Budget Progress">
+                    <CategoryProgressBarList categories={BudgetData} />
+                </Widget>
+                <Widget title="Savings Progress">
+                    <CategoryProgressBarList categories={SavingsData} />
+                </Widget>
+            </ScrollView>
+        </View>
+    );
 }