Resolve "Add Category Modal"

app/(tabs)/budget/_layout.tsx

@@ -1,16 +1,10 @@
 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 initialRouteName="index" screenOptions={{headerShown: false}}>
             <Stack.Screen name="index"/>
-            <Stack.Screen 
-                name="addCategory" 
-                options={{presentation: "modal"}}/>
+            <Stack.Screen name="addCategory" options={{presentation: "modal"}}/>
         </Stack>
     );
 }

app/(tabs)/budget/addCategory.tsx

@@ -1,8 +1,86 @@
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
+import { CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
+import { useTheme } from "../../contexts/ThemeContext";
 
 const addCategory = () => {
+    const {colors} = useTheme();
+
+    const parameters = useLocalSearchParams();
+
+    const [categoryName, setCartegoryName] = useState<string>("Enter Category Name...");
+    const [categoryColor, setCartegoryColor] = useState<null|string>(null);
+    const [selectedType, setSelectedType] = useState<string>("expense");
+
     return (
-        <></>
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
+            <Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Category Editor</Text>
+            
+            <View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
+                <View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
+                    <TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
+                        setCartegoryName(newName);
+                    }}/>
+                </View>
+
+                <TypeSelectorSwitch 
+                currentSelected={selectedType}
+                handleButtonPress={(type) => {
+                    setSelectedType(type);
+                }}
+                />
+
+                <View>
+                   <CustomColorPicker currentColor={categoryColor} handleColorChange={(color) => {
+                        setCartegoryColor(color);
+                    }}/> 
+                </View>
+
+                <View style={styles.navigationButtonViewStyle}>
+                    <NavigationButton text="Back" onPress={() => {
+                        router.back();
+                    }}/>
+                    <NavigationButton text="Save" onPress={() => {
+                        console.log("Implement Saving here!");
+                        router.back();
+                    }}/> 
+                </View>
+            </View>
+        </SafeAreaView>
     );
 }
 
-export default addCategory;
+export default addCategory;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        flex: 1,
+        margin: 10,
+        borderRadius: 10,
+    },
+    safeAreaViewStyle: {
+        flex: 1,
+        flexDirection: "column" 
+    },
+    headingTextStyle: {
+        fontSize: 40,
+        fontWeight: "bold",
+        alignSelf: "center",
+        marginVertical: 10,
+    },
+    navigationButtonViewStyle: {
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: 10,
+    },
+    textInputViewStyle: {
+        borderRadius: 10,
+        paddingVertical: 10,
+        margin: 10,
+    },
+    textInputStyle: {
+        paddingHorizontal: 10,
+        fontSize: 25,
+    }
+});

app/(tabs)/budget/index.tsx

@@ -4,8 +4,7 @@ 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, Plus } from '../../../components';
-import CategoryItem from '../../../components/budget/categoryItem';
+import { BudgetHeader, CategoryItem, LoadingSymbol, Plus } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 import { useTheme } from '../../contexts/ThemeContext';
 
@@ -43,7 +42,7 @@ export default function Page() {
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
 
             <Plus onPress={() => {
-                router.push("/(tabs)/budget/addCategory")
+                router.push({pathname: '/(tabs)/budget/addCategory', params: { guid: '123'}}); //This needs to be changed to a regular push, without parameters
             }}/>
 
             {isLoading ? (<LoadingSymbol/>) : (