- Added the assignees to the todo item

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";
@@ -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,6 +104,9 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         ) : (
           <View />
         )}
+          <View row style={{ gap: 3 }}>
+              {selectedMembers?.map((member) => {
+                  return member?.pfp ? (
                       <ImageBackground
                               source={require("../../../assets/images/child-picture.png")}
                               style={{
@@ -105,6 +116,32 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
                                   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}