Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context

app/(tabs)/budget/index.tsx

@@ -1,81 +0,0 @@
-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, CategoryItem, LoadingSymbol, Plus } from '../../../components';
-import useFetch from '../../../hooks/useFetch';
-import { useTheme } from '../../contexts/ThemeContext';
-
-export default function Page() {
-    const {colors} = useTheme()
-    const containerColor = colors.containerColor;
-
-    const [selectedPage, setSelectedPage] = useState("noPageLoaded");
-
-    useEffect(() => {
-        AsyncStorage.getItem("currentBudgetPage").then((page) => {
-            if(page === "expenses" || page === "savings") {
-                setSelectedPage(page);
-            }
-        }).catch((error) => {
-            console.log("Error fetching previous page from Async Storage:", error);
-        })
-    }, []);
-
-    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 category c LEFT JOIN expense e 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 handleCategoryPress = (item: {[column: string]: any;}) => {
-        router.push({pathname: "/(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
-    }
-
-    return (
-        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-            <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
-
-            <Plus onPress={() => {
-                router.push({pathname: '/(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} 
-                    onPress={() => {
-                        handleCategoryPress(item);
-                    }}/>}
-                keyExtractor={item => item.category_guid}
-                ItemSeparatorComponent={() => {
-                    return (<View style={styles.itemSeperatorStyle}/>);
-                }}
-                /> 
-            )}
-        </SafeAreaView>
-    );
-}
-
-const styles = StyleSheet.create({
-    safeAreaViewStyle: {
-        flex: 1,
-    },
-    itemSeperatorStyle: {
-        marginVertical: 5,
-    },
-});