implemented navigation for budget screen

app/(tabs)/budget/index.tsx

@@ -1,21 +1,41 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useEffect, useState } from 'react';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import { BudgetHeader } from '../../../components';
+import { BudgetHeader, LoadingSymbol } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
 import { useThemeColor } from '../../../hooks/useThemeColor';
 
 export default function Page() {
-
     const containerColor = useThemeColor("containerColor");
-    const textColor = useThemeColor("primaryText");
 
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
 
+    const [selectedPage, setSelectedPage] = useState("expenses");
+
+    useEffect(() => {
+        const loadSelectedPage = async () => {
+            try {
+                // const storedPage = 
+            } catch(error) {
+
+            } finally {
+
+            }
+        }
+    }, []);
+
+    AsyncStorage.setItem
+
+    const handlePageSelection = (page: string) => {
+        setSelectedPage(page);
+    };
+
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
-
-            <BudgetHeader/>
+            <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
+            {isLoading && <LoadingSymbol/>}
 
             <FlatList 
             data={data} 

app/(tabs)/home/index.tsx

@@ -85,7 +85,7 @@ export default function Page() {
                 })
             }}/>}
 
-            {isLoading && <LoadingSymbol></LoadingSymbol>}
+            {isLoading && <LoadingSymbol/>}
             
             <FlatList
             data={data}