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

app/expense/[expense].tsx

@@ -0,0 +1,137 @@
+import { View, Text, Alert, StyleSheet } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { router, useLocalSearchParams, useRouter } from 'expo-router'
+import useFetch from '../../hooks/useFetch';
+import { Category, Expense } from '../../types/dbItems';
+import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../components';
+import colors from '../../constants/colors';
+import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../services/database';
+import { SimpleDate } from '../../util/SimpleDate';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { SIZES } from '../../constants/theme';
+import { useTheme } from '../contexts/ThemeContext';
+
+export default function Page() {
+  const router = useRouter();
+  const {colors} = useTheme();
+  const {expense} = useLocalSearchParams();
+  const {data, isEmptyResult} = useFetch({sql: "SELECT e.guid as e_guid, e.name as e_name, e.datetime as e_datetime, e.amount as e_amount, c.guid as c_guid, c.name as c_name, c.color as c_color FROM expense e INNER JOIN category c on e.category_guid = c.guid WHERE e.guid = ?", args: [expense]});
+  const [selectedExpense, setSelectedExpense] = useState<Expense|undefined>();
+  const [selectedCategory, setSelectedCategory] = useState<Category|undefined>();
+  const [formatedValue, setFormatedValue] = useState<string>("");
+  const [initialValue, setInitialValue] = useState<number>();
+  const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
+  const [expenseName, setExpenseName] = useState<string>("");
+  const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  useEffect(()=>{
+    const entry = data[0];
+    console.log(entry)
+    if(entry){
+      console.log(entry)
+      const extractedExpense: Expense = {name: entry["e_name"], amount: entry["e_amount"], dateTime: entry["e_datetime"], guid: entry["e_guid"]}
+      const extractedCategory: Category = {name: entry["c_name"], color: entry["c_color"], guid: entry["c_guid"]}
+
+      console.log(extractedCategory.color)
+
+      setSelectedExpense(extractedExpense);
+      setSelectedCategory(extractedCategory);
+      setInitialValue(extractedExpense.amount)
+      setExpenseName(extractedExpense.name ?? "")
+      setSelectedDate(extractedExpense.dateTime? new Date(extractedExpense.dateTime) : new Date());
+    }
+
+
+  }, [data])
+
+  const handleValueChange = (formatedValue: string) => {
+    setFormatedValue(formatedValue);
+  }
+
+  const handleCategorySelect = (category : Category) => {
+    setSelecorModalVisible(false);
+    setSelectedCategory(category);
+  }
+
+  const validateInput = ():boolean => {
+    if(formatedValue == "" || expenseName == "" || selectedCategory === undefined || selectedDate === null){
+      return false;
+    }
+    return true;
+  }
+
+  const submit = () => {
+    console.log(selectedExpense?.guid)
+    const insert = async () => {
+      await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
+    }
+    if(validateInput()){
+      insert().then( () => router.back())
+    }else {
+      Alert.alert("Invalid input", "One of the Props is not properly defined")
+    }
+    
+  }
+
+  const handleDelete = () => {
+    const del = async () => {
+      await deleteExpense(selectedExpense!.guid!)
+      router.back();
+    }
+    del();
+  }
+
+  return (
+    <View style={styles.container}>
+      <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
+      <AutoDecimalInput onValueChange={handleValueChange} label='Amount' initialValue={initialValue}/>
+      <CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
+      <TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)} value={expenseName}/>
+      <DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>
+      {datePickerShown &&
+        <DateTimePicker 
+          value={new Date()}
+          maximumDate={new Date()}
+
+          onChange={(event, date)=>{
+            setDatePickerShown(false);
+            if(date){
+              setSelectedDate(date);
+            }
+          }}
+        />}
+        <RoundedButton color={colors.elementDefaultColor} style={{padding: 10, marginTop: 40}} onPress={handleDelete}>
+          <Text style={[styles.submitText, {color: colors.primaryText}]}>Delete Expense</Text>
+        </RoundedButton>
+        <RoundedButton color={colors.accentColor} style={styles.save} onPress={submit}>
+          <Text style={[styles.submitText, {color: colors.primaryText}]}>Save</Text>
+        </RoundedButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  notFound: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+
+  notFoundMessageContainer: {
+    backgroundColor: "#e37b7b",
+    padding: 50,
+  },
+  save: {
+    padding: 10,
+  },
+  container: {
+    margin: SIZES.normal,
+    display: "flex",
+    gap: 10
+  }, 
+ 
+  submitText: {
+    fontSize: SIZES.large
+  }
+  
+})

app/expense/_layout.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { Stack } from 'expo-router'
+import React from 'react'
+import { useTheme } from '../contexts/ThemeContext'
+
+const _layout = () => {
+  const {colors} = useTheme();
+  return (
+    <Stack
+    initialRouteName="new"
+      screenOptions={{
+      contentStyle: {
+        backgroundColor:colors.containerColor,
+      },
+      headerStyle: {
+        backgroundColor: colors.containerColor
+      },
+      headerTintColor: colors.primaryText
+
+    }}>
+      <Stack.Screen name='new'
+      options={{
+        title: "New Expense"
+      }}
+      />
+      <Stack.Screen name="[expense]"
+      options={{
+        headerBackButtonMenuEnabled: true,
+        headerBackVisible: true,
+        title: "edit Expense"
+      }}
+       getId={(params) => String(Date.now())}
+      />
+    </Stack>
+  )
+}
+
+export default _layout
+
+const styles = StyleSheet.create({})

app/expense/new.tsx

@@ -0,0 +1,94 @@
+import { View, Text, StyleSheet, Alert } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { SIZES } from '../../constants/theme'
+import { useTheme } from '../contexts/ThemeContext'
+import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../components'
+import { Category } from '../../types/dbItems'
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { addExpense } from '../../services/database'
+import { SimpleDate } from '../../util/SimpleDate'
+import { useRouter } from 'expo-router'
+
+export default function AddItem() {
+  const {colors} = useTheme();
+  const router = useRouter();
+
+  const [formatedValue, setFormatedValue] = useState<string>("");
+  const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
+  const [selectedCategory, setSelectedCategory] = useState<Category|undefined>()
+  const [expenseName, setExpenseName] = useState<string>("");
+  const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date())
+
+  const handleValueChange = (formatedValue: string) => {
+    setFormatedValue(formatedValue);
+  }
+
+  const handleCategorySelect = (category : Category) => {
+    setSelecorModalVisible(false);
+    setSelectedCategory(category);
+  }
+
+  const validateInput = ():boolean => {
+    if(formatedValue == "" || expenseName == "" || selectedCategory === undefined || selectedDate === null){
+      return false;
+    }
+    return true;
+  }
+
+  const submit = () => {
+    const insert = async () => {
+      await addExpense(expenseName, selectedCategory?.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
+    }
+    if(validateInput()){
+      insert().then(() => {
+        router.back();
+      })
+    }else {
+      Alert.alert("Invalid input", "One of the Props is not properly defined")
+    }
+    
+  }
+
+  return (
+    <View style={styles.container}>
+      <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
+      <AutoDecimalInput onValueChange={handleValueChange} label='Amount'/>
+      <CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
+      <TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)}/>
+      <DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>
+      {datePickerShown &&
+        <DateTimePicker 
+          value={new Date()}
+          maximumDate={new Date()}
+
+          onChange={(event, date)=>{
+            setDatePickerShown(false);
+            if(date){
+              setSelectedDate(date);
+            }
+          }}
+        />}
+        <RoundedButton color={colors.accentColor} style={styles.save} onPress={submit}>
+          <Text style={[styles.submitText, {color: colors.primaryText}]}>Save</Text>
+        </RoundedButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  save: {
+    marginTop: 40,
+    padding: 10,
+  },
+  container: {
+    margin: SIZES.normal,
+    display: "flex",
+    gap: 10
+  }, 
+ 
+  submitText: {
+    fontSize: SIZES.large
+  }
+  
+})