Resolve "Budget"

components/budget/budgetHeader.tsx

@@ -0,0 +1,84 @@
+import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
+import SearchBar from "../common/SearchBar";
+import { useTheme } from "../../app/contexts/ThemeContext";
+
+type BudgetHeaderProperties = {
+    selectedPage: string,
+    handlePageSelection: (page: string) => void,
+}
+
+type PageSelectorButtonProperties = {
+    isSelected: boolean,
+    onPress: () => void,
+    label: string,
+}
+
+const BudgetHeader = (properties: BudgetHeaderProperties) => {
+    const {colors} = useTheme();
+    const backgroundColor = colors.backgroundColor; 
+
+    return (<>
+        <View style={styles.containerStyle}>
+            <PageSelectorButton 
+                label="Expenses"
+                isSelected={properties.selectedPage === "expenses"}
+                onPress={() => {
+                    properties.handlePageSelection("expenses")
+                }}
+            />
+            <PageSelectorButton 
+                label="Savings"
+                isSelected={properties.selectedPage === "savings"}
+                onPress={() => {
+                    properties.handlePageSelection("savings");
+                }}
+            />
+        </View>
+        <SearchBar placeholder='Search...'></SearchBar>
+    </>);
+}
+
+const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
+    const {colors} = useTheme();
+
+    const primaryTextColor = colors.primaryText;
+    const secondaryTextColor = colors.secondaryText;
+    const elementSelectedColor = colors.elementSelectedColor;
+    const elementDefaultColor = colors.elementDefaultColor;
+    const accentColor = colors.accentColor;
+
+    return (
+        <TouchableHighlight
+            underlayColor={elementDefaultColor}
+            onPress={properties.onPress}
+            style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
+            <Text
+            style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
+                {properties.label}
+            </Text>
+
+        </TouchableHighlight>
+    );
+}
+
+export default BudgetHeader;
+
+const styles = StyleSheet.create({
+    headerContainerStyle: {
+        width: "50%",
+        borderRadius: 10,
+        marginHorizontal: 30,
+    },
+    headerTextStyle: {
+        fontSize: 30,
+        textAlign: "center",
+        textAlignVertical: "center",
+    },
+    containerStyle: {
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        marginHorizontal: 20,
+        marginBottom: 20,
+        marginTop: 10,
+    },
+});

components/budget/categoryItem.tsx

@@ -0,0 +1,56 @@
+import { ColorValue, StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../app/contexts/ThemeContext";
+import CustomCard from "../common/CustomCard";
+
+export type CategoryItemProps = {
+    category: string,
+    color: ColorValue,
+    allocated_amount: number,
+    total_expenses: number,
+    category_guid: string, 
+}
+
+const CategoryItem = (properties: CategoryItemProps) => {
+  
+    const { colors } = useTheme();
+
+    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
+
+    return (
+        <CustomCard> 
+            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
+            <View style={[styles.textViewStyle]}>
+                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
+                  {properties.category}
+                </Text>
+                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                  {subText}
+                </Text>
+            </View>
+        </CustomCard>
+    );
+};
+
+export default CategoryItem;
+
+const styles = StyleSheet.create({
+    colorTipStyle: {
+      width: 25,
+      borderTopLeftRadius: 10,
+      borderBottomLeftRadius: 10,
+    },
+    textViewStyle: {
+      flex: 2,
+      flexDirection: "column",
+      paddingVertical: 5,
+      paddingHorizontal: 10,
+      alignSelf: "stretch",
+    },
+    categoryNameStyle: {
+      fontSize: 30,
+      fontWeight: "bold",
+    },
+    subTextStyle: {
+      fontSize: 17.5,
+    }
+  })

components/common/CustomCard.tsx

@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "stretch",
     alignContent: "space-between",
-    borderRadius: 20,
+    borderRadius: 10,
     marginHorizontal: 10,
   },
   boxShadow: {},

components/home/Setting.tsx

@@ -1,7 +1,7 @@
-import { View, Text, StyleSheet, Switch, SwitchProps, useColorScheme, TouchableOpacityProps, TouchableOpacity } from 'react-native'
-import React from 'react'
-import { SIZES } from '../../../constants/theme'
-import { useTheme } from '../../../app/contexts/ThemeContext';
+import React from 'react';
+import { StyleSheet, Switch, SwitchProps, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import { SIZES } from '../../constants/theme';
 
 interface ToggleSettingProps extends SwitchProps {
   settingsTitle: string;

components/home/Welcome.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Image, Text, View, ViewProps } from 'react-native'
 import { TouchableOpacity } from 'react-native-gesture-handler'
-import { MARGINS, SIZES } from '../../../constants/theme'
-import { useTheme } from '../../../app/contexts/ThemeContext'
+import { MARGINS, SIZES } from '../../constants/theme'
+import { useTheme } from '../../app/contexts/ThemeContext'
 
 type WelcomeProps = ViewProps & {name: string, image : any, onPress: () => void | undefined}
 
@@ -28,13 +28,13 @@ function getTimeOfDay(date: Date) : string {
 
 
 export default function Welcome(props: WelcomeProps) {
-  const {colors} = useTheme()
+  const { colors } = useTheme();
+
   const date = new Date()
   const dateString = formatDate(date)
   const timeOfDay = getTimeOfDay(date)
   const onpress = props.onPress
 
-  const textcolor = colors.primaryText
 
   return (
     <View style={{
@@ -57,7 +57,7 @@ export default function Welcome(props: WelcomeProps) {
         </TouchableOpacity>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>{dateString}</Text>
       </View>
       <View style={{
@@ -65,7 +65,7 @@ export default function Welcome(props: WelcomeProps) {
       }}>
         <Text style={{
           fontSize: SIZES.xlarge,
-          color: textcolor
+          color: colors.primaryText
         }}>Good {timeOfDay}, {props.name}</Text>
         </View>
     </View>

components/home/expenseItem.tsx

@@ -1,39 +1,33 @@
 import React from 'react';
 import { ColorValue, StyleSheet, Text, View } from 'react-native';
-import { SIZES } from '../../../constants/theme';
-import { useTheme } from '../../../app/contexts/ThemeContext';
-import CustomCard from "../../common/CustomCard";
-import { SimpleDate } from '../../../util/SimpleDate';
+import { SIZES } from '../../constants/theme';
+import CustomCard from "../common/CustomCard";
+import { useTheme } from '../../app/contexts/ThemeContext';
 
-type ISOdateString = string
-
-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: ISOdateString, value : string}
+export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
-  const {colors} = useTheme()
-  const textColor = colors.primaryText
-  const backgroundColor = colors.containerColor
-  const date: SimpleDate = new SimpleDate(new Date(itemProps.date))
+  const { colors } = useTheme(); 
   return (
       <CustomCard>
         <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
-        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.normal,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.category}</Text>
           <Text style={{
             fontSize: SIZES.large,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.title}</Text>
           <Text style={{
             fontSize: SIZES.small,
-            color: textColor
-          }} numberOfLines={1}>{date.format("DD.MM.YYYY")}</Text>
+            color: colors.primaryText
+          }} numberOfLines={1}>{itemProps.date}</Text>
         </View>
-        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+        <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
           <Text style={{
             fontSize: SIZES.xxLarge,
-            color: textColor
+            color: colors.primaryText
           }} numberOfLines={1}>{itemProps.value}</Text>
         </View>
        

components/index.tsx

@@ -1,7 +1,7 @@
 //home
-import ExpenseItem from "./home/expenseItem/expenseItem"
-import Welcome from "./home/Welcome/Welcome"
-import { ToggleSetting, ButtonSetting } from "./home/userSettings/Setting"
+import { ButtonSetting, ToggleSetting } from "./home/Setting"
+import Welcome from "./home/Welcome"
+import ExpenseItem from "./home/expenseItem"
 
 //common
 import LoadingSymbol from "./common/loadingSymbol"
@@ -11,13 +11,12 @@ import CustomCard from "./common/CustomCard"
 
 
 //login
+import BudgetHeader from "./budget/budgetHeader"
 import Input from "./login/input"
 
 export {
-  ExpenseItem, Input,
+  BudgetHeader, ButtonSetting, CustomCard, ExpenseItem, Input,
   LoadingSymbol, Plus,
-  SearchBar, Welcome,
-  ToggleSetting, CustomCard,
-  ButtonSetting
+  SearchBar, ToggleSetting, Welcome
 }
 

components/login/input.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {View, Text, TextInput, StyleSheet} from 'react-native';
-import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
 import { TextInputEndEditingEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
+import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 
 interface InputProps {
   label? : string,