correct display of budget used

app/(tabs)/budget/_layout.tsx

@@ -8,7 +8,9 @@ export default function _Layout() {
             headerShown: false
           }}>
             <Stack.Screen name="index"/>
-            <Stack.Screen name="addCategory"/>
+            <Stack.Screen 
+                name="addCategory" 
+                options={{presentation: "modal"}}/>
         </Stack>
     );
 }

app/(tabs)/budget/index.tsx

@@ -24,10 +24,9 @@ export default function Page() {
         })
     }, []);
 
-    const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category WHERE type = ?", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
+    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(() => {
-        console.log("reFetch()"); //REFETCH LOG
         reFetch();
     }, [selectedPage]);
 
@@ -49,7 +48,7 @@ export default function Page() {
             {isLoading ? (<LoadingSymbol/>) : (
                <FlatList 
                 data={data} 
-                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_ammount={100} color={item.category_color} category_guid={item.category_guid} total_expenses={calculateSumOfCategory(item.guid, 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}/>);
@@ -60,15 +59,6 @@ export default function Page() {
     );
 }
 
-const calculateSumOfCategory = (guid: string, data: {[column: string]: any;}[]): number => {
-
-
-
-
-
-    return 10;
-}
-
 const styles = StyleSheet.create({
     safeAreaViewStyle: {
         flex: 1,

app/(tabs)/home/index.tsx

@@ -109,7 +109,7 @@ 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={() => {
                 return (<View style={styles.itemSeperatorStyle}/>);

app/(tabs)/stats/index.tsx

@@ -15,8 +15,6 @@ export default function Page() {
         }
     });
 
-
-
     return (
     <View style={styles.container}>
         <Text style={styles.text} onPress={() => {
@@ -37,7 +35,7 @@ export default function Page() {
         }}>Init Database</Text>
 
         <Text style={styles.text} onPress={() => {
-            addCategory("Category", "green", "expense").then(() => {
+            addCategory("Category", "green", "expense", 500).then(() => {
                 const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
                 executeQuery(getCategoryQuery).then((result) => {
                     if("rows" in result[0]) {
@@ -49,7 +47,7 @@ export default function Page() {
         }}>Add new Category Expense</Text>
 
         <Text style={styles.text} onPress={() => {
-            addCategory("Category", "yellow", "saving").then(() => {
+            addCategory("Category", "yellow", "saving", 420).then(() => {
                 const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
                 executeQuery(getCategoryQuery).then((result) => {
                     if("rows" in result[0]) {

components/budget/categoryItem.tsx

@@ -5,7 +5,7 @@ import CustomCard from "../common/CustomCard";
 export type CategoryItemProps = {
     category: string,
     color: ColorValue,
-    allocated_ammount: number,
+    allocated_amount: number,
     total_expenses: number,
     category_guid: string, 
 }
@@ -14,7 +14,7 @@ const CategoryItem = (properties: CategoryItemProps) => {
   
     const { colors } = useTheme();
 
-    const subText = `${properties.total_expenses} / ${properties.allocated_ammount} €`;
+    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
 
     return (
         <CustomCard> 

services/database.ts

@@ -24,7 +24,7 @@ export const initDatabase = async () => {
     }
 };
 
-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)
 
@@ -32,8 +32,8 @@ 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]
             );
         });
     } catch (error) {
@@ -42,7 +42,7 @@ export const addCategory = async (name: string, color: string, type: string) =>
     }
 }
 
-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)