add todo repeat freq

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;

components/pages/grocery/EditGroceryItem.tsx

@@ -1,74 +1,141 @@
-import {Text, View} from "react-native";
+import { Text, View } from "react-native-ui-lib";
-import React, {useEffect, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
-import {TextField, TextFieldRef} from "react-native-ui-lib";
+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;
+  id?: string;
-    title: string;
+  title: string;
-    category: GroceryCategory;
+  category: GroceryCategory;
-    setTitle: (value: string) => void;
+  setTitle: (value: string) => void;
-    setCategory?: (category: GroceryCategory) => void;
+  setCategory?: (category: GroceryCategory) => void;
-    setSubmit?: (value: boolean) => void;
+  setSubmit?: (value: boolean) => void;
-    closeEdit?: (value: boolean) => void;
+  closeEdit?: (value: boolean) => void;
-    handleEditSubmit?: Function
+  handleEditSubmit?: Function;
 }
 
-const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
+const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
-    const {fuzzyMatchGroceryCategory} = useGroceryContext();
+  const { fuzzyMatchGroceryCategory } = useGroceryContext();
-    const inputRef = useRef<TextFieldRef>(null);
+  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(() => {
+  useEffect(() => {
-        if (inputRef.current) {
+    if (inputRef.current) {
-            inputRef.current.focus(); // Focus on the TextField
+      inputRef.current.focus(); // Focus on the TextField
+    }
+    console.log(editGrocery.category);
+  }, []);
+
+  return (
+    <View
+      style={{
+        backgroundColor: "white",
+        width: "100%",
+        borderRadius: 25,
+        paddingHorizontal: 13,
+        paddingVertical: 10,
+        marginTop: 0,
+      }}
+    >
+      <View row spread centerV>
+        <TextField
+          text70T
+          style={{}}
+          ref={inputRef}
+          placeholder="Grocery"
+          value={editGrocery.title}
+          onChangeText={(value) => {
+            editGrocery.setTitle(value);
+          }}
+          onSubmitEditing={() => {
+            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(false);
+            }
+          }}
+          maxLength={25}
+        />
+        <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"}
-    return (
+        containerStyle={styles.dropdownStyle}
-        <View
+        itemTextStyle={styles.itemText}
-            style={{
+        itemContainerStyle={styles.itemStyle}
-                backgroundColor: "white",
+        selectedTextStyle={styles.selectedText}
-                width: "100%",
+        renderLeftIcon={() => (
-                borderRadius: 25,
+          <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
-                padding: 15,
+        )}
-                marginTop: 10
+        renderItem={(item) => {
-            }}
+          return (
-        >
+            <View height={36.02} centerV>
-            <TextField
+              <Text style={styles.itemText}>{item.label}</Text>
-                text70T
+            </View>
-                style={{fontWeight: "400"}}
+          );
-                ref={inputRef}
+        }}
-                placeholder="Grocery"
+        onChange={(item) => {
-                value={editGrocery.title}
+          if (editGrocery.handleEditSubmit) {
-                onChangeText={(value) => {
+            editGrocery.handleEditSubmit({
-                    editGrocery.setTitle(value);
+              id: editGrocery.id,
-                }}
+              category: item.value,
-                onSubmitEditing={() => {
+            });
-                    if (editGrocery.setSubmit) {
+            console.log("kategorija vo diropdown: " + item.value);
-                        editGrocery.setSubmit(true);
+            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
-                    }
+          }
-                    if (editGrocery.setCategory) {
+        }}
-                        editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
+      />
-                    }
+    </View>
-                    if (editGrocery.handleEditSubmit) {
+  );
-                        editGrocery.handleEditSubmit({id: editGrocery.id, title: editGrocery.title, category: editGrocery.category});
-                    }
-                    if (editGrocery.closeEdit) {
-                        editGrocery.closeEdit(false);
-                    }
-                }}
-                maxLength={25}
-            />
-            <Text>{editGrocery.category}</Text>
-        </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

@@ -36,7 +36,7 @@ const GroceryItem = ({
 
   useEffect(() => {
     setNewTitle(item.title);
-
+    console.log(item);
     getItemCreator(item?.creatorId);
   }, []);
 
@@ -56,11 +56,14 @@ const GroceryItem = ({
   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
@@ -81,15 +84,15 @@ const GroceryItem = ({
           </View>
         ) : (
           <EditGroceryItem
-              editGrocery={{
+            editGrocery={{
-                id: item.id,
+              id: item.id,
-                title: newTitle,
+              title: newTitle,
-                category: category,
+              category: item.category,
-                setTitle: setNewTitle,
+              setTitle: setNewTitle,
-                setCategory: setCategory,
+              setCategory: setCategory,
-                closeEdit: setIsEditingTitle,
+              closeEdit: setIsEditingTitle,
-                handleEditSubmit: updateGroceryItem
+              handleEditSubmit: updateGroceryItem,
-              }}
+            }}
           />
         )}
         {!item.approved ? (
@@ -115,14 +118,19 @@ const GroceryItem = ({
             />
           </View>
         ) : (
-          <Checkbox
+          !isEditingTitle && (
-            value={item.bought}
+            <Checkbox
-            containerStyle={styles.checkbox}
+              value={item.bought}
-            hitSlop={20}
+              containerStyle={[styles.checkbox, {borderRadius: 50}]}
-            onValueChange={() =>
+              style={styles.checked}
-              updateGroceryItem({ id: item.id, bought: !item.bought })
+              borderRadius={50}
-            }
+              color="#fd1575"
-          />
+              hitSlop={20}
+              onValueChange={() =>
+                updateGroceryItem({ id: item.id, bought: !item.bought })
+              }
+            />
+          )
         )}
       </View>
       {!item.approved && (
@@ -138,9 +146,9 @@ const GroceryItem = ({
                 borderRadius: 50,
                 backgroundColor: "red",
                 marginRight: 10,
-                overflow: 'hidden'
+                overflow: "hidden",
               }}
-              source={require('../../../assets/images/child-picture.png')}
+              source={require("../../../assets/images/child-picture.png")}
             />
             <Text color="#858585" style={styles.authorTxt}>
               Requested by {itemCreator?.firstName}
@@ -166,6 +174,9 @@ const styles = StyleSheet.create({
     fontFamily: "Manrope_500Medium",
     fontSize: 15,
   },
+  checked: {
+    borderRadius: 50,
+  },
 });
 
 export default GroceryItem;

components/pages/grocery/GroceryList.tsx

@@ -30,7 +30,7 @@ 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/todos/AddChore.tsx

@@ -1,56 +1,61 @@
-import {StyleSheet} from "react-native";
+import { StyleSheet } from "react-native";
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
+import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
-import {AntDesign} from "@expo/vector-icons";
+import { AntDesign } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import AddChoreDialog from "./AddChoreDialog";
 
 const AddChore = () => {
-    const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
 
-    return (
+  return (
-        <LinearGradient
+    <LinearGradient
-            colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
+      colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
-            locations={[0, 0.5, 1]}
+      locations={[0, 0.5, 1]}
-            style={styles.gradient}
+      style={styles.gradient}
+    >
+      <View style={styles.buttonContainer}>
+        <Button
+          marginH-25
+          size={ButtonSize.large}
+          style={styles.button}
+          onPress={() => setIsVisible(!isVisible)}
         >
-            <View style={styles.buttonContainer}>
+          <AntDesign name="plus" size={24} color="white" />
-                <Button
+          <Text
-                    marginH-25
+            white
-                    size={ButtonSize.large}
+            style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
-                    style={styles.button}
+            marginL-10
-                    onPress={() => setIsVisible(!isVisible)}
+          >
-                >
+            Create new to do
-                    <AntDesign name="plus" size={24} color="white"/>
+          </Text>
-                    <Text white text60R marginL-10>
+        </Button>
-                        Create new to do
+      </View>
-                    </Text>
+      <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
-                </Button>
+    </LinearGradient>
-            </View>
+  );
-            <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
-        </LinearGradient>
-    );
 };
 
 export default AddChore;
 
 const styles = StyleSheet.create({
-    gradient: {
+  gradient: {
-        height: 150,
+    height: 150,
-        position: "absolute",
+    position: "absolute",
-        bottom: 0,
+    bottom: 0,
-        width: "100%",
+    width: "100%",
-        justifyContent: "center",
+    justifyContent: "center",
-        alignItems: "center",
+    alignItems: "center",
-    },
+  },
-    buttonContainer: {
+  buttonContainer: {
-        width: "100%",
+    width: "100%",
-        alignItems: "center",
+    alignItems: "center",
-    },
+  },
-    button: {
+  button: {
-        backgroundColor: "rgb(253, 23, 117)",
+    backgroundColor: "rgb(253, 23, 117)",
-        paddingVertical: 15,
+    paddingVertical: 15,
-        paddingHorizontal: 30,
+    paddingHorizontal: 30,
-        borderRadius: 30,
+    borderRadius: 30,
-    },
+    width: 335,
+  },
 });

components/pages/todos/AddChoreDialog.tsx

@@ -1,4 +1,4 @@
-import {View, Text, Button, Switch, PickerModes} from "react-native-ui-lib";
+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";
@@ -15,7 +15,12 @@ import { Dimensions, StyleSheet } from "react-native";
 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 { 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,7 @@ const defaultTodo = {
   date: new Date(),
   rotate: false,
   repeatType: "Every week",
-  assignees: []
+  assignees: [],
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@@ -38,11 +43,13 @@ 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);
 
-  const {data: members} = useGetFamilyMembers();
+  const { data: members } = useGetFamilyMembers();
 
   const handleClose = () => {
     setTodo(defaultTodo);
@@ -100,13 +107,17 @@ 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,
                 });
               }
               handleClose();
@@ -133,11 +144,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 +161,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 +184,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,60 +199,67 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
             ))}
           </Picker>
         </View>
+        {todo.repeatType == "Every week" && <RepeatFreq/>}
       </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/>
+        <View flex-1 />
         <Picker
-            marginL-8
+          marginL-8
-            value={selectedAssignees}
+          value={selectedAssignees}
-            onChange={(value) => {
+          onChange={(value) => {
-              setSelectedAssignees([...selectedAssignees, ...value]);
+            setSelectedAssignees([...selectedAssignees, ...value]);
-            }}
+          }}
-            style={{ marginVertical: 5 }}
+          style={{ marginVertical: 5 }}
-            mode={PickerModes.MULTI}
+          mode={PickerModes.MULTI}
-            renderInput={() =>
+          renderInput={() => (
-                <Button
+            <Button
-                    size={ButtonSize.small}
+              size={ButtonSize.small}
-                    paddingH-8
+              paddingH-8
-                    iconSource={() => (
+              iconSource={() => (
-                        <Ionicons name="add-outline" size={20} color="#ea156c"/>
+                <Ionicons name="add-outline" size={20} color="#ea156c" />
-                    )}
+              )}
-                    style={{
+              style={{
-                      marginLeft: "auto",
+                marginLeft: "auto",
-                      borderRadius: 8,
+                borderRadius: 8,
-                      backgroundColor: "#ffe8f1",
+                backgroundColor: "#ffe8f1",
-                      borderColor: "#ea156c",
+                borderColor: "#ea156c",
-                      borderWidth: 1,
+                borderWidth: 1,
-                    }}
+              }}
-                    color="#ea156c"
+              color="#ea156c"
-                    label="Assign"
+              label="Assign"
-                    labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
+              labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
-                />
+            />
-            }
+          )}
         >
           {members?.map((member) => (
-              <Picker.Item
+            <Picker.Item
-                  key={member.uid}
+              key={member.uid}
-                  label={member?.firstName + " " + member?.lastName}
+              label={member?.firstName + " " + member?.lastName}
-                  value={member?.uid!}
+              value={member?.uid!}
-              />
+            />
           ))}
         </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 +269,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 +310,8 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     marginTop: 25,
   },
+  sub: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 18,
+  },
 });

components/pages/todos/RepeatFreq.tsx

@@ -0,0 +1,83 @@
+import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+
+const RepeatFreq = () => {
+  const [weeks, setWeeks] = useState<number>(1);
+  const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
+
+  useEffect(() => {
+  }, [weeks]);
+
+  return (
+    <View row centerV>
+      <View row centerV>
+        <RepeatOption value={"Monday"} />
+        <RepeatOption value={"Tuesday"} />
+        <RepeatOption value={"Wednesday"} />
+        <RepeatOption value={"Thirsday"} />
+        <RepeatOption value={"Friday"} />
+        <RepeatOption value={"Saturday"} />
+        <RepeatOption value={"Sunday"} />
+      </View>
+      <View row gap-5 centerV>
+        <Picker
+          centered
+          marginL-10
+          marginR-0
+          paddingR-0
+          textAlign="right"
+          trailingAccessory={
+            <Text
+              style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
+            >
+              {weeks == 1 ? "Week" : "Weeks"}
+            </Text>
+          }
+          value={weeks}
+          onChange={(value) => {
+            if (typeof value === "number") {
+              setWeeks(value);
+            }
+          }}
+          placeholder={"Select number of weeks"}
+          useWheelPicker
+          color={"#fd1575"}
+          style={{
+            maxWidth: 18,
+            fontFamily: "Manrope_700Bold",
+          }}
+          containerStyle={{
+            borderWidth: 1,
+            borderRadius: 6,
+            paddingRight: 5,
+            paddingLeft: 3,
+            borderColor: "#fd1575",
+            backgroundColor: "#ffe8f1",
+          }}
+        >
+          {weekOptions.map((num) => (
+            <Picker.Item key={num} value={num} label={`${num}`} />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  );
+};
+
+export default RepeatFreq;
+
+const RepeatOption = ({ value }: { value: string }) => {
+  const [isSet, setisSet] = useState(false);
+  return (
+    <TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
+      <Text
+        style={{
+          fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
+          color: isSet ? "#fd1575" : "gray",
+        }}
+      >
+        {value.at(0)}
+      </Text>
+    </TouchableOpacity>
+  );
+};

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,

hooks/firebase/types/todoData.ts

@@ -1,12 +1,14 @@
 export interface IToDo {
-    id: string;
+  id: string;
-    title: string;
+  title: string;
-    done: boolean;
+  done: boolean;
-    date: Date | null;
+  date: Date | null;
-    points: number;
+  points: number;
-    rotate: boolean;
+  rotate: boolean;
-    repeatType: string;
+  repeatType: string;
-    creatorId?: string,
+  repeatDays?: string[];
-    familyId?: string,
+  repeatWeeks?: number;
-    assignees?: string[]; // Optional list of assignees
+  creatorId?: string;
+  familyId?: string;
+  assignees?: string[]; // Optional list of assignees
 }

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

@@ -8850,6 +8850,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"