navigation finished and debug menu in stats expanded

app/(tabs)/budget/index.tsx

@@ -1,7 +1,8 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useEffect, useState } from 'react';
-import { SafeAreaView, StyleSheet, View } from 'react-native';
+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 CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
@@ -10,41 +11,43 @@ import { useThemeColor } from '../../../hooks/useThemeColor';
 export default function Page() {
     const containerColor = useThemeColor("containerColor");
 
-    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");
+    const [selectedPage, setSelectedPage] = useState("noPageLoaded");
 
     useEffect(() => {
-        const loadSelectedPage = async () => {
-            try {
-                // const storedPage = 
-            } catch(error) {
-
-            } finally {
-
+        AsyncStorage.getItem("currentBudgetPage").then((page) => {
+            if(page === "expenses" || page === "savings") {
+                setSelectedPage(page);
             }
-        }
+        }).catch((error) => {
+            console.log("Error fetching previous page from Async Storage:", error);
+        })
     }, []);
 
-    AsyncStorage.setItem
+    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(() => {
+        reFetch();
+    }, [selectedPage]);
 
     const handlePageSelection = (page: string) => {
         setSelectedPage(page);
+        AsyncStorage.setItem("currentBudgetPage", page);
     };
 
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
-            {isLoading && <LoadingSymbol/>}
-
-            <FlatList 
-            data={data} 
-            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
-            keyExtractor={item => item.category_guid}
-            ItemSeparatorComponent={() => {
-                return (<View style={styles.itemSeperatorStyle}/>);
-            }}
-            />
+            {isLoading ? (<LoadingSymbol/>) : (
+               <FlatList 
+                data={data} 
+                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
+                keyExtractor={item => item.category_guid}
+                ItemSeparatorComponent={() => {
+                    return (<View style={styles.itemSeperatorStyle}/>);
+                }}
+                /> 
+            )}
+            {/* <LoadingSymbol/> */}
         </SafeAreaView>
     );
 }

app/(tabs)/stats/index.tsx

@@ -37,7 +37,7 @@ export default function Page() {
         }}>Init Database</Text>
 
         <Text style={styles.text} onPress={() => {
-            addCategory("Test", "blue", "budget").then(() => {
+            addCategory("Expense Category", "green", "expense").then(() => {
                 const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []};
                 executeQuery(getCategoryQuery).then((result) => {
                     if("rows" in result[0]) {
@@ -46,6 +46,18 @@ export default function Page() {
                 })
                 console.log("Category added with success!");
             })
-        }}>Add Category</Text>
+        }}>Add new Category Expense</Text>
+
+        <Text style={styles.text} onPress={() => {
+            addCategory("Savings Category", "yellow", "saving").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>);
 }

hooks/useFetch.ts

@@ -8,6 +8,7 @@ const useFetch = (query: Query) => {
     const [data, setData] = useState<{[column: string]: any;}[]>([]);
 
     const reFetch = () => {
+
         setIsLoading(true);
         executeQuery(query).then((result) => {
             if("rows" in result[0]) {