changes to groceries, todos

app/(auth)/grocery/index.tsx

@@ -3,16 +3,12 @@ import GroceryList from "@/components/pages/grocery/GroceryList";
 import AddGroceryItem from "@/components/pages/grocery/AddGroceryItem";
 import { GroceryProvider } from "@/contexts/GroceryContext";
 import React from "react";
-import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import GroceryWrapper from "@/components/pages/grocery/GroceryWrapper";
-import { ScrollView } from "react-native-gesture-handler";
 
 export default function Screen() {
   return (
     <GroceryProvider>
-      <ScrollView>
+      <GroceryWrapper />
-        <GroceryList />
-        <AddGroceryItem />
-      </ScrollView>
     </GroceryProvider>
   );
 }

app/(auth)/todos/index.tsx

@@ -1,4 +1,5 @@
 import AddChore from "@/components/pages/todos/AddChore";
+import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
 import ToDosList from "@/components/pages/todos/ToDosList";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
@@ -13,7 +14,8 @@ export default function Screen() {
     <ToDosContextProvider>
       <ScrollView>
         <View backgroundColor="#f9f8f7">
-          <HeaderTemplate message="Here are your To Do's" />
+          <HeaderTemplate message="Here are your To Do's" isWelcome={true} />
+          <ProgressCard />
           <ToDosList />
         </View>
       </ScrollView>

components/pages/grocery/CategoryDropdown.tsx

@@ -1,15 +1,22 @@
 import React from "react";
 import { View, Text, TouchableOpacity } from "react-native-ui-lib";
-import { GroceryCategory } from "@/contexts/GroceryContext";
+import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
 import { ScrollView } from "react-native-gesture-handler";
 
-const CategoryDropdown = () => {
+const CategoryDropdown = (props: {
+  setSelectedCategory: (category: GroceryCategory) => void;
+}) => {
   const groceryCategories = Object.values(GroceryCategory);
 
   return (
-    <ScrollView height={100}>
+    <View height={100}>
+      <ScrollView>
         {groceryCategories.map((category) => (
-        <TouchableOpacity onPress={() => {}}>
+          <TouchableOpacity
+            onPress={() => {
+              props.setSelectedCategory(category);
+            }}
+          >
             <View
               key={category}
               style={{
@@ -21,6 +28,7 @@ const CategoryDropdown = () => {
           </TouchableOpacity>
         ))}
       </ScrollView>
+    </View>
   );
 };
 

components/pages/grocery/EditGroceryItem.tsx

@@ -0,0 +1,28 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import { TextField } from 'react-native-ui-lib'
+import CategoryDropdown from './CategoryDropdown'
+import { GroceryCategory } from '@/contexts/GroceryContext'
+
+const EditGroceryItem = (props: {title: string, setTitle: (value: string) => void, setCategory: (category: GroceryCategory) => void}) => {
+  return (
+    <View
+          style={{
+            backgroundColor: "white",
+            width: "100%",
+            borderRadius: 25,
+            padding: 15,
+          }}
+        >
+          <TextField
+            placeholder="Grocery"
+            value={props.title}
+            onChangeText={(value) => props.setTitle(value)}
+            maxLength={25}
+          />
+          <CategoryDropdown setSelectedCategory={props.setCategory} />
+        </View>
+  )
+}
+
+export default EditGroceryItem

components/pages/grocery/GroceryItem.tsx

@@ -9,9 +9,14 @@ import React, { useEffect, useState } from "react";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { MaterialCommunityIcons, AntDesign } from "@expo/vector-icons";
 import { ListItem } from "react-native-ui-lib";
-import { IGrocery, useGroceryContext } from "@/contexts/GroceryContext";
+import {
+  GroceryCategory,
+  IGrocery,
+  useGroceryContext,
+} from "@/contexts/GroceryContext";
 import EditGroceryFrequency from "./EditGroceryFrequency";
 import { TextInput } from "react-native";
+import EditGroceryItem from "./EditGroceryItem";
 
 const GroceryItem = ({
   item,
@@ -20,8 +25,7 @@ const GroceryItem = ({
   item: IGrocery;
   handleItemApproved: (id: number, changes: Partial<IGrocery>) => void;
 }) => {
-  const { updateGroceryItem, groceries } =
+  const { updateGroceryItem, groceries } = useGroceryContext();
-    useGroceryContext();
 
   const { profileType } = useAuthContext();
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
@@ -32,13 +36,17 @@ const GroceryItem = ({
     updateGroceryItem(item.id, { title: newTitle });
   };
 
+  const handleCategoryChange = (newCategory: GroceryCategory) => {
+    updateGroceryItem(item.id, { category: newCategory });
+  };
+
   useEffect(() => {
     setNewTitle(item.title);
   }, []);
 
   return (
     <ListItem
-    style={{borderRadius: 50, marginVertical: 5, height: 55}}
+      style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
       backgroundColor="white"
       centerV
       padding-0
@@ -69,12 +77,12 @@ const GroceryItem = ({
             />
           }
         />*/}
-        <View>
         {!isEditingTitle ? (
+          <View>
             <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
               <Text text70BL>{item.title}</Text>
             </TouchableOpacity>
-          ) : (
+           { /*
             <TextInput
               value={item.title}
               onChangeText={handleTitleChange}
@@ -90,8 +98,15 @@ const GroceryItem = ({
                 fontWeight: "bold",
               }}
             />
-          )}
+            */}
           </View>
+        ) : (
+          <EditGroceryItem
+            title={item.title}
+            setTitle={handleTitleChange}
+            setCategory={handleCategoryChange}
+          />
+        )}
       </ListItem.Part>
       <ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
         {!item.approved ? (

components/pages/grocery/GroceryList.tsx

@@ -1,38 +1,69 @@
 import { FlatList } from "react-native";
 import React, { useEffect, useState } from "react";
-import {
+import { View, Text, ListItem, Button, TextField } from "react-native-ui-lib";
-  View,
-  Text,
-  ListItem,
-  Button,
-  TextField,
-  Picker,
-} from "react-native-ui-lib";
-import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
-import { useAuthContext } from "@/contexts/AuthContext";
-import AntDesign from "@expo/vector-icons/AntDesign";
-import AddGroceryItem from "./AddGroceryItem";
 import GroceryItem from "./GroceryItem";
 import {
-  GroceryCategory,
   IGrocery,
+  GroceryCategory,
+  GroceryFrequency,
   useGroceryContext,
 } from "@/contexts/GroceryContext";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import CategoryDropdown from "./CategoryDropdown";
+import { MaterialIcons } from "@expo/vector-icons";
+import EditGroceryItem from "./EditGroceryItem";
 
 const GroceryList = () => {
-  const { groceries, updateGroceryItem, isAddingGrocery } = useGroceryContext();
+  const {
+    groceries,
+    updateGroceryItem,
+    isAddingGrocery,
+    setIsAddingGrocery,
+    addGrocery,
+  } = useGroceryContext();
   const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
-    groceries.filter((item) => item.approved == true)
+    groceries.filter((item) => item.approved === true)
   );
   const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
-    groceries.filter((item) => item.approved != true)
+    groceries.filter((item) => item.approved !== true)
+  );
+  const [category, setCategory] = useState<GroceryCategory>(
+    GroceryCategory.Bakery
+  );
+  const [title, setTitle] = useState<string>("");
+
+  // Group approved groceries by category
+  const approvedGroceriesByCategory = approvedGroceries.reduce(
+    (groups: any, item: IGrocery) => {
+      const category = item.category || "Uncategorized";
+      if (!groups[category]) {
+        groups[category] = [];
+      }
+      groups[category].push(item);
+      return groups;
+    },
+    {}
   );
 
   useEffect(() => {
-    setapprovedGroceries(groceries.filter((item) => item.approved == true));
+    if (title?.length > 2 && title?.length <= 25) {
-    setPendingGroceries(groceries.filter((item) => item.approved != true));
+      addGrocery({
+        id: 0,
+        title: title,
+        category: category,
+        approved: false,
+        recurring: false,
+        frequency: GroceryFrequency.Never,
+        bought: false,
+      });
+
+      setIsAddingGrocery(false);
+    }
+  }, [category]);
+
+  useEffect(() => {
+    setapprovedGroceries(groceries.filter((item) => item.approved === true));
+    setPendingGroceries(groceries.filter((item) => item.approved !== true));
   }, [groceries]);
 
   return (
@@ -49,7 +80,7 @@ const GroceryList = () => {
           >
             <Text text70BL color="#46a80a">
               {approvedGroceries.length} list{" "}
-              {approvedGroceries.length == 1 ? (
+              {approvedGroceries.length === 1 ? (
                 <Text text70BL color="#46a80a">
                   item
                 </Text>
@@ -69,6 +100,13 @@ const GroceryList = () => {
               {pendingGroceries.length} pending
             </Text>
           </View>
+          <Button
+          backgroundColor='transparent'
+          paddingH-10
+            iconSource={() => (
+              <MaterialIcons name="person-add-alt" size={24} color="gray" />
+            )}
+          />
         </View>
       </HeaderTemplate>
 
@@ -119,25 +157,36 @@ const GroceryList = () => {
         </View>
       </View>
       {isAddingGrocery && (
-        <View
+        <EditGroceryItem title={title} setTitle={setTitle} setCategory={setCategory} />
-          style={{
-            backgroundColor: "white",
-            width: "100%",
-            borderRadius: 25,
-            padding: 15,
-          }}
-        >
-          <TextField placeholder="Grocery" maxLength={25} />
-          <CategoryDropdown />
-        </View>
       )}
+
+      {/* Render Approved Groceries Grouped by Category */}
       {approvedGroceries.length > 0 ? (
         <FlatList
-          data={approvedGroceries}
+          data={Object.keys(approvedGroceriesByCategory)}
-          renderItem={({ item }) => (
+          renderItem={({ item: category }) => (
-            <GroceryItem item={item} handleItemApproved={updateGroceryItem} />
+            <View key={category}>
+              {/* Render Category Header */}
+              <Text
+                text70M
+                style={{ marginVertical: 10, paddingHorizontal: 15 }}
+                color="#666"
+              >
+                {category}
+              </Text>
+              {/* Render Grocery Items for this Category */}
+              {approvedGroceriesByCategory[category].map(
+                (grocery: IGrocery) => (
+                  <GroceryItem
+                    key={grocery.id}
+                    item={grocery}
+                    handleItemApproved={updateGroceryItem}
+                  />
+                )
               )}
-          keyExtractor={(item) => item.id.toString()}
+            </View>
+          )}
+          keyExtractor={(category) => category}
         />
       ) : (
         <Text>No approved items.</Text>

components/pages/grocery/GroceryWrapper.tsx

@@ -0,0 +1,22 @@
+import { Text, ScrollView } from "react-native";
+import { View } from "react-native-ui-lib";
+import React from "react";
+import AddGroceryItem from "./AddGroceryItem";
+import GroceryList from "./GroceryList";
+import { useGroceryContext } from "@/contexts/GroceryContext";
+
+const GroceryWrapper = () => {
+  const { isAddingGrocery } = useGroceryContext();
+  return (
+    <View height={"100%"}>
+      <View height={'90%'}>
+        <ScrollView>
+          <GroceryList />
+        </ScrollView>
+      </View>
+      {!isAddingGrocery && <AddGroceryItem />}
+    </View>
+  );
+};
+
+export default GroceryWrapper;

components/pages/todos/AddChore.tsx

@@ -13,20 +13,24 @@ import {
   NumberInputData,
   DateTimePicker,
   Switch,
+  Picker,
 } from "react-native-ui-lib";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
-import { useToDosContext } from "@/contexts/ToDosContext";
+import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
+import { setDate } from "date-fns";
 
 const AddChore = () => {
   const { addToDo, toDos } = useToDosContext();
 
-  const [newTitle, setNewTitle] = useState<string>("");
   const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const [newTitle, setNewTitle] = useState<string>("");
   const [points, setPoints] = useState<number>(10);
-  const [choreDate, setChoreDate] = useState<Date>(new Date());
+  const [choreDate, setChoreDate] = useState<Date | null>(new Date());
   const [rotate, setRotate] = useState<boolean>(false);
+  const [repeatType, setRepeatType] = useState<string>("Every week");
 
   const handleChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -68,17 +72,28 @@ const AddChore = () => {
           width: "100%",
           alignSelf: "stretch",
           padding: 0,
+          paddingTop: 3,
           margin: 0,
         }}
         visible={isVisible}
       >
         <View row spread>
-          <Button color="#05a8b6" style={styles.topBtn} label="Cancel" onPress={() => {setIsVisible(false)}} />
+          <Button
+            color="#05a8b6"
+            style={styles.topBtn}
+            label="Cancel"
+            onPress={() => {
+              setIsVisible(false);
+            }}
+          />
           <Button
             style={styles.topBtn}
             iconSource={() => (
               <Feather name="chevron-down" size={24} color="black" />
-            )} onPress={() => {setIsVisible(false)}}
+            )}
+            onPress={() => {
+              setIsVisible(false);
+            }}
           />
           <Button
             color="#05a8b6"
@@ -92,6 +107,7 @@ const AddChore = () => {
                 date: choreDate,
                 points: points,
                 rotate: rotate,
+                repeatType: repeatType,
               });
               setIsVisible(false);
               console.log(toDos);
@@ -99,7 +115,7 @@ const AddChore = () => {
           />
         </View>
         <TextField
-          placeholder="Add chore title"
+          placeholder="Add a To Do"
           value={newTitle}
           onChangeText={(text) => {
             setNewTitle(text);
@@ -109,28 +125,58 @@ const AddChore = () => {
           marginT-15
           marginL-30
         />
-        <View style={styles.divider} />
+        <View style={styles.divider} marginT-8 />
         <View marginL-30 centerV>
           <View row marginB-10>
-            <Feather name="calendar" size={28} color="#919191" />
+            {choreDate && (
+              <View row centerV>
+                <Feather name="calendar" size={25} color="#919191" />
                 <DateTimePicker
                   value={choreDate}
                   text70
-              marginL-10
+                  marginL-8
                   onChange={(date) => {
                     setChoreDate(date);
                   }}
                 />
               </View>
-          <View row>
+            )}
-            <AntDesign name="clockcircleo" size={28} color="#919191" />
+          </View>
+          <View row centerV>
+            <AntDesign name="clockcircleo" size={24} color="#919191" />
+            <Picker
+              marginL-8
+              placeholder="Select Repeat Type"
+              value={repeatType}
+              onChange={(value) => {
+                if (value) {
+                  if (value.toString() == "None") {
+                    setChoreDate(null);
+                    setRepeatType("None");
+                  } else {
+                    setRepeatType(value.toString());
+                    setChoreDate(new Date());
+                  }
+                }
+              }}
+              topBarProps={{ title: "Repeat" }}
+              style={{ marginVertical: 5 }}
+            >
+              {repeatOptions.map((option) => (
+                <Picker.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </Picker>
           </View>
         </View>
         <View style={styles.divider} />
 
         <View marginH-30 marginB-10 row centerV>
-          <Ionicons name="person-circle-outline" size={30} color="#919191" />
+          <Ionicons name="person-circle-outline" size={28} color="#919191" />
-          <Text text60R marginL-10>
+          <Text text70R marginL-10>
             Assignees
           </Text>
           <Button
@@ -150,12 +196,12 @@ const AddChore = () => {
             label="Assign"
           />
         </View>
-        <View row>
+        <View row marginH-13 marginT-13>
           <View
             marginL-30
             style={{
               aspectRatio: 1,
-              width: 60,
+              width: 50,
               backgroundColor: "red",
               borderRadius: 50,
             }}
@@ -164,22 +210,30 @@ const AddChore = () => {
             marginL-30
             style={{
               aspectRatio: 1,
-              width: 60,
+              width: 50,
               backgroundColor: "red",
               borderRadius: 50,
             }}
           />
         </View>
-        <Switch onColor={'#ea156c'} value={rotate} style={styles.rotateSwitch} onValueChange={(value) => setRotate(value)} />
+        <View row centerV style={styles.rotateSwitch}>
+          <Text text80>Take Turns</Text>
+          <Switch
+            onColor={"#ea156c"}
+            value={rotate}
+            marginL-10
+            onValueChange={(value) => setRotate(value)}
+          />
+        </View>
         <View style={styles.divider} />
-        <View marginH-30 marginB-10 row centerV>
+        <View marginH-30 marginB-15 row centerV>
-          <Ionicons name="gift-outline" size={30} color="#919191" />
+          <Ionicons name="gift-outline" size={25} color="#919191" />
-          <Text text60R marginL-10>
+          <Text text70BL marginL-10>
             Reward Points
           </Text>
         </View>
         <View marginH-30 row spread>
-          <View width={"85%"}>
+          <View width={"80%"}>
             <Slider
               value={points}
               onValueChange={(value) => setPoints(value)}
@@ -237,7 +291,8 @@ const styles = StyleSheet.create({
     color: "#05a8b6",
   },
   rotateSwitch: {
-    marginLeft: 'auto',
+    marginLeft: 35,
-    marginRight: 35
+    marginBottom: 10,
-  }
+    marginTop: 25,
+  },
 });

components/pages/todos/ProgressCard.tsx

@@ -0,0 +1,48 @@
+import { View, Text, Button } from "react-native-ui-lib";
+import React from "react";
+import { Fontisto } from "@expo/vector-icons";
+import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
+
+const ProgressCard = () => {
+  return (
+    <View
+      backgroundColor="white"
+      marginH-25
+      marginB-30
+      padding-15
+      style={{ borderRadius: 22 }}
+    >
+      <View row centerV>
+        <Fontisto name="day-sunny" size={30} color="#ff9900" />
+        <Text marginL-5 text70>
+          You have earned XX points this week!{" "}
+        </Text>
+      </View>
+      <ProgressBar
+        progress={50}
+        progressColor="#ea156c"
+        style={{
+          height: 21,
+          backgroundColor: "#fcf2f6",
+          marginTop: 15,
+          marginBottom: 5,
+        }}
+      />
+      <View row spread>
+        <Text color={"#868686"}>0</Text>
+        <Text color={"#868686"}>1000</Text>
+      </View>
+      <View centerV centerH>
+        <Button
+          backgroundColor="transparent"
+        >
+          <Text style={{ textDecorationLine: "underline", color: "#05a8b6" }}>
+            View your full progress report here
+          </Text>
+        </Button>
+      </View>
+    </View>
+  );
+};
+
+export default ProgressCard;

components/pages/todos/ToDoItem.tsx

@@ -8,15 +8,25 @@ const ToDoItem = (props: { item: IToDo }) => {
   return (
     <View
       centerV
-      backgroundColor="white"
       paddingV-10
       paddingH-10
       marginH-25
       marginV-10
-      style={{ borderRadius: 22 }}
+      style={{
+        borderRadius: 22,
+        backgroundColor: props.item.done ? "#e0e0e0" : "white",
+        opacity: props.item.done ? 0.3 : 1,
+      }}
     >
       <View paddingB-5 row spread>
-        <Text text70R>{props.item.title}</Text>
+        <Text
+          text70R
+          style={{
+            textDecorationLine: props.item.done ? "line-through" : "none",
+          }}
+        >
+          {props.item.title}
+        </Text>
         <Checkbox
           value={props.item.done}
           onValueChange={(value) => {
@@ -29,7 +39,9 @@ const ToDoItem = (props: { item: IToDo }) => {
           centerV
           height={2}
           width={"100%"}
-          backgroundColor="#e7e7e7"
+          style={{
+            backgroundColor: props.item.done ? '#b8b8b8' : "#e7e7e7",
+          }}
           centerH
         />
       </View>

components/pages/todos/ToDosList.tsx

@@ -3,15 +3,20 @@ import React from "react";
 import { IToDo, useToDosContext } from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
 import { format, isToday, isTomorrow } from "date-fns"; 
-import { ScrollView } from "react-native-gesture-handler";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
   return toDos.reduce((groups, toDo) => {
-      const dateKey = isToday(toDo.date)
+    let dateKey;
-        ? "Today • " + format(toDo.date, "EEE MMM dd")
+
-        : isTomorrow(toDo.date)
+    if (toDo.date === null) {
-        ? "Tomorrow • " + format(toDo.date, "EEE MMM dd")
+      dateKey = "No Date";
-        : format(toDo.date, "EEE MMM dd");
+    } else if (isToday(toDo.date)) {
+      dateKey = "Today • " + format(toDo.date, "EEE MMM dd");
+    } else if (isTomorrow(toDo.date)) {
+      dateKey = "Tomorrow • " + format(toDo.date, "EEE MMM dd");
+    } else {
+      dateKey = format(toDo.date, "EEE MMM dd");
+    }
 
     if (!groups[dateKey]) {
       groups[dateKey] = [];
@@ -20,32 +25,54 @@ const groupToDosByDate = (toDos: IToDo[]) => {
     groups[dateKey].push(toDo);
     return groups;
   }, {} as { [key: string]: IToDo[] });
-  };
+};
 
 const ToDosList = () => {
   const { toDos } = useToDosContext();
   const groupedToDos = groupToDosByDate(toDos);
 
+  const noDateToDos = groupedToDos["No Date"] || [];
+  const datedToDos = Object.keys(groupedToDos).filter((key) => key !== "No Date");
+
   return (
     <View marginB-140>
-      {Object.keys(groupedToDos).map((dateKey) => (
+
-        <View key={dateKey}>
+      {noDateToDos.length > 0 && (
-          <Text text70 style={{ fontWeight: "bold", marginVertical: 8, paddingHorizontal: 20}}>
+        <View key="No Date">
-            {dateKey}
+          {noDateToDos
-          </Text>
+            .sort((a, b) => Number(a.done) - Number(b.done))
-          {groupedToDos[dateKey].map((item) => (
+            .map((item) => (
               <ToDoItem key={item.id} item={item} />
             ))}
         </View>
+      )}
+
+      {datedToDos.map((dateKey) => {
+        const sortedToDos = [
+          ...groupedToDos[dateKey].filter((toDo) => !toDo.done),
+          ...groupedToDos[dateKey].filter((toDo) => toDo.done),
+        ];
+
+        return (
+          <View key={dateKey}>
+            <Text
+              text70
+              style={{
+                fontWeight: "bold",
+                marginVertical: 8,
+                paddingHorizontal: 20,
+              }}
+            >
+              {dateKey}
+            </Text>
+            {sortedToDos.map((item) => (
+              <ToDoItem key={item.id} item={item} />
             ))}
           </View>
         );
+      })}
+    </View>
+  );
 };
 
 export default ToDosList;
-
-/*const groupToDosByDate = (toDos: IToDo[]) => {
-    return toDos.reduce((groups, toDo) => {
-        const dateKey 
-    })
-}*/

contexts/GroceryContext.tsx

@@ -56,6 +56,7 @@ interface IGroceryContext {
     updateGroceryItem: (id: number, changes: Partial<IGrocery>) => void;
     isAddingGrocery: boolean;
     setIsAddingGrocery: (value: boolean) => void;
+    addGrocery: (grocery: IGrocery) => void;
 }
 
 const GroceryContext = createContext<IGroceryContext | undefined>(undefined);
@@ -103,6 +104,17 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
     },
   ]);
 
+  const addGrocery = (grocery: IGrocery) => {
+    setGroceries((prevGroceries) => [
+      ...prevGroceries,
+      {
+        ...grocery,
+        id: prevGroceries.length ? prevGroceries[prevGroceries.length - 1].id + 1 : 0,
+      },
+    ]);
+  };
+
+
   const updateGroceryItem = (id: number, changes: Partial<IGrocery>) => {
     setGroceries((prevGroceries) =>
       prevGroceries.map((grocery) =>
@@ -113,7 +125,7 @@ export const GroceryProvider: React.FC<{ children: React.ReactNode }> = ({
 
   return (
     <GroceryContext.Provider
-      value={{ groceries, iconMapping, updateGroceryItem, isAddingGrocery, setIsAddingGrocery }}
+      value={{ groceries, iconMapping, updateGroceryItem, isAddingGrocery, setIsAddingGrocery, addGrocery }}
     >
       {children}
     </GroceryContext.Provider>

contexts/ToDosContext.tsx

@@ -1,12 +1,22 @@
 import { createContext, FC, ReactNode, useContext, useState } from "react";
+
 export interface IToDo {
   id: number;
   title: string;
   done: boolean;
-  date: Date;
+  date: Date | null;
   points?: number;
   rotate: boolean;
+  repeatType: string;
 }
+
+export const repeatOptions = [
+  { label: "None", value: "None" },
+  { label: "Every week", value: "Every week" },
+  { label: "Once a month", value: "Once a month" },
+  { label: "Once a year", value: "Once a year" },
+];
+
 interface IToDosContext {
   toDos: IToDo[];
   updateToDo: (id: number, changes: Partial<IToDo>) => void;
@@ -25,6 +35,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(),
       rotate: true,
+      repeatType: "Every week"
     },
     {
       id: 1,
@@ -32,6 +43,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(),
       rotate: false,
+      repeatType: "Every week"
     },
     {
       id: 2,
@@ -39,6 +51,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(),
       rotate: true,
+      repeatType: "Every week"
     },
     {
       id: 3,
@@ -47,6 +60,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       date: new Date(Date.now() + 86400000),
       points: 40,
       rotate: false,
+      repeatType: "Every week"
     },
     {
       id: 4,
@@ -54,6 +68,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(Date.now() + 86400000),
       rotate: false,
+      repeatType: "Once a Month"
     },
     {
       id: 5,
@@ -61,6 +76,7 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(Date.now() + 2 * 86400000),
       rotate: true,
+      repeatType: "Once a Month"
     },
     {
       id: 6,
@@ -68,6 +84,23 @@ export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
       done: false,
       date: new Date(Date.now() + 3 * 86400000),
       rotate: false,
+      repeatType: "Once a year"
+    },
+    {
+      id: 7,
+      title: "Buy Nautica Voyage",
+      done: false,
+      date: null,
+      rotate: false,
+      repeatType: "None"
+    },
+    {
+      id: 8,
+      title: "Sell Dan's Xbox",
+      done: false,
+      date: null,
+      rotate: false,
+      repeatType: "None"
     },
   ]);