Merge branch 'dev'

# Conflicts:
#	ios/cally/Info.plist

components/pages/brain_dump/BrainDumpPage.tsx

@@ -1,12 +1,9 @@
-import { Dimensions, ScrollView } from "react-native";
+import {Dimensions, ScrollView, StyleSheet} from "react-native";
-import React, { useState } from "react";
+import React, {useState} from "react";
-import { View, Text, Button } from "react-native-ui-lib";
+import {Button, Text, TextField, View} from "react-native-ui-lib";
 import DumpList from "./DumpList";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
-import { TextField } from "react-native-ui-lib";
+import {Feather, MaterialIcons} from "@expo/vector-icons";
-import { StyleSheet } from "react-native";
-import { Feather, MaterialIcons } from "@expo/vector-icons";
-import { TextInput } from "react-native-gesture-handler";
 import AddBrainDump from "./AddBrainDump";
 import LinearGradient from "react-native-linear-gradient";
 
@@ -27,7 +24,7 @@ const BrainDumpPage = () => {
                             isWelcome={false}
                             children={
                                 <Text
-                  style={{ fontFamily: "Manrope_400Regular", fontSize: 14 }}
+                                    style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
                                 >
                                     Drop your notes on-the-go here, and{"\n"}organize them later.
                                 </Text>
@@ -45,7 +42,7 @@ const BrainDumpPage = () => {
                                             name="search"
                                             size={24}
                                             color="#9b9b9b"
-                      style={{ paddingRight: 10 }}
+                                            style={{paddingRight: 10}}
                                         />
                                     }
                                     style={{
@@ -55,29 +52,28 @@ const BrainDumpPage = () => {
                                     placeholder="Search notes..."
                                 />
                             </View>
-              <DumpList searchText={searchText} />
+                            <DumpList searchText={searchText}/>
                         </View>
                     </View>
                 </ScrollView>
             </View>
             <LinearGradient
-        colors={["#f2f2f2", "transparent"]}
+                colors={["#f9f8f700", "#f9f8f7"]}
-        start={{ x: 0.5, y: 1 }}
+                locations={[0,1]}
-        end={{ x: 0.5, y: 0 }}
                 style={{
                     position: "absolute",
                     bottom: 0,
-          height: 90,
+                    height: 120,
                     width: Dimensions.get("screen").width,
+                    justifyContent:'center',
+                    alignItems:"center"
                 }}
             >
                 <Button
                     style={{
                         height: 40,
                         position: "relative",
-            marginLeft: "auto",
+                        width: "90%",
-            width: 20,
-            right: 20,
                         bottom: -10,
                         borderRadius: 30,
                         backgroundColor: "#fd1775",
@@ -89,10 +85,10 @@ const BrainDumpPage = () => {
                     }}
                 >
                     <View row centerV centerH>
-            <MaterialIcons name="add" size={22} color={"white"} />
+                        <MaterialIcons name="add" size={22} color={"white"}/>
                         <Text
                             white
-              style={{ fontSize: 16, fontFamily: "Manrope_600SemiBold" }}
+                            style={{fontSize: 16, fontFamily: "Manrope_600SemiBold"}}
                         >
                             New
                         </Text>

components/pages/calendar/CalendarHeader.tsx

@@ -1,24 +1,17 @@
-import React, { memo } from "react";
+import React, {memo} from "react";
-import {
+import {Button, Picker, PickerModes, SegmentedControl, Text, View,} from "react-native-ui-lib";
-  Button,
+import {MaterialIcons} from "@expo/vector-icons";
-  Picker,
+import {modeMap, months} from "./constants";
-  PickerModes,
+import {StyleSheet} from "react-native";
-  SegmentedControl,
+import {useAtom} from "jotai";
-  Text,
+import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
-  View,
+import {isSameDay} from "date-fns";
-} from "react-native-ui-lib";
+import {useAuthContext} from "@/contexts/AuthContext";
-import { MaterialIcons } from "@expo/vector-icons";
-import { modeMap, months } from "./constants";
-import { StyleSheet } from "react-native";
-import { useAtom } from "jotai";
-import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
-import { isSameDay } from "date-fns";
-import { useAuthContext } from "@/contexts/AuthContext";
 
 export const CalendarHeader = memo(() => {
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
     const [mode, setMode] = useAtom(modeAtom);
-  const { profileData } = useAuthContext();
+    const {profileData} = useAuthContext();
 
     const handleSegmentChange = (index: number) => {
         const selectedMode = modeMap.get(index);
@@ -56,23 +49,23 @@ export const CalendarHeader = memo(() => {
             }}
         >
             <View row centerV gap-3>
-        <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
+                <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
                     {selectedDate.getFullYear()}
                 </Text>
                 <Picker
                     value={months[selectedDate.getMonth()]}
                     placeholder={"Select Month"}
-          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
+                    style={{fontFamily: "Manrope_500Medium", fontSize: 17, width: 85}}
                     mode={PickerModes.SINGLE}
                     onChange={(itemValue) => handleMonthChange(itemValue as string)}
-          trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+                    trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
                     topBarProps={{
                         title: selectedDate.getFullYear().toString(),
-            titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
+                        titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
                     }}
                 >
                     {months.map((month) => (
-            <Picker.Item key={month} label={month} value={month} />
+                        <Picker.Item key={month} label={month} value={month}/>
                     ))}
                 </Picker>
             </View>
@@ -83,13 +76,13 @@ export const CalendarHeader = memo(() => {
                         size={"xSmall"}
                         marginR-0
                         avoidInnerPadding
-            padding-7
                         style={{
-              borderRadius: 5,
+                            borderRadius: 50,
                             backgroundColor: "white",
                             borderWidth: 0.7,
                             borderColor: "#dadce0",
                             height: 30,
+                            paddingHorizontal: 10
                         }}
                         labelStyle={{
                             fontSize: 12,
@@ -101,15 +94,13 @@ export const CalendarHeader = memo(() => {
                         })}
                         onPress={() => {
                             setSelectedDate(new Date());
-              setMode("day");
-              console.log(profileData?.timeZone)
                         }}
                     />
                 )}
 
                 <View>
                     <SegmentedControl
-            segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
+                        segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
                         backgroundColor="#ececec"
                         inactiveColor="#919191"
                         activeBackgroundColor="#ea156c"

components/pages/calendar/EventCalendar.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
-import { Calendar } from "react-native-big-calendar";
+import {Calendar} from "react-native-big-calendar";
-import { ActivityIndicator, StyleSheet, View } from "react-native";
+import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
-import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import { useAtom, useSetAtom } from "jotai";
+import {useAtom, useSetAtom} from "jotai";
 import {
     editVisibleAtom,
     eventForEditAtom,
@@ -10,8 +10,9 @@ import {
     selectedDateAtom,
     selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
-import { useAuthContext } from "@/contexts/AuthContext";
+import {useAuthContext} from "@/contexts/AuthContext";
-import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import {CalendarEvent} from "@/components/pages/calendar/interfaces";
+import {Text} from "react-native-ui-lib";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -25,9 +26,9 @@ const getTotalMinutes = () => {
 };
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
-  ({ calendarHeight }) => {
+    ({calendarHeight}) => {
-    const { data: events, isLoading } = useGetEvents();
+        const {data: events, isLoading} = useGetEvents();
-    const { profileData } = useAuthContext();
+        const {profileData} = useAuthContext();
         const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
         const [mode, setMode] = useAtom(modeAtom);
 
@@ -38,6 +39,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const [isRendering, setIsRendering] = useState(true);
         const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
+        const todaysDate = new Date()
+
         useEffect(() => {
             if (events && mode) {
                 setIsRendering(true);
@@ -52,7 +55,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
             (event: CalendarEvent) => {
                 if (mode === "day" || mode === "week") {
                     setEditVisible(true);
-          console.log({ event });
+                    console.log({event});
                     setEventForEdit(event);
                 } else {
                     setMode("day");
@@ -82,7 +85,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         );
 
         const memoizedEventCellStyle = useCallback(
-      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
             []
         );
 
@@ -91,13 +94,88 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
             [profileData]
         );
 
-    const memoizedHeaderContentStyle = useMemo(
+        const isSameDate = useCallback((date1: Date, date2: Date) => {
-      () => (mode === "day" ? styles.dayModeHeader : {}),
+            return (
-      [mode]
+                date1.getDate() === date2.getDate() &&
+                date1.getMonth() === date2.getMonth() &&
+                date1.getFullYear() === date2.getFullYear()
             );
+        }, []);
+
+        const dayHeaderColor = useMemo(() => {
+            return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
+        }, [selectedDate, mode]);
+
+        const dateStyle = useMemo(() => {
+            if (mode === "week") return undefined
+            return isSameDate(todaysDate, selectedDate) && mode === "day"
+                ? styles.dayHeader
+                : styles.otherDayHeader;
+        }, [selectedDate, mode]);
+
+        const memoizedHeaderContentStyle = useMemo(() => {
+            if (mode === "day") {
+                return styles.dayModeHeader;
+            } else if (mode === "week") {
+                return styles.weekModeHeader;
+            } else if (mode === "month") {
+                return styles.monthModeHeader;
+            } else {
+                return {};
+            }
+        }, [mode]);
 
         const memoizedEvents = useMemo(() => events ?? [], [events]);
 
+        const renderCustomDateForMonth = (date: Date) => {
+            const circleStyle = useMemo<ViewStyle>(
+                () => ({
+                    position: "absolute",
+                    width: 30,
+                    height: 30,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: 15,
+                }),
+                []
+            );
+
+            const defaultStyle = useMemo<ViewStyle>(
+                () => ({
+                    ...circleStyle,
+                }),
+                [circleStyle]
+            );
+
+            const currentDateStyle = useMemo<ViewStyle>(
+                () => ({
+                    ...circleStyle,
+                    backgroundColor: "#4184f2",
+                }),
+                [circleStyle]
+            );
+
+            const renderDate = useCallback(
+                (date: Date) => {
+                    const isCurrentDate = isSameDate(todaysDate, date);
+                    const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
+
+                    return (
+                        <View style={{alignItems: "center"}}>
+                            <View style={appliedStyle}>
+                                <Text style={{color: isCurrentDate ? "white" : "black"}}>
+                                    {date.getDate()}
+                                </Text>
+                            </View>
+                        </View>
+                    );
+                },
+                [todaysDate, currentDateStyle, defaultStyle] // dependencies
+            );
+
+            return renderDate(date);
+        };
+
         useEffect(() => {
             setOffsetMinutes(getTotalMinutes());
         }, [events, mode]);
@@ -105,7 +183,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         if (isLoading || isRendering) {
             return (
                 <View style={styles.loadingContainer}>
-          <ActivityIndicator size="large" color="#0000ff" />
+                    <ActivityIndicator size="large" color="#0000ff"/>
                 </View>
             );
         }
@@ -121,12 +199,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                 onPressEvent={handlePressEvent}
                 weekStartsOn={memoizedWeekStartsOn}
                 height={calendarHeight}
-        activeDate={selectedDate}
+                activeDate={todaysDate}
                 date={selectedDate}
                 onPressCell={handlePressCell}
                 headerContentStyle={memoizedHeaderContentStyle}
                 onSwipeEnd={handleSwipeEnd}
                 scrollOffsetMinutes={offsetMinutes}
+                dayHeaderStyle={dateStyle}
+                dayHeaderHighlightColor={dayHeaderColor}
+                renderCustomDateForMonth={renderCustomDateForMonth}
+                showAdjacentMonths
             />
         );
     }
@@ -148,6 +230,8 @@ const styles = StyleSheet.create({
         right: 42,
         height: 13,
     },
+    weekModeHeader: {},
+    monthModeHeader: {},
     loadingContainer: {
         flex: 1,
         justifyContent: "center",
@@ -160,4 +244,12 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
+    otherDayHeader: {
+        backgroundColor: "transparent",
+        color: "#919191",
+        aspectRatio: 1,
+        borderRadius: 100,
+        alignItems: "center",
+        justifyContent: "center",
+    },
 });

components/pages/grocery/AddGroceryItem.tsx

@@ -1,30 +1,12 @@
-import { StyleSheet } from "react-native";
+import {StyleSheet} from "react-native";
-import React, { useState } from "react";
+import React from "react";
-import {
+import {Button, View,} from "react-native-ui-lib";
-  Button,
+import {useGroceryContext} from "@/contexts/GroceryContext";
-  Colors,
+import {FontAwesome6} from "@expo/vector-icons";
-  Dialog,
+
-  Drawer,
+const AddGroceryItem = () => {
-  Text,
+    const {setIsAddingGrocery} = useGroceryContext();
-  View,
-  PanningProvider,
-} from "react-native-ui-lib";
-import { useGroceryContext } from "@/contexts/GroceryContext";
-import { FontAwesome6 } from "@expo/vector-icons";
-interface AddGroceryItemProps {
-  visible: boolean;
-  onClose: () => void;
-}
-const AddGroceryItem = () => {
-  const { isAddingGrocery, setIsAddingGrocery } = useGroceryContext();
-  const [visible, setVisible] = useState<boolean>(false);
 
-  const handleShowDialog = () => {
-    setVisible(true);
-  };
-  const handleHideDialog = () => {
-    setVisible(false);
-  };
     return (
         <View
             row
@@ -43,7 +25,7 @@ const AddGroceryItem = () => {
                     backgroundColor="#fd1775"
                     label="Add item"
                     text70L
-          iconSource={() => <FontAwesome6 name="add" size={18} color="white" />}
+                    iconSource={() => <FontAwesome6 name="add" size={18} color="white"/>}
                     style={styles.finishShopBtn}
                     labelStyle={styles.addBtnLbl}
                     enableShadow
@@ -92,5 +74,5 @@ const styles = StyleSheet.create({
         flex: 1,
         marginHorizontal: 3,
     },
-  addBtnLbl: { fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5 },
+    addBtnLbl: {fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5},
 });

components/pages/grocery/EditGroceryItem.tsx

@@ -1,11 +1,11 @@
-import { Text, View } from "react-native-ui-lib";
+import {Text, TextField, TextFieldRef, View} from "react-native-ui-lib";
-import React, { useEffect, useRef, useState } from "react";
+import React, {useEffect, useRef} from "react";
-import { TextField, TextFieldRef } from "react-native-ui-lib";
+import {GroceryCategory, useGroceryContext} from "@/contexts/GroceryContext";
-import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
+import {Dropdown} from "react-native-element-dropdown";
-import { Dropdown } from "react-native-element-dropdown";
 import CloseXIcon from "@/assets/svgs/CloseXIcon";
-import { StyleSheet } from "react-native";
+import {StyleSheet} from "react-native";
 import DropdownIcon from "@/assets/svgs/DropdownIcon";
+import {AntDesign} from "@expo/vector-icons";
 
 interface IEditGrocery {
     id?: string;
@@ -14,12 +14,13 @@ interface IEditGrocery {
     setTitle: (value: string) => void;
     setCategory?: (category: GroceryCategory) => void;
     setSubmit?: (value: boolean) => void;
-  closeEdit?: (value: boolean) => void;
+    closeEdit?: () => void;
     handleEditSubmit?: Function;
 }
 
-const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
+
-  const { fuzzyMatchGroceryCategory } = useGroceryContext();
+const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
+    const {fuzzyMatchGroceryCategory} = useGroceryContext();
     const inputRef = useRef<TextFieldRef>(null);
 
     const groceryCategoryOptions = Object.values(GroceryCategory).map(
@@ -29,10 +30,29 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
         })
     );
 
+    const handleSubmit = () => {
+        inputRef?.current?.blur()
+        console.log("CALLLLLL")
+        if (editGrocery.setSubmit) {
+            editGrocery.setSubmit(true);
+        }
+        if (editGrocery.handleEditSubmit) {
+            editGrocery.handleEditSubmit({
+                id: editGrocery.id,
+                title: editGrocery.title,
+                category: editGrocery.category,
+            });
+        }
+        if (editGrocery.closeEdit) {
+            editGrocery.closeEdit();
+        }
+    }
+
     useEffect(() => {
         if (inputRef.current) {
-      inputRef.current.focus(); // Focus on the TextField
+            inputRef.current.focus();
         }
+
         console.log(editGrocery.category);
     }, []);
 
@@ -50,47 +70,49 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
             <View row spread centerV>
                 <TextField
                     text70T
-          style={{}}
                     ref={inputRef}
                     placeholder="Grocery"
                     value={editGrocery.title}
+                    onSubmitEditing={handleSubmit}
+                    numberOfLines={1}
+                    returnKeyType="done"
                     onChangeText={(value) => {
                         editGrocery.setTitle(value);
-          }}
+                        let groceryCategory = fuzzyMatchGroceryCategory(value);
-          onSubmitEditing={() => {
+                        if (editGrocery.setCategory) {
-            if (editGrocery.setSubmit) {
+                            editGrocery.setCategory(groceryCategory);
-              editGrocery.setSubmit(true);
-            }
-            if (editGrocery.handleEditSubmit) {
-              editGrocery.handleEditSubmit({
-                id: editGrocery.id,
-                title: editGrocery.title,
-                category: editGrocery.category,
-              });
-            }
-            if (editGrocery.closeEdit) {
-              editGrocery.closeEdit(false);
                         }
                     }}
                     maxLength={25}
                 />
+                <View row centerV>
+                    <AntDesign
+                        name="check"
+                        size={24}
+                        style={{
+                            color: "green",
+                            marginRight: 15,
+                        }}
+                        onPress={handleSubmit}
+                    />
                     <CloseXIcon
                         onPress={() => {
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+                            if (editGrocery.closeEdit) {
+                                editGrocery.closeEdit();
+                            }
                         }}
                     />
                 </View>
+            </View>
             <Dropdown
                 style={{marginTop: 15}}
                 data={groceryCategoryOptions}
                 placeholder="Select grocery category"
-        placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
+                placeholderStyle={{color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2}}
                 labelField="label"
                 valueField="value"
                 value={
-          editGrocery.category == GroceryCategory.None
+                    editGrocery.category
-            ? null
-            : editGrocery.category
                 }
                 iconColor="white"
                 activeColor={"#fd1775"}
@@ -99,7 +121,8 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
                 itemContainerStyle={styles.itemStyle}
                 selectedTextStyle={styles.selectedText}
                 renderLeftIcon={() => (
-          <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
+                    <DropdownIcon style={{marginRight: 8}}
+                                  color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"}/>
                 )}
                 renderItem={(item) => {
                     return (
@@ -114,8 +137,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
                             id: editGrocery.id,
                             category: item.value,
                         });
-            console.log("kategorija vo diropdown: " + item.value);
+                        if (editGrocery.closeEdit) editGrocery.closeEdit();
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
                     } else {
                         if (editGrocery.setCategory) {
                             editGrocery.setCategory(item.value);
@@ -138,8 +160,8 @@ const styles = StyleSheet.create({
         fontSize: 13.2,
         color: "#fd1775",
     },
-  dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 },
+    dropdownStyle: {borderRadius: 6.61, height: 115.34, width: 187},
-  itemStyle: { padding: 0, margin: 0 },
+    itemStyle: {padding: 0, margin: 0},
 });
 
 export default EditGroceryItem;

components/pages/grocery/GroceryItem.tsx

@@ -23,12 +23,14 @@ const GroceryItem = ({
 
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
-  const [newTitle, setNewTitle] = useState<string>("");
+  const [newTitle, setNewTitle] = useState<string>(item.title ?? "");
-  const [category, setCategory] = useState<GroceryCategory>(
+  const [category, setCategory] = useState<GroceryCategory>(item.category ?? GroceryCategory.None);
-    GroceryCategory.None
-  );
   const [itemCreator, setItemCreator] = useState<UserProfile>(null);
 
+  const closeEdit = () => {
+    setIsEditingTitle(false);
+  }
+
   const handleTitleChange = (newTitle: string) => {
     updateGroceryItem({ id: item?.id, title: newTitle });
   };
@@ -38,7 +40,6 @@ const GroceryItem = ({
   };
 
   useEffect(() => {
-    setNewTitle(item.title);
     console.log(item);
     getItemCreator(item?.creatorId);
   }, []);
@@ -81,9 +82,21 @@ const GroceryItem = ({
             setOpenFreqEdit(false);
           }}
         />
-        {!isEditingTitle ? (
+        {isEditingTitle ?
+            <EditGroceryItem
+              editGrocery={{
+                id: item.id,
+                title: newTitle,
+                category: category,
+                setTitle: setNewTitle,
+                setCategory: setCategory,
+                closeEdit: closeEdit,
+                handleEditSubmit: updateGroceryItem,
+              }}
+            /> :
             <View>
-            { isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
+              {isParent ?
+                <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
                   <Text text70T black style={styles.title}>
                     {item.title}
                   </Text>
@@ -93,40 +106,27 @@ const GroceryItem = ({
                 </Text>
               }
             </View>
-        ) : (
+        }
-          <EditGroceryItem
-            editGrocery={{
-              id: item.id,
-              title: newTitle,
-              category: item.category,
-              setTitle: setNewTitle,
-              setCategory: setCategory,
-              closeEdit: setIsEditingTitle,
-              handleEditSubmit: updateGroceryItem,
-            }}
-          />
-        )}
         {!item.approved ? (
           <View row centerV marginB-10>
-            {isParent && <><AntDesign
+            {isParent &&
+                <>
+                  <AntDesign
                     name="check"
                     size={24}
                     style={{
                       color: "green",
                       marginRight: 15,
                     }}
-                onPress={() => {
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
-                  isParent ? handleItemApproved(item.id, { approved: true }) : null
-                }}
                   />
                   <AntDesign
                     name="close"
                     size={24}
                     style={{ color: "red" }}
-              onPress={() => {
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: false }) : null}
-              isParent ? handleItemApproved(item.id, { approved: false }) : null
+                  />
-            }}
+                </>}
-              /> </>}
           </View>
         ) : (
           !isEditingTitle && (
@@ -158,7 +158,8 @@ const GroceryItem = ({
                   borderRadius: 22,
                   overflow: "hidden",
                 }}
-            /> : <View
+            /> :
+              <View
                 style={{
                   position: "relative",
                   width: 24.64,
@@ -183,7 +184,7 @@ const GroceryItem = ({
                     fontWeight: "bold",
                   }}
                 >
-                  {getInitials(itemCreator.firstName, itemCreator.lastName ?? "")}
+                  {itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""}
                 </Text>
               </View>
             </View>}

components/pages/grocery/GroceryList.tsx

@@ -1,17 +1,13 @@
-import { FlatList, StyleSheet } from "react-native";
+import {FlatList, StyleSheet} from "react-native";
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { Button, Text, TouchableOpacity, View } from "react-native-ui-lib";
+import {Text, TouchableOpacity, View} from "react-native-ui-lib";
 import GroceryItem from "./GroceryItem";
-import {
+import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
-  GroceryCategory,
-  GroceryFrequency,
-  useGroceryContext,
-} from "@/contexts/GroceryContext";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
-import { AntDesign, MaterialIcons } from "@expo/vector-icons";
+import {AntDesign} from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
-import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
-import { IGrocery } from "@/hooks/firebase/types/groceryData";
+import {IGrocery} from "@/hooks/firebase/types/groceryData";
 import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 
 const GroceryList = () => {
@@ -22,12 +18,12 @@ const GroceryList = () => {
         setIsAddingGrocery,
         addGrocery,
     } = useGroceryContext();
-  const { profileData } = useAuthContext();
+    const {profileData} = useAuthContext();
     const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
-    groceries?.filter((item) => item.approved === true)
+        groceries?.filter((item) => item.approved)
     );
     const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
-    groceries?.filter((item) => item.approved !== true)
+        groceries?.filter((item) => !item.approved)
     );
     const [category, setCategory] = useState<GroceryCategory>(
         GroceryCategory.None
@@ -73,12 +69,8 @@ const GroceryList = () => {
     }, [submit]);
 
     useEffect(() => {
-    /**/
+        setapprovedGroceries(groceries?.filter((item) => item.approved));
-  }, [category]);
+        setPendingGroceries(groceries?.filter((item) => !item.approved));
-
-  useEffect(() => {
-    setapprovedGroceries(groceries?.filter((item) => item.approved === true));
-    setPendingGroceries(groceries?.filter((item) => item.approved !== true));
     }, [groceries]);
 
     return (
@@ -94,7 +86,7 @@ const GroceryList = () => {
                         paddingV-8
                         marginR-5
                         centerV
-            style={{ borderRadius: 50 }}
+                        style={{borderRadius: 50}}
                     >
                         <Text text70BL color="#46a80a" style={styles.counterText}>
                             {approvedGroceries?.length} list{" "}
@@ -114,7 +106,7 @@ const GroceryList = () => {
                         padding-8
                         paddingH-12
                         marginR-15
-            style={{ borderRadius: 50 }}
+                        style={{borderRadius: 50}}
                     >
                         <Text text70 style={styles.counterText} color="#e28800">
                             {pendingGroceries?.length} pending
@@ -171,11 +163,11 @@ const GroceryList = () => {
                 ? pendingVisible && (
                 <FlatList
                     data={pendingGroceries}
-              renderItem={({ item }) => (
+                    renderItem={({item}) => (
                         <GroceryItem
                             item={item}
                             handleItemApproved={(id, changes) =>
-                    updateGroceryItem({ ...changes, id: id })
+                                updateGroceryItem({...changes, id: id})
                             }
                         />
                     )}
@@ -228,6 +220,7 @@ const GroceryList = () => {
                 </View>
             </View>
             {isAddingGrocery && (
+                <View style={{marginTop: 8}}>
                     <EditGroceryItem
                         editGrocery={{
                             title: title,
@@ -235,8 +228,10 @@ const GroceryList = () => {
                             category: category,
                             setTitle: setTitle,
                             setSubmit: setSubmitted,
+                            closeEdit: () => setIsAddingGrocery(false)
                         }}
                     />
+                </View>
             )}
 
             {/* Render Approved Groceries Grouped by Category */}
@@ -244,10 +239,10 @@ const GroceryList = () => {
                 ? approvedVisible && (
                 <FlatList
                     data={Object.keys(approvedGroceriesByCategory)}
-              renderItem={({ item: category }) => (
+                    renderItem={({item: category}) => (
                         <View key={category}>
                             {/* Render Category Header */}
-                  <Text text80M style={{ marginTop: 10 }} color="#666">
+                            <Text text80M style={{marginTop: 10}} color="#666">
                                 {category}
                             </Text>
                             {/* Render Grocery Items for this Category */}
@@ -257,7 +252,7 @@ const GroceryList = () => {
                                         key={grocery.id}
                                         item={grocery}
                                         handleItemApproved={(id, changes) =>
-                          updateGroceryItem({ ...changes, id: id })
+                                            updateGroceryItem({...changes, id: id})
                                         }
                                     />
                                 )

components/pages/grocery/GroceryWrapper.tsx

@@ -1,12 +1,12 @@
-import { Text, ScrollView } from "react-native";
+import {ScrollView} from "react-native";
-import { View } from "react-native-ui-lib";
+import {View} from "react-native-ui-lib";
-import React, { useEffect, useRef } from "react";
+import React, {useEffect, useRef} from "react";
 import AddGroceryItem from "./AddGroceryItem";
 import GroceryList from "./GroceryList";
-import { useGroceryContext } from "@/contexts/GroceryContext";
+import {useGroceryContext} from "@/contexts/GroceryContext";
 
 const GroceryWrapper = () => {
-  const { isAddingGrocery } = useGroceryContext();
+    const {isAddingGrocery} = useGroceryContext();
     const scrollViewRef = useRef<ScrollView>(null); // Reference to the ScrollView
 
     useEffect(() => {
@@ -22,14 +22,14 @@ const GroceryWrapper = () => {
         <View height={"100%"} paddingT-15 paddingH-15>
             <View height={"100%"}>
                 <ScrollView
-          ref={scrollViewRef} // Assign the ref to the ScrollView
+                    ref={scrollViewRef}
                     automaticallyAdjustKeyboardInsets={true}
                 >
                     <View marginB-70>
-            <GroceryList />
+                        <GroceryList/>
                     </View>
                 </ScrollView>
-      {!isAddingGrocery && <AddGroceryItem />}
+                {!isAddingGrocery && <AddGroceryItem/>}
             </View>
         </View>
     );

components/pages/main/SignInPage.tsx

@@ -1,59 +1,72 @@
-import {Button, ButtonSize, Dialog, Text, TextField, View} from "react-native-ui-lib";
+import {
-import React, {useState} from "react";
+  Button,
-import {useSignIn} from "@/hooks/firebase/useSignIn";
+  ButtonSize,
-import {StyleSheet} from "react-native";
+  Dialog,
-import Toast from 'react-native-toast-message';
+  Text,
-import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
+  TextField,
-import {Camera, CameraView} from 'expo-camera';
+  TextFieldRef,
+  View,
+} from "react-native-ui-lib";
+import React, { useRef, useState } from "react";
+import { useSignIn } from "@/hooks/firebase/useSignIn";
+import { StyleSheet } from "react-native";
+import Toast from "react-native-toast-message";
+import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
+import { Camera, CameraView } from "expo-camera";
 
-const SignInPage = ({setTab}: {
+const SignInPage = ({
-    setTab: React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">>
+  setTab,
+}: {
+  setTab: React.Dispatch<
+    React.SetStateAction<"register" | "login" | "reset-password">
+  >;
 }) => {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [hasPermission, setHasPermission] = useState<boolean | null>(null);
   const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
+  const passwordRef = useRef<TextFieldRef>(null);
 
-    const {mutateAsync: signIn, error, isError} = useSignIn();
+  const { mutateAsync: signIn, error, isError } = useSignIn();
-    const {mutateAsync: signInWithQrCode} = useLoginWithQrCode()
+  const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();
 
   const handleSignIn = async () => {
-        await signIn({email, password});
+    await signIn({ email, password });
     if (!isError) {
       Toast.show({
         type: "success",
-                text1: "Login successful!"
+        text1: "Login successful!",
       });
     } else {
       Toast.show({
         type: "error",
         text1: "Error logging in",
-                text2: `${error}`
+        text2: `${error}`,
       });
     }
   };
 
-    const handleQrCodeScanned = async ({data}: { data: string }) => {
+  const handleQrCodeScanned = async ({ data }: { data: string }) => {
     setShowCameraDialog(false);
     try {
-            await signInWithQrCode({userId: data});
+      await signInWithQrCode({ userId: data });
       Toast.show({
         type: "success",
-                text1: "Login successful with QR code!"
+        text1: "Login successful with QR code!",
       });
     } catch (err) {
       Toast.show({
         type: "error",
         text1: "Error logging in with QR code",
-                text2: `${err}`
+        text2: `${err}`,
       });
     }
   };
 
   const getCameraPermissions = async (callback: () => void) => {
-        const {status} = await Camera.requestCameraPermissionsAsync();
+    const { status } = await Camera.requestCameraPermissionsAsync();
-        setHasPermission(status === 'granted');
+    setHasPermission(status === "granted");
-        if (status === 'granted') {
+    if (status === "granted") {
       callback();
     }
   };
@@ -63,10 +76,16 @@ const SignInPage = ({setTab}: {
       <TextField
         placeholder="Email"
         value={email}
+        
         onChangeText={setEmail}
         style={styles.textfield}
+        onSubmitEditing={() => {
+          // Move focus to the description field
+          passwordRef.current?.focus();
+        }}
       />
       <TextField
+      ref={passwordRef}
         placeholder="Password"
         value={password}
         onChangeText={setPassword}
@@ -74,29 +93,43 @@ const SignInPage = ({setTab}: {
         style={styles.textfield}
       />
       <Button
-                label="Login"
+        label="Log in"
+        marginT-50
+        labelStyle={{
+          fontFamily: "PlusJakartaSans_600SemiBold",
+          fontSize: 16,
+        }}
         onPress={handleSignIn}
-                style={{marginBottom: 20}}
+        style={{ marginBottom: 20, height: 50 }}
         backgroundColor="#fd1775"
       />
       <Button
-                label="Login with a QR Code"
+        label="Log in with a QR Code"
+        labelStyle={{
+          fontFamily: "PlusJakartaSans_600SemiBold",
+          fontSize: 16,
+        }}
         onPress={() => {
           getCameraPermissions(() => setShowCameraDialog(true));
-                }
+        }}
-                }
+        style={{ marginBottom: 20, height: 50 }}
-                style={{marginBottom: 20}}
         backgroundColor="#fd1775"
       />
-            {isError && <Text center style={{marginBottom: 20}}>{`${error?.toString()?.split("]")?.[1]}`}</Text>}
+      {isError && (
+        <Text center style={{ marginBottom: 20 }}>{`${
+          error?.toString()?.split("]")?.[1]
+        }`}</Text>
+      )}
 
       <View row centerH marginB-5 gap-5>
-                <Text text70>
+        <Text style={styles.jakartaLight}>Don't have an account?</Text>
-                    Don't have an account?
-                </Text>
         <Button
           onPress={() => setTab("register")}
           label="Sign Up"
+          labelStyle={[
+            styles.jakartaMedium,
+            { textDecorationLine: "none", color: "#fd1575" },
+          ]}
           link
           size={ButtonSize.xSmall}
           padding-0
@@ -108,18 +141,21 @@ const SignInPage = ({setTab}: {
       </View>
 
       <View row centerH marginB-5 gap-5>
-                <Text text70>
+        <Text text70>Forgot your password?</Text>
-                    Forgot your password?
-                </Text>
         <Button
           onPress={() => setTab("reset-password")}
           label="Reset password"
+          labelStyle={[
+            styles.jakartaMedium,
+            { textDecorationLine: "none", color: "#fd1575" },
+          ]}
           link
           size={ButtonSize.xSmall}
           padding-0
           margin-0
           text70
           left
+          avoidInnerPadding
           color="#fd1775"
         />
       </View>
@@ -131,7 +167,7 @@ const SignInPage = ({setTab}: {
         bottom
         width="100%"
         height="70%"
-                containerStyle={{padding: 0}}
+        containerStyle={{ padding: 0 }}
       >
         {hasPermission === null ? (
           <Text>Requesting camera permissions...</Text>
@@ -139,7 +175,7 @@ const SignInPage = ({setTab}: {
           <Text>No access to camera</Text>
         ) : (
           <CameraView
-                        style={{flex: 1}}
+            style={{ flex: 1 }}
             onBarcodeScanned={handleQrCodeScanned}
             barcodeScannerSettings={{
               barcodeTypes: ["qr"],
@@ -150,7 +186,7 @@ const SignInPage = ({setTab}: {
           label="Cancel"
           onPress={() => setShowCameraDialog(false)}
           backgroundColor="#fd1775"
-                    style={{margin: 10}}
+          style={{ margin: 10 }}
         />
       </Dialog>
     </View>
@@ -164,6 +200,18 @@ const styles = StyleSheet.create({
     padding: 30,
     height: 45,
     borderRadius: 50,
+    fontFamily: "PlusJakartaSans_300Light",
+  },
+  jakartaLight: {
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 16,
+    color: "#484848",
+  },
+  jakartaMedium: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 16,
+    color: "#919191",
+    textDecorationLine: "underline",
   },
 });
 

components/pages/main/SignUpPage.tsx

@@ -11,7 +11,7 @@ import {
 } from "react-native-ui-lib";
 import { useSignUp } from "@/hooks/firebase/useSignUp";
 import { ProfileType } from "@/contexts/AuthContext";
-import { StyleSheet } from "react-native";
+import { Dimensions, StyleSheet } from "react-native";
 import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = ({
@@ -40,19 +40,21 @@ const SignUpPage = ({
   };
 
   return (
-    <View padding-10 height={"100%"} flexG>
+    <View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
-      <Text text30 center>
+      <Text style={styles.title}>Get started with Cally</Text>
-        Get started with Cally
+      <Text style={styles.subtitle} marginT-15 color="#919191">
+        Please enter your details.
       </Text>
-      <Text center>Please enter your details.</Text>
       <TextField
-        marginT-60
+        marginT-30
         autoFocus
         placeholder="First name"
         value={firstName}
         onChangeText={setFirstName}
         style={styles.textfield}
-        onSubmitEditing={() => {lnameRef.current?.focus()}}
+        onSubmitEditing={() => {
+          lnameRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -61,7 +63,9 @@ const SignUpPage = ({
         value={lastName}
         onChangeText={setLastName}
         style={styles.textfield}
-        onSubmitEditing={() => {emailRef.current?.focus()}}
+        onSubmitEditing={() => {
+          emailRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
       <TextField
@@ -70,16 +74,22 @@ const SignUpPage = ({
         value={email}
         onChangeText={setEmail}
         style={styles.textfield}
-        onSubmitEditing={() => {passwordRef.current?.focus()}}
+        onSubmitEditing={() => {
+          passwordRef.current?.focus();
+        }}
         blurOnSubmit={false}
       />
+      <View
+        centerV
+        style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
+      >
         <TextField
           ref={passwordRef}
           placeholder="Password"
+          style={styles.jakartaLight}
           value={password}
           onChangeText={setPassword}
           secureTextEntry={!isPasswordVisible}
-        style={styles.textfield}
           trailingAccessory={
             <TouchableOpacity
               onPress={() => setIsPasswordVisible(!isPasswordVisible)}
@@ -92,36 +102,41 @@ const SignUpPage = ({
             </TouchableOpacity>
           }
         />
-      <View gap-10 marginH-10>
+      </View>
+      <View gap-5 marginT-15>
         <View row centerV>
           <Checkbox
+            style={[styles.check]}
+            color="#919191"
             value={allowFaceID}
             onValueChange={(value) => {
               setAllowFaceID(value);
             }}
           />
-          <Text text90R marginL-10>
+          <Text style={styles.jakartaLight} marginL-10>
             Allow FaceID for login in future
           </Text>
         </View>
         <View row centerV>
           <Checkbox
+            style={styles.check}
+            color="#919191"
             value={acceptTerms}
             onValueChange={(value) => setAcceptTerms(value)}
           />
           <View row>
-            <Text text90R marginL-10>
+            <Text style={styles.jakartaLight} marginL-10>
               I accept the
             </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 terms and conditions
               </Text>
             </TouchableOpacity>
-            <Text text90R> and </Text>
+            <Text style={styles.jakartaLight}> and </Text>
             <TouchableOpacity>
-              <Text text90 style={{ textDecorationLine: "underline" }}>
+              <Text text90 style={styles.jakartaMedium}>
                 {" "}
                 privacy policy
               </Text>
@@ -132,16 +147,24 @@ const SignUpPage = ({
       <View style={styles.bottomView}>
         <Button
           label="Register"
+          labelStyle={{
+            fontFamily: "PlusJakartaSans_600SemiBold",
+            fontSize: 16,
+          }}
           onPress={handleSignUp}
-          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+          style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
         />
-        <View row centerH marginT-10 marginB-5 gap-5>
+        <View row centerH marginT-10 marginB-2 gap-5>
-          <Text text70 center>
+          <Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
             Already have an account?
           </Text>
 
           <Button
-            label="Sign In"
+            label="Log in"
+            labelStyle={[
+              styles.jakartaMedium,
+              { fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
+            ]}
             flexS
             margin-0
             link
@@ -161,11 +184,35 @@ export default SignUpPage;
 const styles = StyleSheet.create({
   textfield: {
     backgroundColor: "white",
-    marginVertical: 10,
+    marginVertical: 8,
     padding: 30,
-    height: 45,
+    height: 44,
     borderRadius: 50,
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
   },
   //mora da se izmeni kako treba
-  bottomView: { marginTop: 150 },
+  bottomView: { marginTop: "auto", marginBottom: 30 },
+  jakartaLight: {
+    fontFamily: "PlusJakartaSans_300Light",
+    fontSize: 13,
+    color: "#919191",
+  },
+  jakartaMedium: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+    color: "#919191",
+    textDecorationLine: "underline",
+  },
+  title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 },
+  subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 },
+  check: {
+    borderRadius: 3,
+    aspectRatio: 1,
+    width: 18,
+    color: "#919191",
+    borderColor: "#919191",
+    borderWidth: 1,
+  },
 });

components/pages/todos/AddChoreDialog.tsx

@@ -1,23 +1,27 @@
-import { View, Text, Button, Switch, PickerModes } from "react-native-ui-lib";
-import React, { useRef, useState } from "react";
-import PointsSlider from "@/components/shared/PointsSlider";
-import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
-import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
 import {
-  Dialog,
+    Button,
-  TextField,
-  DateTimePicker,
-  Picker,
     ButtonSize,
+    DateTimePicker,
+    Dialog,
+    Picker,
+    PickerModes,
+    Switch,
+    Text,
+    TextField,
+    TextFieldRef,
+    View
 } from "react-native-ui-lib";
-import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+import React, {useEffect, useRef, useState} from "react";
-import { Dimensions, StyleSheet } from "react-native";
+import PointsSlider from "@/components/shared/PointsSlider";
+import {repeatOptions, useToDosContext} from "@/contexts/ToDosContext";
+import {Ionicons} from "@expo/vector-icons";
+import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
+import {Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { IToDo } from "@/hooks/firebase/types/todoData";
+import {IToDo} from "@/hooks/firebase/types/todoData";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
-import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 import CalendarIcon from "@/assets/svgs/CalendarIcon";
-import ClockIcon from "@/assets/svgs/ClockIcon";
 import ClockOIcon from "@/assets/svgs/ClockOIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import RepeatFreq from "./RepeatFreq";
@@ -40,17 +44,19 @@ const defaultTodo = {
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
-  const { addToDo, updateToDo } = useToDosContext();
+    const {addToDo, updateToDo} = useToDosContext();
     const [todo, setTodo] = useState<IToDo>(
         addChoreDialogProps.selectedTodo ?? defaultTodo
     );
     const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
         addChoreDialogProps?.selectedTodo?.assignees ?? []
     );
-  const { width, height } = Dimensions.get("screen");
+    const {width} = Dimensions.get("screen");
     const [points, setPoints] = useState<number>(todo.points);
 
-  const { data: members } = useGetFamilyMembers();
+    const titleRef = useRef<TextFieldRef>(null)
+
+    const {data: members} = useGetFamilyMembers();
 
     const handleClose = () => {
         setTodo(defaultTodo);
@@ -87,6 +93,12 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         }
     }
 
+    useEffect(() => {
+        setTimeout(() => {
+            titleRef?.current?.focus()
+        }, 500)
+    }, []);
+
     return (
         <Dialog
             bottom={true}
@@ -148,24 +160,25 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                     }}
                 />
             </View>
+            <KeyboardAvoidingView>
                 <TextField
                     placeholder="Add a To Do"
-        autoFocus
                     value={todo?.title}
                     onChangeText={(text) => {
-          setTodo((oldValue: IToDo) => ({ ...oldValue, title: text }));
+                        setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
                     }}
                     placeholderTextColor="#2d2d30"
                     text60R
                     marginT-15
                     marginL-30
+                    ref={titleRef}
                 />
-      <View style={styles.divider} marginT-8 />
+                <View style={styles.divider} marginT-8/>
                 <View marginL-30 centerV>
                     <View row marginB-10>
                         {todo?.date && (
                             <View row centerV>
-              <CalendarIcon color="#919191" width={24} height={24} />
+                                <CalendarIcon color="#919191" width={24} height={24}/>
                                 <DateTimePicker
                                     value={todo.date}
                                     text70
@@ -175,14 +188,14 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                                     }}
                                     marginL-12
                                     onChange={(date) => {
-                  setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
+                                        setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
                                     }}
                                 />
                             </View>
                         )}
                     </View>
                     <View row centerV>
-          <ClockOIcon />
+                        <ClockOIcon/>
                         <Picker
                             marginL-12
                             placeholder="Select Repeat Type"
@@ -204,7 +217,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                                     }
                                 }
                             }}
-            topBarProps={{ title: "Repeat" }}
+                            topBarProps={{title: "Repeat"}}
                             style={{
                                 marginVertical: 5,
                                 fontFamily: "PlusJakartaSans_500Medium",
@@ -220,30 +233,31 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                             ))}
                         </Picker>
                     </View>
-        {todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={todo.repeatDays ?? []}/>}
+                    {todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
+                                                                    repeatDays={todo.repeatDays ?? []}/>}
                 </View>
-      <View style={styles.divider} />
+                <View style={styles.divider}/>
 
                 <View marginH-30 marginB-10 row centerV>
-        <ProfileIcon color="#919191" />
+                    <ProfileIcon color="#919191"/>
                     <Text style={styles.sub} marginL-10>
                         Assignees
                     </Text>
-        <View flex-1 />
+                    <View flex-1/>
                     <Picker
                         marginL-8
                         value={selectedAssignees}
                         onChange={(value) => {
                             setSelectedAssignees([...selectedAssignees, ...value]);
                         }}
-          style={{ marginVertical: 5 }}
+                        style={{marginVertical: 5}}
                         mode={PickerModes.MULTI}
                         renderInput={() => (
                             <Button
                                 size={ButtonSize.small}
                                 paddingH-8
                                 iconSource={() => (
-                <Ionicons name="add-outline" size={20} color="#ea156c" />
+                                    <Ionicons name="add-outline" size={20} color="#ea156c"/>
                                 )}
                                 style={{
                                     marginLeft: "auto",
@@ -254,7 +268,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                                 }}
                                 color="#ea156c"
                                 label="Assign"
-              labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
+                                labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                             />
                         )}
                     >
@@ -274,22 +288,22 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                     />
                 </View>
                 <View row centerV style={styles.rotateSwitch}>
-        <Text style={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 16 }}>
+                    <Text style={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 16}}>
                         Take Turns
                     </Text>
                     <Switch
                         onColor={"#ea156c"}
                         value={todo.rotate}
-          style={{ width: 43.06, height: 27.13 }}
+                        style={{width: 43.06, height: 27.13}}
                         marginL-10
                         onValueChange={(value) =>
-            setTodo((oldValue) => ({ ...oldValue, rotate: value }))
+                            setTodo((oldValue) => ({...oldValue, rotate: value}))
                         }
                     />
                 </View>
-      <View style={styles.divider} />
+                <View style={styles.divider}/>
                 <View marginH-30 marginB-15 row centerV>
-        <Ionicons name="gift-outline" size={25} color="#919191" />
+                    <Ionicons name="gift-outline" size={25} color="#919191"/>
                     <Text style={styles.sub} marginL-10>
                         Reward Points
                     </Text>
@@ -299,6 +313,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                     setPoints={setPoints}
                     handleChange={handleChange}
                 />
+            </KeyboardAvoidingView>
         </Dialog>
     );
 };
@@ -306,7 +321,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
 export default AddChoreDialog;
 
 const styles = StyleSheet.create({
-  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
+    divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
     gradient: {
         height: "25%",
         position: "absolute",

hooks/firebase/useGetTodos.ts

@@ -1,19 +1,27 @@
 import { useQuery } from "react-query";
 import firestore from "@react-native-firebase/firestore";
-import { useAuthContext } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
-import {IToDo} from "@/hooks/firebase/types/todoData";
+import { IToDo } from "@/hooks/firebase/types/todoData";
 
 export const useGetTodos = () => {
     const { user, profileData } = useAuthContext();
-    //TODO: Add role based filtering for todos
 
     return useQuery({
         queryKey: ["todos", user?.uid],
         queryFn: async () => {
-            const snapshot = await firestore()
+
+            let snapshot;
+            if (profileData?.userType === ProfileType.PARENT) {
+                snapshot = await firestore()
                     .collection("Todos")
                     .where("familyId", "==", profileData?.familyId)
                     .get();
+            } else {
+                snapshot = await firestore()
+                    .collection("Todos")
+                    .where("assignees", "array-contains", user?.uid)
+                    .get();
+            }
 
             return snapshot.docs.map((doc) => {
                 const data = doc.data();

ios/cally/Info.plist

@@ -127,6 +127,7 @@
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
       <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
+      <string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
     </array>
     <key>UILaunchStoryboardName</key>
     <string>SplashScreen</string>