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,
+    }
+  })