some small work on the budget screen

app/(tabs)/budget/index.tsx

@@ -1,4 +1,8 @@
-import { SafeAreaView, StyleSheet, Switch, Text } from 'react-native';
+import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { SearchBar } from '../../../components';
+import CategoryItem from '../../../components/budget/categoryItem';
+import useFetch from '../../../hooks/useFetch';
 
 export default function Page() {
 
@@ -8,21 +12,27 @@ export default function Page() {
             justifyContent: 'center',
             alignItems: 'center',
         },
-        switch: {
-            transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }],
-        },
         text: {
             color: "red",
             fontSize: 40,
         }
     });
 
-    // const {data, isLoading, reFetch} = useFetch();
+    const {data, isLoading, reFetch} = useFetch();
 
     return (
-        <SafeAreaView>
+        <SafeAreaView style={styles.container}>
-            <Text style={styles.text}>Hallo wo bin ich?!</Text>
+            <Text style={styles.text}>Expense View</Text>
-            <Switch style={styles.switch}/>
+            <SearchBar placeholder='Nothing'></SearchBar>
+            
+            
+            <FlatList 
+            data={data} 
+            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>
+
+            </FlatList>
+
+            
         </SafeAreaView>
     );
 }

components/budget/categoryItem.tsx

@@ -0,0 +1,49 @@
+import { ColorValue, StyleSheet, View } from "react-native";
+import { useThemeColor } from "../../hooks/useThemeColor";
+import CustomCard from "../common/CustomCard";
+
+export type CategoryItemProps = {
+    category: string,
+    color: ColorValue,
+    allocated_account: number, 
+}
+
+const CategoryItem = (properties: CategoryItemProps) => {
+
+    const textColor = useThemeColor("primaryText");
+    const backgroundColor = useThemeColor("backgroundColor");
+
+    return (
+        <CustomCard>
+            < View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+
+
+
+            </View>
+
+
+            <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
+
+            </View>
+        </CustomCard>
+    );
+};
+
+export default CategoryItem;
+
+const styles = StyleSheet.create({
+    textSection: {
+        flexDirection: "column",
+        alignContent: "space-between",
+        alignItems:"flex-start",
+        paddingLeft: 10,
+        flex:1,
+        alignSelf: "stretch",
+        paddingVertical: 5
+      },
+      valueSection: {
+        justifyContent:"center",
+        borderTopRightRadius: 20,
+        borderBottomRightRadius: 20,
+      }
+});