Merge branch 'dev'

# Conflicts:
#	components/pages/calendar/EventCalendar.tsx

components/pages/calendar/EventCalendar.tsx

@@ -102,7 +102,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         const memoizedEventCellStyle = useCallback(
             (event: CalendarEvent) => {
                 let eventColor = event.eventColor;
-                if (!isFamilyView && event.attendees?.includes(user?.uid)) {
+                if (!isFamilyView && (event.attendees?.includes(user?.uid) || event.creatorId === user?.uid)) {
                     eventColor = profileData?.eventColor ?? colorMap.teal;
                 }
 
@@ -268,6 +268,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                     // enrichedEventsByDate={enrichedEvents}
                     events={filteredEvents}
                     eventCellStyle={memoizedEventCellStyle}
+                    allDayEventCellStyle={memoizedEventCellStyle}
                     onPressEvent={handlePressEvent}
                     weekStartsOn={memoizedWeekStartsOn}
                     height={calendarHeight}

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -22,7 +22,7 @@ import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/type
 import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
 import { EventData } from "@/hooks/firebase/types/eventData";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import { StyleSheet } from "react-native";
+import {Alert, StyleSheet} from "react-native";
 import ClockIcon from "@/assets/svgs/ClockIcon";
 import LockIcon from "@/assets/svgs/LockIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
@@ -38,6 +38,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import BinIcon from "@/assets/svgs/BinIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
 import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
+import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -66,12 +67,12 @@ export const ManuallyAddEventModal = () => {
       setDeleteModalVisible(false);
       setSelectedNewEndDate(undefined);
       setEditEvent(undefined);
+      setCreator(null)
     },
     initialDate: selectedNewEventDate || editEvent?.start,
   };
 
   const detailsRef = useRef<TextFieldRef>(null);
-  const locationRef = useRef<TextFieldRef>(null);
   
   const [title, setTitle] = useState<string>(editEvent?.title || "");
   const [details, setDetails] = useState<string>(editEvent?.notes || "");
@@ -142,6 +143,15 @@ export const ManuallyAddEventModal = () => {
   const { data: members } = useGetFamilyMembers(true);
   const titleRef = useRef<TextFieldRef>(null);
 
+  const [creator, setCreator] = useState('');
+  useEffect(() => {
+    if (editEvent) {
+      let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId);
+      const fullName = `${creatorMember?.firstName ?? ""}`;
+      setCreator(fullName);
+    }
+  }, [members])
+
   const isLoading = isDeleting || isAdding;
 
   useEffect(() => {
@@ -257,12 +267,29 @@ export const ManuallyAddEventModal = () => {
 
     if (editEvent?.id) eventData.id = editEvent?.id;
 
-    await createEvent(eventData);
+    if (validateEvent()) {
-    setEditEvent(undefined);
+      await createEvent(eventData);
+      setEditEvent(undefined);
 
-    close();
+      close();
+    } else {
+      return;
+    }
   };
 
+  const validateEvent = () => {
+    if (!title) {
+      Alert.alert('Alert', 'Title field cannot be empty');
+      return false;
+    }
+    if (!selectedAttendees || selectedAttendees?.length === 0) {
+      Alert.alert('Alert', 'Cannot have an event without any attendees');
+      return false;
+    }
+
+    return true;
+  }
+
   const getRepeatLabel = () => {
     const selectedDays = repeatInterval;
     const allDays = [
@@ -647,34 +674,38 @@ export const ManuallyAddEventModal = () => {
             </View>
           </View>
           <View style={styles.divider} />
-          <View marginH-25 marginB-0 spread centerV flex-1>
+          <View marginH-28 marginB-0 centerV flex-1>
-            <TouchableOpacity onPress={() => locationRef?.current?.focus()}>
+            <View row centerV style={{ flexGrow: 1}}>
-              <View row centerV>
+              <Ionicons name="location-outline" size={25} color={"#919191"}/>
-                <Ionicons name="location-outline" size={28} color="#919191" />
+              <TextField
-                <Text
+                  placeholder="Location"
-                    style={{
+                  value={location}
-                      fontFamily: "PlusJakartaSans_500Medium",
+                  onChangeText={(text) => {
-                      fontSize: 16,
+                    setLocation(text);
-                    }}
+                  }}
-                    marginL-10
+                  placeholderTextColor="#2d2d30"
-                >
+                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
-                  Location
+                  marginL-12
-                </Text>
+                  paddingR-12
-              </View>
+              />
-            </TouchableOpacity>
+            </View>
-
-            <TextField
-                value={location}
-                onChangeText={(text) => setLocation(text)}
-                ref={locationRef}
-                maxLength={2000}
-                multiline
-                numberOfLines={2}
-                marginT-5
-                marginL-10
-                style={{ flex: 1 }}
-            />
           </View>
+          {editEvent && <>
+            <View style={styles.divider} />
+            <View marginH-32 marginB-0 centerV flex-1>
+              <View row centerV style={{ flexGrow: 1}}>
+                <AddPersonIcon />
+                <TextField
+                    editable={false}
+                    value={creator}
+                    placeholderTextColor="#2d2d30"
+                    style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%", color: "black"}}
+                    marginL-12
+                    paddingR-12
+                />
+              </View>
+            </View>
+          </>}
           <View style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>

components/pages/todos/ToDoItem.tsx

@@ -8,7 +8,7 @@ import {
   Checkbox,
 } from "react-native-ui-lib";
 
-import React, { useState } from "react";
+import React, {useEffect, useState} from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
 import PointsSlider from "@/components/shared/PointsSlider";
@@ -33,6 +33,13 @@ const ToDoItem = (props: {
   const [visible, setVisible] = useState<boolean>(false);
   const [points, setPoints] = useState(props.item.points);
   const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
+  const [creator, setCreator] = useState('');
+
+  useEffect(() => {
+    let creatorMember = members?.find((member) => member?.uid === props.item.creatorId);
+    const fullName = `${creatorMember?.firstName ?? ""}`;
+    setCreator(fullName);
+  }, [])
 
   const handlePointsChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -117,57 +124,66 @@ const ToDoItem = (props: {
         />
       </View>
       <View centerV centerH marginT-8 row spread>
-        <View row>
+        <View>
-          {props.item.points && props.item.points > 0 ? (
+          <View row>
-            <TouchableOpacity
+            {props.item.points && props.item.points > 0 ? (
-              onPress={() => {
+              <TouchableOpacity
-                if (props.isSettings) {
+                onPress={() => {
-                  setPointsModalVisible(true);
+                  if (props.isSettings) {
-                }
+                    setPointsModalVisible(true);
-              }}
+                  }
-            >
-              <View centerV row gap-3>
-                <Ionicons name="gift-outline" size={20} color="#46a80a" />
-                <Text
-                  color="#46a80a"
-                  style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
-                >
-                  {props.item.points} points
-                </Text>
-              </View>
-            </TouchableOpacity>
-          ) : (
-            <View />
-          )}
-
-          {!(props.item.repeatType == "None") && (
-            <View row centerV marginL-8>
-              <RepeatIcon style={{ marginRight: 4 }} />
-              <Text
-                style={{
-                  fontSize: 12,
-                  fontFamily: "Manrope_500Medium",
-                  color: "#858585",
                 }}
               >
-                {(() => {
+                <View centerV row gap-3>
-                  switch (props.item.repeatType) {
+                  <Ionicons name="gift-outline" size={20} color="#46a80a" />
-                    case "Once a month":
+                  <Text
-                      return "Monthly";
+                    color="#46a80a"
-                    case "Every week":
+                    style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
-                      return "Weekly";
+                  >
-                    case "Once a year":
+                    {props.item.points} points
-                      return "Yearly";
+                  </Text>
-                    default:
+                </View>
-                      return props.item.repeatType;
+              </TouchableOpacity>
-                  }
+            ) : (
-                })()}
+              <View />
-                {props.item.date &&
+            )}
-                  props.is7Days &&
+
-                  " / " + format(props.item.date, "EEEE")}
+            {!(props.item.repeatType == "None") && (
-              </Text>
+              <View row centerV marginL-8>
-            </View>
+                <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;
+                    }
+                  })()}
+                  {props.item.date &&
+                    props.is7Days &&
+                    " / " + format(props.item.date, "EEEE")}
+                </Text>
+              </View>
+            )}
+          </View>
+          <View row centerV marginL-3>
+            <Text
+                style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+            >
+              Created by: {creator}
+            </Text>
+          </View>
         </View>
         <View row style={{ gap: 3 }}>
           {selectedMembers?.map((member) => {