Merge branch 'dev'

app/(auth)/_layout.tsx

@@ -7,7 +7,7 @@ import {
   DrawerItemList,
 } from "@react-navigation/drawer";
 import { Button, View, Text, ButtonSize } from "react-native-ui-lib";
-import { StyleSheet } from "react-native";
+import { ImageBackground, StyleSheet } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
 import DrawerButton from "@/components/shared/DrawerButton";
 import {
@@ -43,7 +43,16 @@ export default function TabLayout() {
       drawerContent={(props) => {
         return (
           <DrawerContentScrollView {...props} style={{ height: "100%" }}>
-            <View centerH centerV margin-30>
+            <View centerV margin-30 row>
+              <ImageBackground
+                source={require("../../assets/images/splash.png")}
+                style={{
+                  backgroundColor: "transparent",
+                  height: 51.43,
+                  aspectRatio: 1,
+                  marginRight: 8,
+                }}
+              />
               <Text style={styles.title}>Welcome to Cally</Text>
             </View>
             <View
@@ -203,7 +212,7 @@ const styles = StyleSheet.create({
   label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
   title: {
     fontSize: 26.13,
-    fontFamily: 'Manrope_600SemiBold',
+    fontFamily: "Manrope_600SemiBold",
-    color: "#262627"
+    color: "#262627",
-  }
+  },
 });

assets/svgs/CalendarIcon.tsx

@@ -4,6 +4,7 @@ const CalendarIcon: React.FC<SvgProps> = (props) => (
   <Svg
     width={props.width || 21}
     height={props.height || 21}
+    viewBox="0 0 21 21"
     fill="none"
     {...props}
   >

assets/svgs/ClockOIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const ClockOIcon = (props: SvgProps) => (
+  <Svg
+    width={props.height || 22}
+    height={props.height || 22}
+    viewBox="0 0 22 22"
+    fill="none"
+    {...props}
+  >
+    <Path
+      stroke={props.color || "#919191"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M11 5.444V11l1.667 2.778M21 11c0 5.523-4.477 10-10 10S1 16.523 1 11 5.477 1 11 1s10 4.477 10 10Z"
+    />
+  </Svg>
+)
+export default ClockOIcon

assets/svgs/DropdownIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Svg, { SvgProps, Path } from "react-native-svg";
+const DropdownIcon = (props: SvgProps) => (
+  <Svg
+    width={props.width || 15}
+    height={props.height || 11}
+    fill="none"
+    viewBox="0 0 15 11"
+    {...props}
+  >
+    <Path
+      stroke={props.color || "#FD1775"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={props.strokeWidth || 1.393}
+      d="M4.713 1.318h9.056m-9.056 4.18h9.056m-9.056 4.18h9.056M1.23 1.667h.697V.97H1.23v.696Zm0 4.18h.697V5.15H1.23v.696Zm0 4.18h.697V9.33H1.23v.696Z"
+    />
+  </Svg>
+);
+export default DropdownIcon;

assets/svgs/RepeatIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const RepeatIcon = (props: SvgProps) => (
+  <Svg
+    width={props.height || 13}
+    height={props.height || 13}
+    fill="none"
+    {...props}
+  >
+    <Path
+      stroke={props.color || "#858585"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M1.158 7.197a5.42 5.42 0 0 1 9.58-4.103m0 0V1.099m0 1.995v.037H8.705m3.21 2.71a5.42 5.42 0 0 1-9.444 4.263m0 .001v-.198h2.033m-2.033.198v1.835"
+    />
+  </Svg>
+)
+export default RepeatIcon

components/pages/calendar/CalendarHeader.tsx

@@ -1,15 +1,24 @@
-import React, {memo} from 'react';
+import React, { memo } from "react";
-import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
+import {
+  Button,
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
 import { MaterialIcons } from "@expo/vector-icons";
-import {modeMap, months} from './constants';
+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 handleSegmentChange = (index: number) => {
     const selectedMode = modeMap.get(index);
@@ -29,7 +38,7 @@ export const CalendarHeader = memo(() => {
     setSelectedDate(updatedDate);
   };
 
-    const isSelectedDateToday = isSameDay(selectedDate, new Date())
+  const isSelectedDateToday = isSameDay(selectedDate, new Date());
 
   return (
     <View
@@ -53,7 +62,7 @@ export const CalendarHeader = memo(() => {
         <Picker
           value={months[selectedDate.getMonth()]}
           placeholder={"Select Month"}
-                    style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
+          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
           mode={PickerModes.SINGLE}
           onChange={(itemValue) => handleMonthChange(itemValue as string)}
           trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
@@ -68,12 +77,34 @@ export const CalendarHeader = memo(() => {
         </Picker>
       </View>
 
-            <View row>
+      <View row centerV>
         {!isSelectedDateToday && (
-                    <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
+          <Button
-                        setSelectedDate(new Date())
+            size={"xSmall"}
-                        setMode("day")
+            marginR-0
-                    }}/>
+            avoidInnerPadding
+            padding-7
+            style={{
+              borderRadius: 5,
+              backgroundColor: "white",
+              borderWidth: 0.7,
+              borderColor: "#dadce0",
+              height: 30,
+            }}
+            labelStyle={{
+              fontSize: 12,
+              color: "black",
+              fontFamily: "Manrope_500Medium",
+            }}
+            label={new Date().toLocaleDateString("en-US", {
+              timeZone: profileData?.timeZone || "",
+            })}
+            onPress={() => {
+              setSelectedDate(new Date());
+              setMode("day");
+              console.log(profileData?.timeZone)
+            }}
+          />
         )}
 
         <View>
@@ -92,8 +123,7 @@ export const CalendarHeader = memo(() => {
         </View>
       </View>
     </View>
-    )
+  );
-        ;
 });
 
 const styles = StyleSheet.create({

components/pages/calendar/EventCalendar.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Calendar } from "react-native-big-calendar";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { useGetEvents } from "@/hooks/firebase/useGetEvents";
@@ -8,7 +8,7 @@ import {
   eventForEditAtom,
   modeAtom,
   selectedDateAtom,
-    selectedNewEventDateAtom
+  selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { CalendarEvent } from "@/components/pages/calendar/interfaces";
@@ -22,9 +22,10 @@ interface EventCalendarProps {
 const getTotalMinutes = () => {
   const date = new Date();
   return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
-}
+};
 
-export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
+  ({ calendarHeight }) => {
     const { data: events, isLoading } = useGetEvents();
     const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@@ -35,7 +36,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
     const [isRendering, setIsRendering] = useState(true);
-    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes())
+    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
     useEffect(() => {
       if (events && mode) {
@@ -47,32 +48,38 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
       }
     }, [events, mode]);
 
-    const handlePressEvent = useCallback((event: CalendarEvent) => {
+    const handlePressEvent = useCallback(
+      (event: CalendarEvent) => {
         if (mode === "day" || mode === "week") {
           setEditVisible(true);
-            console.log({event})
+          console.log({ event });
           setEventForEdit(event);
         } else {
-            setMode("day")
+          setMode("day");
           setSelectedDate(event.start);
         }
-    }, [setEditVisible, setEventForEdit, mode]);
+      },
+      [setEditVisible, setEventForEdit, mode]
+    );
 
     const handlePressCell = useCallback(
       (date: Date) => {
         if (mode === "day" || mode === "week") {
           setSelectedNewEndDate(date);
         } else {
-                setMode("day")
+          setMode("day");
           setSelectedDate(date);
         }
       },
       [mode, setSelectedNewEndDate, setSelectedDate]
     );
 
-    const handleSwipeEnd = useCallback((date: Date) => {
+    const handleSwipeEnd = useCallback(
+      (date: Date) => {
         setSelectedDate(date);
-    }, [setSelectedDate]);
+      },
+      [setSelectedDate]
+    );
 
     const memoizedEventCellStyle = useCallback(
       (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
@@ -92,7 +99,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     const memoizedEvents = useMemo(() => events ?? [], [events]);
 
     useEffect(() => {
-        setOffsetMinutes(getTotalMinutes())
+      setOffsetMinutes(getTotalMinutes());
     }, [events, mode]);
 
     if (isLoading || isRendering) {
@@ -122,7 +129,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
         scrollOffsetMinutes={offsetMinutes}
       />
     );
-});
+  }
+);
 
 const styles = StyleSheet.create({
   segmentslblStyle: {
@@ -138,10 +146,18 @@ const styles = StyleSheet.create({
     alignContent: "center",
     width: 38,
     right: 42,
+    height: 13,
   },
   loadingContainer: {
     flex: 1,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
+  },
+  dayHeader: {
+    backgroundColor: "#4184f2",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

components/pages/calendar/InnerCalendar.tsx

@@ -21,7 +21,7 @@ export const InnerCalendar = () => {
     return (
         <>
             <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60}}
+                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
                 ref={calendarContainerRef}
                 onLayout={onLayout}
             >

components/pages/grocery/EditGroceryItem.tsx

@@ -1,8 +1,11 @@
-import {Text, View} from "react-native";
+import { Text, View } from "react-native-ui-lib";
 import React, { useEffect, useRef, useState } from "react";
 import { TextField, TextFieldRef } from "react-native-ui-lib";
-import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext";
+import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
-import CategoryDropdown from "./CategoryDropdown";
+import { Dropdown } from "react-native-element-dropdown";
+import CloseXIcon from "@/assets/svgs/CloseXIcon";
+import { StyleSheet } from "react-native";
+import DropdownIcon from "@/assets/svgs/DropdownIcon";
 
 interface IEditGrocery {
   id?: string;
@@ -12,23 +15,25 @@ interface IEditGrocery {
   setCategory?: (category: GroceryCategory) => void;
   setSubmit?: (value: boolean) => void;
   closeEdit?: (value: boolean) => void;
-    handleEditSubmit?: Function
+  handleEditSubmit?: Function;
 }
 
 const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
   const { fuzzyMatchGroceryCategory } = useGroceryContext();
   const inputRef = useRef<TextFieldRef>(null);
-    const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
 
-    useEffect(() => {
+  const groceryCategoryOptions = Object.values(GroceryCategory).map(
-        if (editGrocery.setCategory)
+    (category) => ({
-            editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
+      label: category,
-    }, [editGrocery.title]);
+      value: category,
+    })
+  );
 
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus(); // Focus on the TextField
     }
+    console.log(editGrocery.category);
   }, []);
 
   return (
@@ -37,13 +42,15 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
         backgroundColor: "white",
         width: "100%",
         borderRadius: 25,
-                padding: 15,
+        paddingHorizontal: 13,
-                marginTop: 10
+        paddingVertical: 10,
+        marginTop: 0,
       }}
     >
+      <View row spread centerV>
         <TextField
           text70T
-                style={{fontWeight: "400"}}
+          style={{}}
           ref={inputRef}
           placeholder="Grocery"
           value={editGrocery.title}
@@ -54,11 +61,12 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
             if (editGrocery.setSubmit) {
               editGrocery.setSubmit(true);
             }
-                    if (editGrocery.setCategory) {
-                        editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
-                    }
             if (editGrocery.handleEditSubmit) {
-                        editGrocery.handleEditSubmit({id: editGrocery.id, title: editGrocery.title, category: editGrocery.category});
+              editGrocery.handleEditSubmit({
+                id: editGrocery.id,
+                title: editGrocery.title,
+                category: editGrocery.category,
+              });
             }
             if (editGrocery.closeEdit) {
               editGrocery.closeEdit(false);
@@ -66,9 +74,72 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
           }}
           maxLength={25}
         />
-            <Text>{editGrocery.category}</Text>
+        <CloseXIcon
+          onPress={() => {
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+          }}
+        />
+      </View>
+      <Dropdown
+      style={{marginTop: 15}}
+        data={groceryCategoryOptions}
+        placeholder="Select grocery category"
+        placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
+        labelField="label"
+        valueField="value"
+        value={
+          editGrocery.category == GroceryCategory.None
+            ? null
+            : editGrocery.category
+        }
+        iconColor="white"
+        activeColor={"#fd1775"}
+        containerStyle={styles.dropdownStyle}
+        itemTextStyle={styles.itemText}
+        itemContainerStyle={styles.itemStyle}
+        selectedTextStyle={styles.selectedText}
+        renderLeftIcon={() => (
+          <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
+        )}
+        renderItem={(item) => {
+          return (
+            <View height={36.02} centerV>
+              <Text style={styles.itemText}>{item.label}</Text>
+            </View>
+          );
+        }}
+        onChange={(item) => {
+          if (editGrocery.handleEditSubmit) {
+            editGrocery.handleEditSubmit({
+              id: editGrocery.id,
+              category: item.value,
+            });
+            console.log("kategorija vo diropdown: " + item.value);
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+          } else {
+            if (editGrocery.setCategory) {
+              editGrocery.setCategory(item.value);
+            }
+          }
+        }}
+      />
     </View>
   );
 };
 
+const styles = StyleSheet.create({
+  itemText: {
+    fontFamily: "Manrope_400Regular",
+    fontSize: 15.42,
+    paddingLeft: 15,
+  },
+  selectedText: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 13.2,
+    color: "#fd1775",
+  },
+  dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 },
+  itemStyle: { padding: 0, margin: 0 },
+});
+
 export default EditGroceryItem;

components/pages/grocery/GroceryItem.tsx

@@ -8,6 +8,7 @@ import { ImageBackground, StyleSheet } from "react-native";
 import {IGrocery} from "@/hooks/firebase/types/groceryData";
 import firestore from "@react-native-firebase/firestore";
 import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 
 const GroceryItem = ({
   item,
@@ -17,6 +18,8 @@ const GroceryItem = ({
   handleItemApproved: (id: string, changes: Partial<IGrocery>) => void;
 }) => {
   const { updateGroceryItem } = useGroceryContext();
+  const { profileData } = useAuthContext();
+  const isParent = profileData?.userType === ProfileType.PARENT;
 
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
@@ -36,7 +39,7 @@ const GroceryItem = ({
 
   useEffect(() => {
     setNewTitle(item.title);
-
+    console.log(item);
     getItemCreator(item?.creatorId);
   }, []);
 
@@ -53,14 +56,21 @@ const GroceryItem = ({
     }
   };
 
+  const getInitials = (firstName: string, lastName: string) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+  };
+
   return (
     <View
       key={item.id}
-      style={{ borderRadius: 17, marginVertical: 5 }}
+      style={{
+        borderRadius: 17,
+        marginVertical: 5,
+        paddingHorizontal: isEditingTitle ? 0 : 13,
+        paddingVertical: isEditingTitle ? 0 : 10,
+      }}
       backgroundColor="white"
       centerV
-      paddingH-13
-      paddingV-10
     >
       <View row spread>
         <EditGroceryFrequency
@@ -73,56 +83,65 @@ const GroceryItem = ({
         />
         {!isEditingTitle ? (
           <View>
-            <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
+            { isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
               <Text text70T black style={styles.title}>
                 {item.title}
               </Text>
-            </TouchableOpacity>
+            </TouchableOpacity> :
+                <Text text70T black style={styles.title}>
+                  {item.title}
+                </Text>
+            }
           </View>
         ) : (
           <EditGroceryItem
             editGrocery={{
               id: item.id,
               title: newTitle,
-                category: category,
+              category: item.category,
               setTitle: setNewTitle,
               setCategory: setCategory,
               closeEdit: setIsEditingTitle,
-                handleEditSubmit: updateGroceryItem
+              handleEditSubmit: updateGroceryItem,
             }}
           />
         )}
         {!item.approved ? (
           <View row centerV marginB-10>
-            <AntDesign
+            {isParent && <><AntDesign
                 name="check"
                 size={24}
                 style={{
-                color: item.approved ? "green" : "#aaaaaa",
+                  color: "green",
                   marginRight: 15,
                 }}
                 onPress={() => {
-                handleItemApproved(item.id, { approved: true });
+                  isParent ? handleItemApproved(item.id, { approved: true }) : null
                 }}
             />
               <AntDesign
               name="close"
               size={24}
-              style={{ color: item.approved ? "#aaaaaa" : "red" }}
+              style={{ color: "red" }}
               onPress={() => {
-                handleItemApproved(item.id, { approved: false });
+              isParent ? handleItemApproved(item.id, { approved: false }) : null
             }}
-            />
+              /> </>}
           </View>
         ) : (
+          !isEditingTitle && (
             <Checkbox
               value={item.bought}
-            containerStyle={styles.checkbox}
+              containerStyle={[styles.checkbox, {borderRadius: 50}]}
+              style={styles.checked}
+              borderRadius={50}
+              color="#fd1575"
               hitSlop={20}
               onValueChange={() =>
                 updateGroceryItem({ id: item.id, bought: !item.bought })
               }
             />
+          )
         )}
       </View>
       {!item.approved && (
@@ -131,17 +150,43 @@ const GroceryItem = ({
             <View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
           </View>
           <View paddingL-0 paddingT-12 flexS row centerV>
-            <ImageBackground
+            {profileData?.pfp ?  <ImageBackground
+                source={require("../../../assets/images/child-picture.png")}
                 style={{
-                width: 22.36,
+                  height: 24.64,
                   aspectRatio: 1,
-                borderRadius: 50,
+                  borderRadius: 22,
-                backgroundColor: "red",
+                  overflow: "hidden",
-                marginRight: 10,
-                overflow: 'hidden'
                 }}
-              source={require('../../../assets/images/child-picture.png')}
+            /> : <View
-            />
+                style={{
+                  position: "relative",
+                  width: 24.64,
+                  aspectRatio: 1,
+                  marginRight: 4
+                }}
+            >
+              <View
+                  style={{
+                    backgroundColor: "#ccc",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    borderRadius: 100, // Circular shape
+                    width: "100%",
+                    height: "100%",
+                  }}
+              >
+                <Text
+                    style={{
+                      color: "#fff",
+                      fontSize: 12,
+                      fontWeight: "bold",
+                    }}
+                >
+                  {getInitials(itemCreator.firstName, itemCreator.lastName ?? "")}
+                </Text>
+              </View>
+            </View>}
             <Text color="#858585" style={styles.authorTxt}>
               Requested by {itemCreator?.firstName}
             </Text>
@@ -166,6 +211,9 @@ const styles = StyleSheet.create({
     fontFamily: "Manrope_500Medium",
     fontSize: 15,
   },
+  checked: {
+    borderRadius: 50,
+  },
 });
 
 export default GroceryItem;

components/pages/grocery/GroceryList.tsx

@@ -30,8 +30,9 @@ const GroceryList = () => {
     groceries?.filter((item) => item.approved !== true)
   );
   const [category, setCategory] = useState<GroceryCategory>(
-    GroceryCategory.Bakery
+    GroceryCategory.None
   );
+
   const [title, setTitle] = useState<string>("");
   const [submit, setSubmitted] = useState<boolean>(false);
 

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -2,7 +2,14 @@ import React, {useEffect, useRef, useState} from "react";
 import { StyleSheet, TouchableOpacity } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import * as ImagePicker from "expo-image-picker";
-import {Colors, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
+import {
+  Colors,
+  Image,
+  Picker,
+  Text,
+  TextField,
+  View,
+} from "react-native-ui-lib";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import * as tz from "tzdata";
 import * as Localization from "expo-localization";
@@ -10,6 +17,7 @@ import debounce from "debounce";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
+import { colorMap } from "@/constants/colorMap";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
@@ -20,7 +28,9 @@ const MyProfile = () => {
   const [firstName, setFirstName] = useState<string>(
     profileData?.firstName || ""
   );
-    const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null);
+  const [profileImage, setProfileImage] = useState<
+    string | ImagePicker.ImagePickerAsset | null
+  >(profileData?.pfp || null);
 
   const { mutateAsync: updateUserData } = useUpdateUserData();
   const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
@@ -45,12 +55,15 @@ const MyProfile = () => {
       setFirstName(profileData.firstName || "");
       setLastName(profileData.lastName || "");
       // setProfileImage(profileData.pfp || null);
-            setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
+      setTimeZone(
+        profileData.timeZone || Localization.getCalendars()[0].timeZone!
+      );
     }
   }, [profileData]);
 
   const pickImage = async () => {
-        const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    const permissionResult =
+      await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (!permissionResult.granted) {
       alert("Permission to access camera roll is required!");
       return;
@@ -65,16 +78,19 @@ const MyProfile = () => {
 
     if (!result.canceled) {
       setProfileImage(result.assets[0].uri);
-            changeProfilePicture(result.assets[0])
+      changeProfilePicture(result.assets[0]);
     }
   };
 
   const handleClearImage = async () => {
     await updateUserData({ newUserData: { pfp: null } });
-        setProfileImage(null)
+    setProfileImage(null);
-    }
+  };
 
-    const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
+  const pfpUri =
+    profileImage && typeof profileImage === "object" && "uri" in profileImage
+      ? profileImage.uri
+      : profileImage;
 
   return (
     <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
@@ -82,11 +98,28 @@ const MyProfile = () => {
         <Text style={styles.subTit}>Your Profile</Text>
         <View row spread paddingH-15 centerV marginV-15>
           <TouchableOpacity onPress={pickImage}>
+            {pfpUri ? (
               <Image
                 key={pfpUri}
                 style={styles.pfp}
                 source={pfpUri ? { uri: pfpUri } : null}
               />
+            ) : (
+              <View
+                center
+                style={{
+                  aspectRatio: 1,
+                  width: 65.54,
+                  backgroundColor: profileData?.eventColor ?? colorMap.pink,
+                  borderRadius: 20,
+                }}
+              >
+                <Text style={styles.pfpTxt}>
+                  {user?.email?.at(0)}
+                  {user?.email?.at(1)}
+                </Text>
+              </View>
+            )}
           </TouchableOpacity>
 
           <TouchableOpacity onPress={pickImage}>
@@ -179,7 +212,11 @@ const MyProfile = () => {
 const timeZoneItems = Object.keys(tz.zones)
   .sort()
   .map((zone) => (
-        <Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
+    <Picker.Item
+      key={zone}
+      label={zone.replace("/", " / ").replace("_", " ")}
+      value={zone}
+    />
   ));
 
 const styles = StyleSheet.create({
@@ -191,6 +228,11 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 21,
   },
+  pfpTxt: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 30,
+    color: "white",
+  },
   pfp: {
     aspectRatio: 1,
     width: 65.54,

components/pages/todos/AddChore.tsx

@@ -22,12 +22,16 @@ const AddChore = () => {
           onPress={() => setIsVisible(!isVisible)}
         >
           <AntDesign name="plus" size={24} color="white" />
-                    <Text white text60R marginL-10>
+          <Text
+            white
+            style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
+            marginL-10
+          >
             Create new to do
           </Text>
         </Button>
       </View>
-            <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
+      {isVisible && <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />}
     </LinearGradient>
   );
 };
@@ -52,5 +56,6 @@ const styles = StyleSheet.create({
     paddingVertical: 15,
     paddingHorizontal: 30,
     borderRadius: 30,
+    width: 335,
   },
 });

components/pages/todos/AddChoreDialog.tsx

@@ -16,6 +16,11 @@ import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
 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";
 
 interface IAddChoreDialog {
   isVisible: boolean;
@@ -30,7 +35,8 @@ const defaultTodo = {
   date: new Date(),
   rotate: false,
   repeatType: "Every week",
-  assignees: []
+  assignees: [],
+  repeatDays: []
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@@ -38,7 +44,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
   const [todo, setTodo] = useState<IToDo>(
     addChoreDialogProps.selectedTodo ?? defaultTodo
   );
-  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(addChoreDialogProps?.selectedTodo?.assignees ?? []);
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
+    addChoreDialogProps?.selectedTodo?.assignees ?? []
+  );
   const { width, height } = Dimensions.get("screen");
   const [points, setPoints] = useState<number>(todo.points);
 
@@ -60,6 +68,25 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
     }
   };
 
+  const handleRepeatDaysChange = (day: string, set: boolean) => {
+    if (set) {
+      const updatedTodo = {
+        ...todo,
+        repeatDays: [...todo.repeatDays, day]
+      }
+      setTodo(updatedTodo);
+    } else {
+      const array = todo.repeatDays ?? [];
+      let index = array.indexOf(day);
+      array.splice(index, 1);
+      const updatedTodo = {
+        ...todo,
+        repeatDays: array
+      }
+      setTodo(updatedTodo);
+    }
+  }
+
   return (
     <Dialog
       bottom={true}
@@ -100,13 +127,18 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           onPress={() => {
             try {
               if (addChoreDialogProps.selectedTodo) {
-                updateToDo({ ...todo, points: points, assignees: selectedAssignees });
+                updateToDo({
+                  ...todo,
+                  points: points,
+                  assignees: selectedAssignees
+                });
               } else {
                 addToDo({
                   ...todo,
                   done: false,
                   points: points,
-                  assignees: selectedAssignees
+                  assignees: selectedAssignees,
+                  repeatDays: todo.repeatDays ?? []
                 });
               }
               handleClose();
@@ -133,11 +165,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         <View row marginB-10>
           {todo?.date && (
             <View row centerV>
-              <Feather name="calendar" size={25} color="#919191" />
+              <CalendarIcon color="#919191" width={24} height={24} />
               <DateTimePicker
                 value={todo.date}
                 text70
-                marginL-8
+                style={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 16,
+                }}
+                marginL-12
                 onChange={(date) => {
                   setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
                 }}
@@ -146,9 +182,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           )}
         </View>
         <View row centerV>
-          <AntDesign name="clockcircleo" size={24} color="#919191" />
+          <ClockOIcon />
           <Picker
-            marginL-8
+            marginL-12
             placeholder="Select Repeat Type"
             value={todo?.repeatType}
             onChange={(value) => {
@@ -169,7 +205,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
               }
             }}
             topBarProps={{ title: "Repeat" }}
-            style={{ marginVertical: 5 }}
+            style={{
+              marginVertical: 5,
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 16,
+            }}
           >
             {repeatOptions.map((option) => (
               <Picker.Item
@@ -180,12 +220,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
             ))}
           </Picker>
         </View>
+        {todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={todo.repeatDays ?? []}/>}
       </View>
       <View style={styles.divider} />
 
       <View marginH-30 marginB-10 row centerV>
-        <Ionicons name="person-circle-outline" size={28} color="#919191" />
+        <ProfileIcon color="#919191" />
-        <Text text70R marginL-10>
+        <Text style={styles.sub} marginL-10>
           Assignees
         </Text>
         <View flex-1 />
@@ -197,7 +238,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           }}
           style={{ marginVertical: 5 }}
           mode={PickerModes.MULTI}
-            renderInput={() =>
+          renderInput={() => (
             <Button
               size={ButtonSize.small}
               paddingH-8
@@ -215,7 +256,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
               label="Assign"
               labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
             />
-            }
+          )}
         >
           {members?.map((member) => (
             <Picker.Item
@@ -227,13 +268,19 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         </Picker>
       </View>
       <View row marginL-27 marginT-0>
-        <AssigneesDisplay selectedAttendees={selectedAssignees} setSelectedAttendees={setSelectedAssignees}/>
+        <AssigneesDisplay
+          selectedAttendees={selectedAssignees}
+          setSelectedAttendees={setSelectedAssignees}
+        />
       </View>
       <View row centerV style={styles.rotateSwitch}>
-        <Text text80>Take Turns</Text>
+        <Text style={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 16 }}>
+          Take Turns
+        </Text>
         <Switch
           onColor={"#ea156c"}
           value={todo.rotate}
+          style={{ width: 43.06, height: 27.13 }}
           marginL-10
           onValueChange={(value) =>
             setTodo((oldValue) => ({ ...oldValue, rotate: value }))
@@ -243,7 +290,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
       <View style={styles.divider} />
       <View marginH-30 marginB-15 row centerV>
         <Ionicons name="gift-outline" size={25} color="#919191" />
-        <Text text70BL marginL-10>
+        <Text style={styles.sub} marginL-10>
           Reward Points
         </Text>
       </View>
@@ -284,4 +331,8 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     marginTop: 25,
   },
+  sub: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 18,
+  },
 });

components/pages/todos/RepeatFreq.tsx

@@ -0,0 +1,59 @@
+import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+import {DAYS_OF_WEEK_ENUM} from "@/hooks/firebase/types/todoData";
+
+const RepeatFreq = ({ repeatDays, handleRepeatDaysChange }: { repeatDays: string[], handleRepeatDaysChange: Function }) => {
+  const [weeks, setWeeks] = useState<number>(1);
+  const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
+
+  useEffect(() => {}, [weeks]);
+
+  return (
+    <View row centerV spread marginR-30>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.MONDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+      <RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
+    </View>
+  );
+};
+
+export default RepeatFreq;
+
+const RepeatOption = ({ value, handleRepeatDaysChange, repeatDays }: { value: string, handleRepeatDaysChange: Function, repeatDays: string[] }) => {
+  const [isSet, setisSet] = useState(repeatDays.includes(value));
+
+
+  const handleDayChange = () => {
+      handleRepeatDaysChange(value, !isSet)
+      setisSet(!isSet);
+  }
+
+  return (
+    <TouchableOpacity onPress={handleDayChange}>
+      <View
+        center
+        marginT-8
+        marginB-4
+        width={28}
+        height={28}
+        style={{
+          backgroundColor: isSet ? "#fd1575" : "white",
+          borderRadius: 100,
+        }}
+      >
+        <Text
+          style={{
+            fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
+            color: isSet ? "white" : "gray",
+          }}
+        >
+          {value.at(0)}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/pages/todos/ToDoItem.tsx

@@ -5,7 +5,7 @@ import {
   TouchableOpacity,
   Dialog,
   Button,
-    ButtonSize
+  ButtonSize,
 } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
@@ -15,10 +15,15 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
 import { ImageBackground } from "react-native";
 import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import RepeatIcon from "@/assets/svgs/RepeatIcon";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 
 const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   const { updateToDo } = useToDosContext();
   const { data: members } = useGetFamilyMembers();
+  const { profileData } = useAuthContext();
+  const isParent = profileData?.userType === ProfileType.PARENT;
+
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@@ -37,7 +42,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
     return `${firstName.charAt(0)}${lastName.charAt(0)}`;
   };
 
-    const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
+  const selectedMembers = members?.filter((x) =>
+    props?.item?.assignees?.includes(x?.uid!)
+  );
+
+  let isTodoEditable;
+  if (isParent) {
+      isTodoEditable = true
+  } else {
+      isTodoEditable = props.item.creatorId === profileData?.uid;
+  }
+
   return (
     <View
       centerV
@@ -50,7 +65,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         opacity: props.item.done ? 0.3 : 1,
       }}
     >
-        {visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>}
+      {visible && (
+        <AddChoreDialog
+          isVisible={visible}
+          setIsVisible={setVisible}
+          selectedTodo={props.item}
+        />
+      )}
       <View paddingB-8 row spread>
         <Text
           text70
@@ -60,14 +81,20 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
             fontSize: 15,
           }}
           onPress={() => {
-              setVisible(true);
+              isTodoEditable ? setVisible(true) : null
           }}
         >
           {props.item.title}
         </Text>
         <Checkbox
           value={props.item.done}
-          containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
+          containerStyle={{
+            borderWidth: 0.7,
+            borderRadius: 50,
+            borderColor: "gray",
+            height: 24.64,
+            width: 24.64,
+          }}
           color="#fd1575"
           onValueChange={(value) => {
             updateToDo({ id: props.item.id, done: !props.item.done });
@@ -86,6 +113,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         />
       </View>
       <View centerV centerH marginT-8 row spread>
+        <View row>
           {props.item.points && props.item.points > 0 ? (
             <TouchableOpacity
               onPress={() => {
@@ -96,7 +124,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
             >
               <View centerV row gap-3>
                 <Ionicons name="gift-outline" size={20} color="#46a80a" />
-              <Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
+                <Text
+                  color="#46a80a"
+                  style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+                >
                   {props.item.points} points
                 </Text>
               </View>
@@ -104,11 +135,38 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
           ) : (
             <View />
           )}
+
+          {!(props.item.repeatType == "None") && (
+            <View row centerV marginL-8>
+              <RepeatIcon style={{ marginRight: 4 }} />
+              <Text
+                style={{
+                  fontSize: 12,
+                  fontFamily: "Manrope_500Medium",
+                  color: "#858585",
+                }}
+              >
+                {(() => {
+                  switch (props.item.repeatType) {
+                    case "Once a month":
+                      return "Monthly";
+                    case "Every week":
+                      return "Weekly";
+                    case "Once a year":
+                      return "Yearly";
+                    default:
+                      return props.item.repeatType;
+                  }
+                })()}
+              </Text>
+            </View>
+          )}  
+        </View>
         <View row style={{ gap: 3 }}>
           {selectedMembers?.map((member) => {
             return member?.pfp ? (
               <ImageBackground
-                              source={require("../../../assets/images/child-picture.png")}
+                source={{ uri: member.pfp }}
                 style={{
                   height: 24.64,
                   aspectRatio: 1,
@@ -117,30 +175,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
                 }}
               />
             ) : (
-                          <View style={{
+              <View
-                              position: 'relative',
+                style={{
+                  position: "relative",
                   width: 24.64,
-                              aspectRatio: 1
+                  aspectRatio: 1,
-                          }}>
+                }}
-                              <View style={{
+              >
-                                  backgroundColor: '#ccc',
+                <View
-                                  justifyContent: 'center',
+                  style={{
-                                  alignItems: 'center',
+                    backgroundColor: "#ccc",
+                    justifyContent: "center",
+                    alignItems: "center",
                     borderRadius: 100, // Circular shape
-                                  width: '100%',
+                    width: "100%",
-                                  height: '100%'
+                    height: "100%",
-                              }}>
+                  }}
-                                  <Text style={{
+                >
-                                      color: '#fff',
+                  <Text
+                    style={{
+                      color: "#fff",
                       fontSize: 12,
-                                      fontWeight: 'bold'
+                      fontWeight: "bold",
-                                  }}>
+                    }}
+                  >
                     {getInitials(member.firstName, member.lastName ?? "")}
                   </Text>
                 </View>
               </View>
-                      )}
+            );
-              )}
+          })}
         </View>
       </View>
       <Dialog

components/pages/todos/ToDosList.tsx

@@ -2,7 +2,13 @@ import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
-import { format, isToday, isTomorrow } from "date-fns";
+import {
+  addDays,
+  format,
+  isToday,
+  isTomorrow,
+  isWithinInterval,
+} from "date-fns";
 import { AntDesign } from "@expo/vector-icons";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 
@@ -11,12 +17,26 @@ const groupToDosByDate = (toDos: IToDo[]) => {
   return sortedTodos.reduce((groups, toDo) => {
     let dateKey;
 
+    const isNext7Days = (date: Date) => {
+      const today = new Date();
+      return isWithinInterval(date, { start: today, end: addDays(today, 7) });
+    };
+
+    const isNext30Days = (date: Date) => {
+      const today = new Date();
+      return isWithinInterval(date, { start: today, end: addDays(today, 30) });
+    };
+
     if (toDo.date === null) {
       dateKey = "No Date";
     } else if (isToday(toDo.date)) {
-      dateKey = "Today • " + format(toDo.date, "EEE MMM dd");
+      dateKey = "Today";
     } else if (isTomorrow(toDo.date)) {
-      dateKey = "Tomorrow • " + format(toDo.date, "EEE MMM dd");
+      dateKey = "Tomorrow";
+    } else if (isNext7Days(toDo.date)) {
+      dateKey = "Next 7 Days";
+    } else if (isNext30Days(toDo.date)) {
+      dateKey = "Next 30 Days";
     } else {
       dateKey = format(toDo.date, "EEE MMM dd");
     }
@@ -110,12 +130,12 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
                 flexDirection: "row",
                 justifyContent: "space-between",
                 alignItems: "center",
-                paddingHorizontal: 20,
+                paddingHorizontal: 0,
-                marginVertical: 8,
+                marginBottom: 4,
+                marginTop: 15,
               }}
             >
               <Text
-                text70
                 style={{
                   fontFamily: "Manrope_700Bold",
                   fontSize: 15,

components/shared/HeaderTemplate.tsx

@@ -1,6 +1,8 @@
 import { Image, Text, View } from "react-native-ui-lib";
 import React from "react";
 import { useAuthContext } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { colorMap } from "@/constants/colorMap";
 
 const HeaderTemplate = (props: {
   message: string;
@@ -11,26 +13,51 @@ const HeaderTemplate = (props: {
   const { user, profileData } = useAuthContext();
 
   const headerHeight: number = 72;
-    return (
+
-        <View row centerV marginV-15>
+  const styles = StyleSheet.create({
-            <Image
+    pfp: {
-                source={{uri: profileData?.pfp}}
-                style={{
       height: headerHeight,
       aspectRatio: 1,
       borderRadius: 22,
       overflow: "hidden",
       marginRight: 20,
-                }}
+      backgroundColor: profileData?.eventColor ?? colorMap.pink,
-            />
+    },
+    pfpTxt: {
+      fontFamily: "Manrope_500Medium",
+      fontSize: 30,
+      color: 'white',
+    },
+  });
+
+  return (
+    <View row centerV marginV-15>
+      {profileData?.pfp ? (
+        <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
+      ) : (
+        <View style={styles.pfp} center>
+          <Text style={styles.pfpTxt}>
+            {user?.email?.at(0)}
+            {user?.email?.at(1)}
+          </Text>
+        </View>
+      )}
       <View gap-3>
         {props.isWelcome && (
-                    <Text text70L style={{
+          <Text
+            text70L
+            style={{
               fontSize: 19,
-                        fontFamily: "Manrope_400Regular"
+              fontFamily: "Manrope_400Regular",
-                    }}>Welcome, {profileData?.firstName}!</Text>
+            }}
+          >
+            Welcome, {profileData?.firstName}!
+          </Text>
         )}
-                <Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
+        <Text
+          text70B
+          style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
+        >
           {props.message}
         </Text>
         {props.children && <View>{props.children}</View>}

contexts/ToDosContext.tsx

@@ -1,8 +1,6 @@
 import { createContext, FC, ReactNode, useContext, useState } from "react";
 import {IToDo} from "@/hooks/firebase/types/todoData";
-import {useGetGroceries} from "@/hooks/firebase/useGetGroceries";
 import {useGetTodos} from "@/hooks/firebase/useGetTodos";
-import {useCreateGrocery} from "@/hooks/firebase/useCreateGrocery";
 import {useCreateTodo} from "@/hooks/firebase/useCreateTodo";
 import {useUpdateTodo} from "@/hooks/firebase/useUpdateTodo";
 

hooks/firebase/types/todoData.ts

@@ -6,7 +6,27 @@ export interface IToDo {
   points: number;
   rotate: boolean;
   repeatType: string;
-    creatorId?: string,
+  repeatDays?: string[];
-    familyId?: string,
+  repeatWeeks?: number;
+  creatorId?: string;
+  familyId?: string;
   assignees?: string[]; // Optional list of assignees
+  connectedTodoId?: string;
+}
+
+export const DAYS_OF_WEEK_ENUM = {
+  MONDAY: "Monday",
+  TUESDAY: "Tuesday",
+  WEDNESDAY: "Wednesday",
+  THURSDAY: "Thursday",
+  FRIDAY: "Friday",
+  SATURDAY: "Saturday",
+  SUNDAY: "Sunday"
+}
+
+export const REPEAT_TYPE = {
+  NONE: "None",
+  EVERY_WEEK: "Every week",
+  ONCE_A_MONTH: "Once a month",
+  ONCE_A_YEAR: "Once a year"
 }

hooks/firebase/useCreateEvent.ts

@@ -30,9 +30,10 @@ export const useCreateEvent = () => {
                         return;
                     }
                 }
+                const newDoc = firestore().collection('Events').doc();
                 await firestore()
                     .collection("Events")
-                    .add({...eventData, creatorId: currentUser?.uid, familyId: profileData?.familyId});
+                    .add({...eventData, id: newDoc.id, creatorId: currentUser?.uid, familyId: profileData?.familyId});
             } catch (e) {
                 console.error(e);
             }

hooks/firebase/useCreateTodo.ts

@@ -1,7 +1,17 @@
 import {useMutation, useQueryClient} from "react-query";
 import firestore from "@react-native-firebase/firestore";
 import {useAuthContext} from "@/contexts/AuthContext";
-import { IToDo } from "@/hooks/firebase/types/todoData";
+import {DAYS_OF_WEEK_ENUM, IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
+import {addDays, addMonths, addWeeks, addYears, compareAsc, format, subDays} from "date-fns";
+
+export const daysOfWeek = [
+    DAYS_OF_WEEK_ENUM.MONDAY,
+    DAYS_OF_WEEK_ENUM.TUESDAY,
+    DAYS_OF_WEEK_ENUM.WEDNESDAY,
+    DAYS_OF_WEEK_ENUM.THURSDAY,
+    DAYS_OF_WEEK_ENUM.FRIDAY,
+    DAYS_OF_WEEK_ENUM.SATURDAY,
+    DAYS_OF_WEEK_ENUM.SUNDAY];
 
 export const useCreateTodo = () => {
     const { user: currentUser, profileData } = useAuthContext();
@@ -11,10 +21,81 @@ export const useCreateTodo = () => {
         mutationKey: ["createTodo"],
         mutationFn: async (todoData: Partial<IToDo>) => {
             try {
+                if (todoData.repeatType === REPEAT_TYPE.NONE) {
                     const newDoc = firestore().collection('Todos').doc();
+                    let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid}
                     await firestore()
                         .collection("Todos")
-                    .add({...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid})
+                        .add(originalTodo);
+                } else {
+                    // Create the one original to do
+                    const newDoc = firestore().collection('Todos').doc();
+                    let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid, connectedTodoId: newDoc.id};
+                    await firestore()
+                        .collection("Todos")
+                        .add(originalTodo);
+
+                    const batch = firestore().batch();
+
+                    if (todoData.repeatType === REPEAT_TYPE.EVERY_WEEK) {
+
+                        let date = originalTodo.date;
+                        let repeatDays = originalTodo.repeatDays;
+                        const dates = [];
+
+                        const originalDateDay = format(date, 'EEEE');
+                        const originalNumber = daysOfWeek.indexOf(originalDateDay);
+                        repeatDays?.forEach((day) => {
+                            let number = daysOfWeek.indexOf(day);
+                            let newDate;
+                            if (originalNumber > number) {
+                                let diff = originalNumber - number;
+                                newDate = subDays(date, diff);
+                            } else {
+                                let diff = number - originalNumber;
+                                newDate = addDays(date, diff);
+                            }
+                            dates.push(newDate);
+                        });
+
+                        // TODO: for the next 52 weeks
+                        for (let i = 0; i < 4; i++) {
+                           dates?.forEach((dateToAdd) => {
+                               let newTodoDate = addWeeks(dateToAdd, i);
+                               if (compareAsc(newTodoDate, originalTodo.date) !== 0) {
+
+                                   let docRef = firestore().collection("Todos").doc();
+                                   const newTodo = { ...originalTodo, id: docRef.id, date: newTodoDate, connectedTodoId: newDoc.id };
+                                   batch.set(docRef, newTodo);
+                               }
+                           })
+                        }
+                    } else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_MONTH) {
+
+                        // for the next 12 months
+                        for (let i = 1; i < 12; i++) {
+                            let date = originalTodo.date;
+                            const nextMonth = addMonths(date, i);
+
+                            let docRef = firestore().collection("Todos").doc();
+                            const newTodo = { ...originalTodo, id: docRef.id, date: nextMonth, connectedTodoId: newDoc.id };
+                            batch.set(docRef, newTodo);
+                        }
+                    } else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_YEAR) {
+
+                        // for the next 5 years
+                        for (let i = 1; i < 5; i++) {
+                            let date = originalTodo.date;
+                            const nextMonth = addYears(date, i);
+
+                            let docRef = firestore().collection("Todos").doc();
+                            const newTodo = { ...originalTodo, id: docRef.id, date: nextMonth, connectedTodoId: newDoc.id };
+                            batch.set(docRef, newTodo);
+                        }
+                    }
+
+                    await batch.commit();
+                }
             } catch (e) {
                 console.error(e)
             }

hooks/firebase/useGetTodos.ts

@@ -1,7 +1,6 @@
 import { useQuery } from "react-query";
 import firestore from "@react-native-firebase/firestore";
 import { useAuthContext } from "@/contexts/AuthContext";
-import {UserProfile} from "@/hooks/firebase/types/profileTypes";
 import {IToDo} from "@/hooks/firebase/types/todoData";
 
 export const useGetTodos = () => {
@@ -23,6 +22,7 @@ export const useGetTodos = () => {
                     ...data,
                     id: doc.id,
                     date: data.date ? new Date(data.date.seconds * 1000) : null,
+                    repeatDays: data.repeatDays ?? []
                 };
             }) as IToDo[];
         }

hooks/firebase/useUpdateTodo.ts

@@ -1,18 +1,145 @@
 import { useMutation, useQueryClient } from "react-query";
 import firestore from "@react-native-firebase/firestore";
-import { IToDo } from "@/hooks/firebase/types/todoData";
+import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
+import {addDays, addMonths, addWeeks, addYears, compareAsc, format, subDays} from "date-fns";
+import {daysOfWeek} from "@/hooks/firebase/useCreateTodo";
+import {useAuthContext} from "@/contexts/AuthContext";
 
 export const useUpdateTodo = () => {
+    const { user: currentUser, profileData } = useAuthContext();
     const queryClients = useQueryClient()
 
     return useMutation({
         mutationKey: ["updateTodo"],
         mutationFn: async (todoData: Partial<IToDo>) => {
             try {
+                if (todoData.connectedTodoId) {
+                    console.log("CONNECTED")
+                    const snapshot = await firestore()
+                        .collection("Todos")
+                        .where("connectedTodoId", "==", todoData.connectedTodoId)
+                        .get();
+                    const connectedTodos = snapshot.docs.map((doc) => {
+                        const data = doc.data();
+
+                        return {
+                            ...data,
+                            id: doc.id,
+                            date: data.date ? new Date(data.date.seconds * 1000) : null,
+                            ref: doc.ref
+                        };
+                    }) as IToDo[];
+
+                    console.log("CONNECTED TODO");
+                    let filteredTodos = connectedTodos?.filter((item) => compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 1 ||
+                        compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 0).sort((a,b) =>{
+                        return b.date?.getSeconds() - a.date?.getSeconds();
+                    });
+
+                    let firstTodo = filteredTodos?.[0];
+                    const batch = firestore().batch();
+                    if (compareAsc(format(firstTodo?.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) !== 0 || firstTodo?.repeatType !== todoData.repeatType) {
+
+                        console.log("DELETE");
+                        filteredTodos?.forEach((item) => {
+                            batch.delete(item.ref);
+                        });
+
+                        if (todoData.repeatType === REPEAT_TYPE.NONE) {
+
+                            console.log("NONE");
+                            const newDoc = firestore().collection('Todos').doc();
+                            let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid}
+                            batch.set(newDoc, originalTodo);
+                        } else if (todoData.repeatType === REPEAT_TYPE.EVERY_WEEK) {
+
+                            console.log("EVERY WEEK");
+                            let date = todoData?.date;
+                            let repeatDays = todoData?.repeatDays;
+                            const dates = [];
+
+                            const originalDateDay = format(date, 'EEEE');
+                            const originalNumber = daysOfWeek.indexOf(originalDateDay);
+                            repeatDays?.forEach((day) => {
+                                let number = daysOfWeek.indexOf(day);
+                                let newDate;
+                                if (originalNumber > number) {
+                                    let diff = originalNumber - number;
+                                    newDate = subDays(date, diff);
+                                } else {
+                                    let diff = number - originalNumber;
+                                    newDate = addDays(date, diff);
+                                }
+                                dates.push(newDate);
+                            });
+
+                            let todosToAddCycles = 4;
+                            if (firstTodo?.repeatType === REPEAT_TYPE.EVERY_WEEK) {
+                                todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
+                            }
+                            console.log(todosToAddCycles);
+                            let newDoc = firestore().collection("Todos").doc();
+                            const newTodo = { ...todoData, id: newDoc.id, date: todoData.date, connectedTodoId: newDoc?.id };
+                            batch.set(newDoc, newTodo);
+
+                            console.log(dates);
+                            for (let i = 0; i < todosToAddCycles; i++) {
+                                dates?.forEach((dateToAdd) => {
+                                    let newTodoDate = addWeeks(dateToAdd, i);
+
+                                        console.log("ENTER")
+                                        let docRef = firestore().collection("Todos").doc();
+                                        const newTodo = { ...todoData, id: docRef.id, date: newTodoDate, connectedTodoId: newDoc?.id };
+                                        batch.set(docRef, newTodo);
+                                })
+                            }
+                        } else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_MONTH) {
+
+                            console.log("ONCE A MONTH");
+                            // for the next 12 months
+                            for (let i = 0; i < 12; i++) {
+                                let date = todoData?.date;
+                                const nextMonth = addMonths(date, i);
+                                const newTodo = { ...todoData, date: nextMonth, connectedTodoId: firstTodo?.connectedTodoId };
+
+                                let docRef = firestore().collection("Todos").doc();
+                                batch.set(docRef, newTodo);
+                            }
+                        } else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_YEAR) {
+
+                            console.log("ONCE A YEAR");
+                            // for the next 5 years
+                            for (let i = 0; i < 5; i++) {
+                                let date = todoData?.date;
+                                const nextMonth = addYears(date, i);
+                                const newTodo = { ...todoData, date: nextMonth, connectedTodoId: firstTodo?.connectedTodoId };
+
+                                let docRef = firestore().collection("Todos").doc();
+                                batch.set(docRef, newTodo);
+                            }
+                        }
+
+                        await batch.commit();
+                    } else if (firstTodo?.repeatDays !== todoData.repeatDays) {
+
+                        console.log("UPDATE REPEAT DAYS");
+                        await updateRepeatDaysTodos(batch, todoData, firstTodo, filteredTodos)
+                    } else {
+                        filteredTodos?.forEach((item) => {
+
+                            console.log("UPDATE");
+                            batch.update(item.ref, {...todoData, date: item.date});
+                        })
+                        await batch.commit();
+                    }
+                } else {
+                    console.log("REGULAR UPDATE");
+                    console.log(todoData);
                     await firestore()
                         .collection("Todos")
                         .doc(todoData.id)
                         .update(todoData);
+                }
             } catch (e) {
                 console.error(e)
             }
@@ -22,3 +149,58 @@ export const useUpdateTodo = () => {
         }
     })
 }
+
+const updateRepeatDaysTodos = async (batch: any, todoData: IToDo, firstTodo: IToDo, filteredTodos: IToDo[]) => {
+    const todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
+    console.log(todosToAddCycles);
+
+    filteredTodos?.forEach((item) => {
+
+        batch.update(item.ref, {...todoData, date: item.date});
+    })
+
+    let newRepeatDays = todoData.repeatDays?.filter((element) => firstTodo?.repeatDays?.indexOf(element) === -1);
+    let removeRepeatDays = firstTodo?.repeatDays?.filter((element) => todoData?.repeatDays?.indexOf(element) === -1);
+    const dates = [];
+
+    let date = firstTodo?.date;
+    const originalDateDay = format(date, 'EEEE');
+    const originalNumber = daysOfWeek.indexOf(originalDateDay);
+    newRepeatDays?.forEach((day) => {
+        let number = daysOfWeek.indexOf(day);
+        let newDate;
+        if (originalNumber > number) {
+            let diff = originalNumber - number;
+            newDate = subDays(date, diff);
+        } else {
+            let diff = number - originalNumber;
+            newDate = addDays(date, diff);
+        }
+        dates.push(newDate);
+    });
+
+    for (let i = 0; i < todosToAddCycles; i++) {
+        dates?.forEach((dateToAdd) => {
+            let newTodoDate = addWeeks(dateToAdd, i);
+            if (compareAsc(newTodoDate, firstTodo?.date) !== 0) {
+                const newTodo = {...todoData, date: newTodoDate};
+
+                let docRef = firestore().collection("Todos").doc();
+                batch.set(docRef, newTodo);
+            }
+        })
+    }
+
+    removeRepeatDays?.forEach((removeDay) => {
+        filteredTodos?.forEach((item) => {
+
+            let todoDate = item.date;
+            const todoDateDay = format(todoDate, 'EEEE');
+
+            if (todoDateDay === removeDay) {
+                batch.delete(item.ref);
+            }
+        })
+    })
+    await batch.commit();
+}

package.json

@@ -75,6 +75,7 @@
     "react-native-app-auth": "^8.0.0",
     "react-native-big-calendar": "^4.14.0",
     "react-native-calendars": "^1.1306.0",
+    "react-native-element-dropdown": "^2.12.2",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-gifted-charts": "^1.4.41",
     "react-native-keyboard-manager": "^6.5.16-0",

yarn.lock

@@ -8953,6 +8953,13 @@ react-native-calendars@^1.1306.0:
   optionalDependencies:
     moment "^2.29.4"
 
+react-native-element-dropdown@^2.12.2:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/react-native-element-dropdown/-/react-native-element-dropdown-2.12.2.tgz#48d0c12b87591e2498c73bbde80e18374a4c262e"
+  integrity sha512-Tf8hfRuniYEXo+LGoVgIMoItKWuPLX6jbqlwAFgMbBhmWGTuV+g1OVOAx/ny16kgnwp+NhgJoWpxhVvr7HSmXA==
+  dependencies:
+    lodash "^4.17.21"
+
 react-native-gesture-handler@~2.16.1:
   version "2.16.2"
   resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz"