- Added the assignees to the todo item

components/pages/todos/ToDoItem.tsx

@@ -1,11 +1,11 @@
 import {
-  View,
-  Text,
-  Checkbox,
-  TouchableOpacity,
-  Dialog,
-  Button,
-  ButtonSize,
+    View,
+    Text,
+    Checkbox,
+    TouchableOpacity,
+    Dialog,
+    Button,
+    ButtonSize
 } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
@@ -14,9 +14,11 @@ import PointsSlider from "@/components/shared/PointsSlider";
 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";
 
 const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   const { updateToDo } = useToDosContext();
+  const {data: members} = useGetFamilyMembers();
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@@ -30,6 +32,12 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
       setPoints(0);
     }
   };
+
+    const getInitials = (firstName: string, lastName: string) => {
+        return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+    };
+
+    const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
   return (
     <View
       centerV
@@ -96,15 +104,44 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         ) : (
           <View />
         )}
-        <ImageBackground
-          source={require("../../../assets/images/child-picture.png")}
-          style={{
-            height: 24.64,
-            aspectRatio: 1,
-            borderRadius: 22,
-            overflow: "hidden",
-          }}
-        />
+          <View row style={{ gap: 3 }}>
+              {selectedMembers?.map((member) => {
+                  return member?.pfp ? (
+                      <ImageBackground
+                              source={require("../../../assets/images/child-picture.png")}
+                              style={{
+                                  height: 24.64,
+                                  aspectRatio: 1,
+                                  borderRadius: 22,
+                                  overflow: "hidden",
+                              }}
+                          />
+                      ) : (
+                          <View style={{
+                              position: 'relative',
+                              width: 24.64,
+                              aspectRatio: 1
+                          }}>
+                              <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(member.firstName, member.lastName ?? "")}
+                                  </Text>
+                              </View>
+                          </View>
+                      )}
+              )}
+          </View>
       </View>
       <Dialog
         visible={pointsModalVisible}