Merge branch '5-budget' into 'main'

Resolve "Budget"

Closes #5

See merge request thschleicher/interaktive-systeme!29

app/(tabs)/_layout.tsx

@@ -34,12 +34,13 @@ export default function Layout() {
 
     return (
         <Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
-            <Tabs.Screen name="budget/index" options={
+            <Tabs.Screen name="budget" options={
                 {
                     tabBarLabel: "Budget",
                     tabBarIcon: ({size, color}) => (
                         <FontAwesome name="money" size={size} color={color}/>),
                     unmountOnBlur: true,
+                    href: "(tabs)/budget"
                 }
             }/>
             <Tabs.Screen name="home" options={

app/(tabs)/budget/_layout.tsx

@@ -0,0 +1,16 @@
+import { Stack } from "expo-router";
+import { useTheme } from "../../contexts/ThemeContext";
+
+export default function _Layout() {
+    const { colors } = useTheme();
+    return (
+        <Stack initialRouteName="index" screenOptions={{
+            headerShown: false
+          }}>
+            <Stack.Screen name="index"/>
+            <Stack.Screen 
+                name="addCategory" 
+                options={{presentation: "modal"}}/>
+        </Stack>
+    );
+}

app/(tabs)/budget/addCategory.tsx

@@ -0,0 +1,8 @@
+
+const addCategory = () => {
+    return (
+        <></>
+    );
+}
+
+export default addCategory;

app/(tabs)/budget/index.tsx

@@ -1,28 +1,70 @@
-import { SafeAreaView, StyleSheet, Switch, Text } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { router } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { BudgetHeader, LoadingSymbol, Plus } from '../../../components';
+import CategoryItem from '../../../components/budget/categoryItem';
+import useFetch from '../../../hooks/useFetch';
+import { useTheme } from '../../contexts/ThemeContext';
 
 export default function Page() {
+    const {colors} = useTheme()
+    const containerColor = colors.containerColor;
 
-    const styles = StyleSheet.create({
+    const [selectedPage, setSelectedPage] = useState("noPageLoaded");
-        container: {
+
-            flex: 1,
+    useEffect(() => {
-            justifyContent: 'center',
+        AsyncStorage.getItem("currentBudgetPage").then((page) => {
-            alignItems: 'center',
+            if(page === "expenses" || page === "savings") {
-        },
+                setSelectedPage(page);
-        switch: {
+            }
-            transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }],
+        }).catch((error) => {
-        },
+            console.log("Error fetching previous page from Async Storage:", error);
-        text: {
+        })
-            color: "red",
+    }, []);
-            fontSize: 40,
+
+    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM expense e RIGHT JOIN category c ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
+
+    useEffect(() => {
+        reFetch();
+    }, [selectedPage]);
+
+    const handlePageSelection = (page: string) => {
+        if(page !== selectedPage) {
+            setSelectedPage(page);
+            AsyncStorage.setItem("currentBudgetPage", page);
         }
-    });
+    };
-
-    // const {data, isLoading, reFetch} = useFetch();
 
     return (
-        <SafeAreaView>
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-            <Text style={styles.text}>Hallo wo bin ich?!</Text>
+            <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
-            <Switch style={styles.switch}/>
+
+            <Plus onPress={() => {
+                router.push("/(tabs)/budget/addCategory")
+            }}/>
+
+            {isLoading ? (<LoadingSymbol/>) : (
+               <FlatList 
+                data={data} 
+                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_amount={item.allocated_amount ?? 0} color={item.category_color} category_guid={item.category_guid} total_expenses={item.total_expenses ?? 0}/>}
+                keyExtractor={item => item.category_guid}
+                ItemSeparatorComponent={() => {
+                    return (<View style={styles.itemSeperatorStyle}/>);
+                }}
+                /> 
+            )}
         </SafeAreaView>
     );
-}
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    },
+});

app/(tabs)/home/index.tsx

@@ -5,7 +5,8 @@ import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
-import { addExpense } from "../../../services/database";
+
+import { addExpense, executeQuery } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";
 import { SimpleDate } from '../../../util/SimpleDate';
@@ -37,26 +38,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
 export default function Page() {
     const { colors, theme } = useTheme()
 
-    //Styles
+    
-    const styles = StyleSheet.create({
-        safeAreaViewStyle: {
-            flex: 1, 
-            backgroundColor: colors.backgroundColor
-        },
-        container: {
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        text: {
-            color: colors.primaryText,
-            fontSize: 70,
-            fontWeight: "bold"
-        },
-        loading: {
-            color: "red",
-        }
-    });
 
     const router = useRouter();
     const [plusShow, setPlusShow] = useState(true);
@@ -81,7 +63,7 @@ export default function Page() {
         }
     }
 
-    const {data, isLoading, reFetch} = useFetch();
+    const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, c.guid AS category_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color, c.type AS category_type FROM expense e JOIN category c ON e.category_guid = c.guid;", args: []});
 
     const expenseDates = useMemo(()=>
         constructMarkedDates(data)
@@ -90,15 +72,20 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView edges={["left", "right", "top"]} style={styles.safeAreaViewStyle}>
+        <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
                 // router.push("/(tabs)/home/addItem");
-                newExpense("Test Title", "3b33b8ac-5fc1-43e5-81fc-cf61628861f7", "69.69.1234", 100).then(() => {
+
-                    reFetch();
+                executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
-                });
+                    if("rows" in result[0]) {
+                        newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
+                            reFetch();
+                        });
+                    }
+                })
             }}/>}
 
-            {isLoading && <LoadingSymbol></LoadingSymbol>}
+            {isLoading && <LoadingSymbol/>}
             
             <FlatList
             data={data}
@@ -122,13 +109,23 @@ export default function Page() {
                     <SearchBar placeholder='Type to Search...'></SearchBar>
                 </>
             }
-            renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
+            renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount}/>}
             keyExtractor={item => item.expense_guid}
-            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
             onScroll={handleScroll}
             scrollEventThrottle={20}
-            >
+            />             
-            </FlatList>            
         </SafeAreaView> 
     );
-}
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});

app/(tabs)/stats/index.tsx

@@ -1,22 +1,20 @@
+import { Query } from 'expo-sqlite';
 import { StyleSheet, Text, View } from 'react-native';
-import { deleteExpenses } from '../../../services/database';
+import { addCategory, deleteDatabase, deleteExpenses, executeQuery, initDatabase } from '../../../services/database';
 
 export default function Page() {
     const styles = StyleSheet.create({
         container: {
             flex: 1,
-            justifyContent: 'center',
+            justifyContent: 'space-evenly',
             alignItems: 'center',
         },
         text: {
-            textAlign: 'center',
             fontSize: 40,
-            color: "red",
+            color: "yellow",
         }
     });
 
-
-
     return (
     <View style={styles.container}>
         <Text style={styles.text} onPress={() => {
@@ -24,5 +22,40 @@ export default function Page() {
                 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>);
 }

components/budget/budgetHeader.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
+import SearchBar from "../common/SearchBar";
+import { useTheme } from "../../app/contexts/ThemeContext";
+
+type BudgetHeaderProperties = {
+    selectedPage: string,
+    handlePageSelection: (page: string) => void,
+}
+
+type PageSelectorButtonProperties = {
+    isSelected: boolean,
+    onPress: () => void,
+    label: string,
+}
+
+const BudgetHeader = (properties: BudgetHeaderProperties) => {
+    const {colors} = useTheme();
+    const backgroundColor = colors.backgroundColor; 
+
+    return (<>
+        <View style={styles.containerStyle}>
+            <PageSelectorButton 
+                label="Expenses"
+                isSelected={properties.selectedPage === "expenses"}
+                onPress={() => {
+                    properties.handlePageSelection("expenses")
+                }}
+            />
+            <PageSelectorButton 
+                label="Savings"
+                isSelected={properties.selectedPage === "savings"}
+                onPress={() => {
+                    properties.handlePageSelection("savings");
+                }}
+            />
+        </View>
+        <SearchBar placeholder='Search...'></SearchBar>
+    </>);
+}
+
+const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
+    const {colors} = useTheme();
+
+    const primaryTextColor = colors.primaryText;
+    const secondaryTextColor = colors.secondaryText;
+    const elementSelectedColor = colors.elementSelectedColor;
+    const elementDefaultColor = colors.elementDefaultColor;
+    const accentColor = colors.accentColor;
+
+    return (
+        <TouchableHighlight
+            underlayColor={elementDefaultColor}
+            onPress={properties.onPress}
+            style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
+            <Text
+            style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
+                {properties.label}
+            </Text>
+
+        </TouchableHighlight>
+    );
+}
+
+export default BudgetHeader;
+
+const styles = StyleSheet.create({
+    headerContainerStyle: {
+        width: "50%",
+        borderRadius: 10,
+        marginHorizontal: 30,
+    },
+    headerTextStyle: {
+        fontSize: 30,
+        textAlign: "center",
+        textAlignVertical: "center",
+    },
+    containerStyle: {
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        marginHorizontal: 20,
+        marginBottom: 20,
+        marginTop: 10,
+    },
+});

components/budget/categoryItem.tsx

@@ -0,0 +1,56 @@
+import { ColorValue, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../app/contexts/ThemeContext";
+import CustomCard from "../common/CustomCard";
+
+export type CategoryItemProps = {
+    category: string,
+    color: ColorValue,
+    allocated_amount: number,
+    total_expenses: number,
+    category_guid: string, 
+}
+
+const CategoryItem = (properties: CategoryItemProps) => {
+  
+    const { colors } = useTheme();
+
+    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
+
+    return (
+        <CustomCard> 
+            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
+            <View style={[styles.textViewStyle]}>
+                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
+                  {properties.category}
+                </Text>
+                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                  {subText}
+                </Text>
+            </View>
+        </CustomCard>
+    );
+};
+
+export default CategoryItem;
+
+const styles = StyleSheet.create({
+    colorTipStyle: {
+      width: 25,
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
+    },
+    textViewStyle: {
+      flex: 2,
+      flexDirection: "column",
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      alignSelf: "stretch",
+    },
+    categoryNameStyle: {
+      fontSize: 30,
+      fontWeight: "bold",
+    },
+    subTextStyle: {
+      fontSize: 17.5,
+    }
+  })

components/common/CustomCard.tsx

@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "stretch",
     alignContent: "space-between",
-    borderRadius: 20,
+    borderRadius: 10,
     marginHorizontal: 10,
   },
   boxShadow: {},

components/home/Setting.tsx

@@ -1,7 +1,7 @@
-import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity } from 'react-native'
+import React from 'react';
-import React from 'react'
+import { StyleSheet, Switch, SwitchProps, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
-import { SIZES } from '../../../constants/theme'
+import { useTheme } from '../../app/contexts/ThemeContext';
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import { SIZES } from '../../constants/theme';
 
 interface ToggleSettingProps extends SwitchProps {
   settingsTitle: string;

components/home/Welcome.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Image, Text, View, ViewProps } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
-import { MARGINS, SIZES } from '../../../constants/theme'
+import { MARGINS, SIZES } from '../../constants/theme'
-import { useTheme } from '../../../app/contexts/ThemeContext'
+import { useTheme } from '../../app/contexts/ThemeContext'
 
 type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
 
@@ -28,13 +28,13 @@ function getTimeOfDay(date: Date) : string {
 
 
 export default function Welcome(props: WelcomeProps) {
-  const {colors} = useTheme()
+  const { colors } = useTheme();
+
   const date = new Date()
   const dateString = formatDate(date)
   const timeOfDay = getTimeOfDay(date)
   const onpress = props.onPress
 
-  const textcolor = colors.primaryText
 
   return (
     <View style={{
@@ -57,7 +57,7 @@ export default function Welcome(props: WelcomeProps) {
         </TouchableOpacity>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>{dateString}</Text>
       </View>
       <View style={{
@@ -65,7 +65,7 @@ export default function Welcome(props: WelcomeProps) {
       }}>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>Good {timeOfDay}, {props.name}</Text>
         </View>
     </View>

components/home/expenseItem.tsx

@@ -1,39 +1,33 @@
 import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
-import { SIZES } from '../../../constants/theme';
+import { SIZES } from '../../constants/theme';
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import CustomCard from "../common/CustomCard";
-import CustomCard from "../../common/CustomCard";
+import { useTheme } from '../../app/contexts/ThemeContext';
-import { SimpleDate } from '../../../util/SimpleDate';
 
-type ISOdateString = string
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
-
-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const {colors} = useTheme()
+  const { colors } = useTheme(); 
-  const textColor = colors.primaryText
-  const backgroundColor = colors.containerColor
-  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
-        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.normal,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.category}</Text>
           <Text style={{
             fontSize: SIZES.large,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.title}</Text>
           <Text style={{
             fontSize: SIZES.small,
-            color: textColor
+            color: colors.primaryText
-          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
+          }} numberOfLines={1}>{itemProps.date}</Text>
         </View>
-        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.xxLarge,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.value}</Text>
         </View>
        

components/index.tsx

@@ -1,7 +1,7 @@
 //home
-import ExpenseItem from "./home/expenseItem/expenseItem"
+import { ButtonSetting, ToggleSetting } from "./home/Setting"
-import Welcome from "./home/Welcome/Welcome"
+import Welcome from "./home/Welcome"
-import { ToggleSetting, ButtonSetting } from "./home/userSettings/Setting"
+import ExpenseItem from "./home/expenseItem"
 
 //common
 import LoadingSymbol from "./common/loadingSymbol"
@@ -11,13 +11,12 @@ import CustomCard from "./common/CustomCard"
 
 
 //login
+import BudgetHeader from "./budget/budgetHeader"
 import Input from "./login/input"
 
 export {
-  ExpenseItem, Input,
+  BudgetHeader, ButtonSetting, CustomCard, ExpenseItem, Input,
   LoadingSymbol, Plus,
-  SearchBar, Welcome,
+  SearchBar, ToggleSetting, Welcome
-  ToggleSetting, CustomCard,
-  ButtonSetting
 }
 

components/login/input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
-import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
+import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 
 interface InputProps {
   label? : string,

hooks/useFetch.ts

@@ -1,20 +1,21 @@
+import { Query } from "expo-sqlite";
 import { useEffect, useState } from "react";
 import { executeQuery } from "../services/database";
 
-const useFetch = () => {
+const useFetch = (query: Query) => {
 
     const [isLoading, setIsLoading] = useState(false);
     const [data, setData] = useState<{[column: string]: any;}[]>([]);
 
     const reFetch = () => {
         setIsLoading(true);
-        executeQuery("SELECT e.guid AS expense_guid, c.guid AS category_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color, c.type AS category_type FROM expense e JOIN category c ON e.category_guid = c.guid;").then((result) => {
+        executeQuery(query).then((result) => {
             if("rows" in result[0]) {
                 setData(result[0]["rows"]);
             }
         }).catch((error: any) => {
             console.error("Fetching data from database has failed: ", error);
-        }).finally(() => {
+        }).then(() => {
             setIsLoading(false);
         });
     }

hooks/useThemeColor.ts

@@ -7,7 +7,7 @@ import colors from "../constants/colors";
  * @returns 
  */
 export function useThemeColor(colorName: keyof typeof colors.light & keyof typeof colors.dark): string {
-    console.warn("useThemeColor is depreciated. Use useTheme().colors instead")
+    console.log("useThemeColor is depreciated. Use useTheme().colors instead")
     const theme = useColorScheme() ?? "light";
     return colors[theme][colorName];
 }

services/database.ts

@@ -1,4 +1,3 @@
-//created by thschleicher
 
 import * as SQLite from "expo-sqlite";
 import uuid from "react-native-uuid";
@@ -6,27 +5,26 @@ import uuid from "react-native-uuid";
 import { Query } from "expo-sqlite";
 import { SimpleDate } from "../util/SimpleDate";
 
-const db = SQLite.openDatabase("interactive_systeme.db");
+let db: SQLite.SQLiteDatabase;
 
 export const initDatabase = async () => {
+    db = SQLite.openDatabase("interactive_systeme.db");
     try {
         await db.transactionAsync(async (tx: SQLite.SQLTransactionAsync) => {
             await tx.executeSqlAsync(
-                "CREATE TABLE IF NOT EXISTS category (guid VARCHAR(36) PRIMARY KEY, name TEXT, color TEXT, type TEXT);"
+                "CREATE TABLE IF NOT EXISTS category (guid VARCHAR(36) PRIMARY KEY, name TEXT, color TEXT, type TEXT, allocated_amount DOUBLE);"
             );
             await tx.executeSqlAsync(
                 "CREATE TABLE IF NOT EXISTS expense (guid VARCHAR(36) PRIMARY KEY, name TEXT, category_guid VARCHAR(36), datetime DATETIME, amount DOUBLE, FOREIGN KEY (category_guid) REFERENCES category(guid));"
             );
-            console.log("Successfully initialized Tables!");
         });
     } catch (error) {
-
+        console.log("Error initializing the Database!");
-        console.log("Error initializing the Tables!");
         throw (error);
     }
 };
 
-export const addCategory = async (name: string, color: string, type: string) => {
+export const addCategory = async (name: string, color: string, type: string, allocated_amount: number) => {
 
     //needs user input validation for type and color (should be validated by this function)
 
@@ -34,18 +32,17 @@ export const addCategory = async (name: string, color: string, type: string) =>
 
     try {
         await db.transactionAsync(async (tx) => {
-            await tx.executeSqlAsync("INSERT INTO category (guid, name, color, type) VALUES (?, ?, ?, ?);",
+            await tx.executeSqlAsync("INSERT INTO category (guid, name, color, type, allocated_amount) VALUES (?, ?, ?, ?, ?);",
-                [UUID.toString(), name, color, type]
+                [UUID.toString(), name, color, type, allocated_amount]
             );
         });
-        console.log("Category added successfully!");
     } catch (error) {
         console.log("Error adding category: ", error);
         throw error;
     }
 }
 
-export const addExpense = async (name: string, category_guid: string,datetime: string, amount: number) => {
+export const addExpense = async (name: string, category_guid: string, datetime: string, amount: number) => {
 
     //needs user input validation for type and color (should be validated by this function)
 
@@ -56,7 +53,6 @@ export const addExpense = async (name: string, category_guid: string,datetime: s
             await tx.executeSqlAsync("INSERT INTO expense (guid, name, category_guid, datetime, amount) VALUES (?, ?, ?, ?, ?);", [expenseUUID.toString(), name, category_guid, datetime, amount]
             );
         });
-        console.log("Expense added successfully!");
     } catch (error) {
         console.log("Error adding expense: ", error);
         throw error;
@@ -85,15 +81,15 @@ export const deleteExpense = async (guid: string) => {
     }
 }
 
-export const executeQuery = async (query: string) => {
+export const executeQuery = async (query: Query) => {   
-    const sqliteQuary: Query[] = [{sql: query, args: []}];    
+        const result = await db.execAsync([query], true);
-    const result = await db.execAsync(sqliteQuary, true);
     if("error" in result[0]){
         throw result[0].error
     }
-    return result;
+    return result; 
 }
 
+
 export const deleteExpenses = async () => {
     try {
         await db.transactionAsync(async (tx: SQLite.SQLTransactionAsync) => {
@@ -125,9 +121,7 @@ export const deleteDatabase = () => {
             console.log("Error deleting the Database: ", error);
             throw error;
         }
-
     });
-    console.log("Database Deleted!")
 }
 
 const closeDatabase = async () => {
@@ -149,9 +143,9 @@ export const DEV_populateDatabase = async () => {
 
         for(let i=0; i < 5; i++){
             let random = Math.floor(Math.random() * colors.length);
-            await addCategory(`Category ${i}`, colors[random], "budget")
+            await addCategory(`Category ${i}`, colors[random], "budget", 50)
         }
-        const result = await executeQuery("SELECT * from category")
+        const result = await executeQuery({sql:"SELECT * from category", args:[]})
         let categories: {[column: string]: any}[];
         if("rows" in result[0]){
             categories = result[0]["rows"]