last changes

app/(tabs)/(budget)/addCategory.tsx

@@ -5,7 +5,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
 import { addCategory } from "../../../services/database";
 import { useTheme } from "../../contexts/ThemeContext";
-import { CategoryType } from "../../../services/database";
+import { CategoryType } from "../../../types/dbItems";
 
 export default function Page() {
     const {colors} = useTheme();

app/(tabs)/(budget)/editCategory.tsx

@@ -6,6 +6,7 @@ import useFetch from "../../../hooks/useFetch";
 import { deleteCategory, deleteExpense, updateCategory } from "../../../services/database";
 import { useTheme } from "../../contexts/ThemeContext";
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { CategoryType } from "../../../types/dbItems";
 
 const addCategory = () => {
     const {colors} = useTheme();
@@ -13,7 +14,7 @@ const addCategory = () => {
 
     const [categoryName, setCategoryName] = useState(category_name.toString());
     const [categoryColor, setCategoryColor] = useState(category_color.toString());
-    const [selectedType, setSelectedType] = useState(category_type.toString());
+    const [selectedType, setSelectedType] = useState<CategoryType>(category_type === "expense" ? CategoryType.EXPENSE : CategoryType.SAVING);
     const [amount, setAmount] = useState(Number.parseFloat(category_amount.toString()));
 
     const {data} = useFetch({sql: "SELECT * FROM expense WHERE category_guid = ?", args: [category_guid.toString()]});

app/(tabs)/(budget)/index.tsx

@@ -67,7 +67,6 @@ export default function Page() {
         })
     }, [data, searchString, selectedPage]);
 
-    console.log(selectedPage)
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <View style={{flex: 1, marginHorizontal: 10}}>

app/(tabs)/(stats)/index.tsx

@@ -1,24 +1,39 @@
 import React from 'react';
-import { SafeAreaView } from 'react-native';
+
 import { Graph } from '../../../components';
 import BudgetOverview from '../../../components/stats/BudgetOverview';
-import BudgetRemaining from '../../../components/stats/BudgetRemaining';
+import BudgetRemaining from '../../../components/stats/SavingsOverview';
 import SavingsOverview from '../../../components/stats/SavingsOverview';
 import Widget from '../../../components/stats/Widget';
+import FinancialAdvice from '../../../components/stats/FinancialAdvice';
+import BudgetTotal from '../../../components/stats/BudgetTotal';
+import { ScrollView } from 'react-native-gesture-handler';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import DebugMenu from '../../../services/DebugMenu';
 
 export default function Page() {
 
     return (
         <SafeAreaView style={{flex:1}}>
+            <ScrollView>
+                {/* <DebugMenu/> */}
                 <Widget title="Budget Overview"/>
                 <Graph/>
-            <BudgetRemaining/>
                 <Widget>
                     <BudgetOverview/>
                 </Widget>
                 <Widget>
                     <SavingsOverview/>
                 </Widget>
+                <Widget>
+                    <BudgetTotal/>
+                </Widget>
+                {/* <Widget title='"Financial" Tips' backgroundColor='orange'>
+                    <FinancialAdvice/>
+                </Widget> */}
+                    
+                   
+            </ScrollView>
         </SafeAreaView>
     );
 }

app/(tabs)/stats/index.tsx

@@ -1,52 +0,0 @@
-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>
-    );
-}

app/expense/new.tsx

@@ -54,9 +54,7 @@ export default function AddItem() {
 
   useEffect(()=>{
     if(searchParams.category !== undefined){
-      console.log(searchParams.category)
       executeQuery({sql: "SELECT * FROM category WHERE guid = ?", args: [searchParams.category]}).then((result) =>{
-        console.log("then")
         if("rows" in result[0]){
           const category = result[0]["rows"][0];
           setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})

components/budget/typeSelectorSwitch.tsx

@@ -1,7 +1,7 @@
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { useTheme } from "../../app/contexts/ThemeContext";
-import { CategoryType } from "../../services/database";
+import { CategoryType } from "../../types/dbItems";
 
 export type TypeSelectorSwitchProperties = {
     handleButtonPress: (type: CategoryType) => void,

components/stats/BudgetOverview.tsx

@@ -2,7 +2,7 @@ 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 { CategoryType } from '../../types/dbItems';
 import {useCategoryData} from '../../hooks/useCategoryData';
 
 const styles = StyleSheet.create({
@@ -47,7 +47,7 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
     return (
         <Text style={[styles.text, { color: colors.primaryText }]}>
             <>
-                You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
+                You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>
             </>
         </Text>
     );

components/stats/BudgetTotal.tsx

@@ -2,7 +2,7 @@ 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 { CategoryType } from '../../types/dbItems';
 import {useCategoryData} from '../../hooks/useCategoryData';
 
 const styles = StyleSheet.create({
@@ -48,11 +48,11 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
         <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 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>.
+                    Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>
                 </>
             )}
         </Text>

components/stats/SavingsOverview.tsx

@@ -2,7 +2,7 @@ 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 { CategoryType } from '../../types/dbItems';
 import {useCategoryData} from '../../hooks/useCategoryData';
 
 const styles = StyleSheet.create({
@@ -48,11 +48,11 @@ const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor
         <Text style={[styles.text, { color: colors.primaryText }]}>
             {remaining >= 0 ? (
                 <>
-                    You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
+                    You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text>
                 </>
             ) : (
                 <>
-                    You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>.
+                    You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>
                 </>
             )}
         </Text>

hooks/useCategoryData.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import useFetch from './useFetch';
-import { CategoryType } from '../services/database';
+import { CategoryType } from '../types/dbItems';
 
 export const useCategoryData = (CategoryType: string) => {
     const [data, setData] = useState({ total: 0, expenseTotal: 0 });

package-lock.json

@@ -28,7 +28,7 @@
         "react-native-calendars": "^1.1303.0",
         "react-native-chart-kit": "^6.12.0",
         "react-native-gesture-handler": "~2.12.0",
-        "react-native-reanimated": "^3.3.0",
+        "react-native-reanimated": "~3.3.0",
         "react-native-safe-area-context": "4.6.3",
         "react-native-screens": "~3.22.0",
         "react-native-uuid": "^2.0.1",
@@ -16163,9 +16163,9 @@
       }
     },
     "node_modules/react-native-reanimated": {
-      "version": "3.6.1",
+      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
-      "integrity": "sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==",
+      "integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
       "dependencies": {
         "@babel/plugin-transform-object-assign": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",

package.json

@@ -38,7 +38,7 @@
     "react-native-calendars": "^1.1303.0",
     "react-native-chart-kit": "^6.12.0",
     "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "^3.3.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-uuid": "^2.0.1",

services/DebugMenu.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Button, Alert } from 'react-native';
 import { addCategory, addExpense, deleteExpenses, deleteCategories, DEV_populateDatabase, deleteDatabase } from './database';
 import uuid from 'react-native-uuid';
+import { CategoryType } from '../types/dbItems';
 
 const randomColors = ["red", "blue", "green", "purple", "yellow"];
 
@@ -46,7 +47,7 @@ const DebugMenu = () => {
         const allocated_amount = getRandomNumber();
         const type = "expense";
 
-        addCategory(name, color, type, allocated_amount)
+        addCategory(name, color, CategoryType.EXPENSE, allocated_amount)
             .then(() => Alert.alert("Category Added", `Name: ${name}, Color: ${color}`))
             .catch((error: any) => console.error("Error adding category: ", error));
     };

services/database.ts

@@ -4,13 +4,11 @@ import uuid from "react-native-uuid";
 
 import { Query } from "expo-sqlite";
 import { SimpleDate } from "../util/SimpleDate";
+import { CategoryType } from "../types/dbItems";
 
 let db: SQLite.SQLiteDatabase;
 
-export enum CategoryType {
+
-    SAVING = "saving",
-    EXPENSE = "expense",
-}
 
 export const initDatabase = async () => {
     db = SQLite.openDatabase("interactive_systeme.db");

types/dbItems.ts

@@ -1,3 +1,7 @@
+export enum CategoryType {
+  SAVING = "saving",
+  EXPENSE = "expense",
+}
 export interface Category {
   guid? : string;
   name? : string;