implemented plus button on budget screen and routing for the plus button

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,14 @@
+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"/>
+        </Stack>
+    );
+}

app/(tabs)/budget/addCategory.tsx

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

app/(tabs)/budget/index.tsx

@@ -1,9 +1,10 @@
 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 } from '../../../components';
+import { BudgetHeader, LoadingSymbol, Plus } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
 import { useThemeColor } from '../../../hooks/useThemeColor';
@@ -26,7 +27,7 @@ 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"] : []});
 
     useEffect(() => {
-        console.log("reFetch()");
+        console.log("reFetch()"); //REFETCH LOG
         reFetch();
     }, [selectedPage]);
 
@@ -40,10 +41,15 @@ export default function Page() {
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
+
+            <Plus onPress={() => {
+                router.push("./(tabs)/budget/addCategory")
+            }}/>
+
             {isLoading ? (<LoadingSymbol/>) : (
                <FlatList 
                 data={data} 
-                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_ammount={100} color={item.category_color} category_guid={item.category_guid}/>}
+                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)}/>}
                 keyExtractor={item => item.category_guid}
                 ItemSeparatorComponent={() => {
                     return (<View style={styles.itemSeperatorStyle}/>);
@@ -54,6 +60,15 @@ export default function Page() {
     );
 }
 
+const calculateSumOfCategory = (guid: string, data: {[column: string]: any;}[]): number => {
+
+
+
+
+
+    return 10;
+}
+
 const styles = StyleSheet.create({
     safeAreaViewStyle: {
         flex: 1,

components/budget/categoryItem.tsx

@@ -6,6 +6,7 @@ export type CategoryItemProps = {
     category: string,
     color: ColorValue,
     allocated_ammount: number,
+    total_expenses: number,
     category_guid: string, 
 }
 
@@ -13,7 +14,7 @@ const CategoryItem = (properties: CategoryItemProps) => {
   
     const { colors } = useTheme();
 
-    const subText = `${calculateSumOfExpenses(properties.category_guid)} / ${properties.allocated_ammount} €`;
+    const subText = `${properties.total_expenses} / ${properties.allocated_ammount} €`;
 
     return (
         <CustomCard> 
@@ -53,13 +54,3 @@ const styles = StyleSheet.create({
       fontSize: 17.5,
     }
   })
-
-const calculateSumOfExpenses = (category_guid: string) => {
-  // const { data } = useFetch({sql: "SELECT amount FROM expense WHERE category_guid = ?", args: [category_guid]});
-
-  // let sum: number = 0;
-  // console.log(data);
-
-  console.log("render");
-  return 0;
-}

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];
 }