family chart, other fixes

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 {Alert, 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";
@@ -39,7 +39,7 @@ import BinIcon from "@/assets/svgs/BinIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
 import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
 import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
-import {addHours, startOfHour, startOfMinute} from "date-fns";
+import { addHours, startOfHour, startOfMinute } from "date-fns";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -68,13 +68,13 @@ export const ManuallyAddEventModal = () => {
       setDeleteModalVisible(false);
       setSelectedNewEndDate(undefined);
       setEditEvent(undefined);
-      setCreator(null)
+      setCreator(null);
     },
     initialDate: selectedNewEventDate || editEvent?.start,
   };
 
   const detailsRef = useRef<TextFieldRef>(null);
-  
+
   const [title, setTitle] = useState<string>(editEvent?.title || "");
   const [details, setDetails] = useState<string>(editEvent?.notes || "");
   const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false);
@@ -84,9 +84,9 @@ export const ManuallyAddEventModal = () => {
   const [location, setLocation] = useState(editEvent?.location ?? "");
 
   useEffect(() => {
-    if(allDayAtom === true) setIsAllDay(true);
-  }, [allDayAtom])
-  
+    if (allDayAtom === true) setIsAllDay(true);
+  }, [allDayAtom]);
+
   const [startTime, setStartTime] = useState(() => {
     const date = initialDate ?? new Date();
     if (
@@ -127,14 +127,16 @@ export const ManuallyAddEventModal = () => {
   const { data: members } = useGetFamilyMembers(true);
   const titleRef = useRef<TextFieldRef>(null);
 
-  const [creator, setCreator] = useState('');
+  const [creator, setCreator] = useState("");
   useEffect(() => {
     if (editEvent) {
-      let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId);
+      let creatorMember = members?.find(
+        (member) => member?.uid === editEvent.creatorId
+      );
       const fullName = `${creatorMember?.firstName ?? ""}`;
       setCreator(fullName);
     }
-  }, [members])
+  }, [members]);
 
   const isLoading = isDeleting || isAdding;
 
@@ -223,9 +225,9 @@ export const ManuallyAddEventModal = () => {
       startDate: finalStartDate,
       endDate: finalEndDate,
       allDay: isAllDay,
-      attendees:  selectedAttendees,
+      attendees: selectedAttendees,
       notes: details,
-      location: location
+      location: location,
     };
 
     if (editEvent?.id) eventData.id = editEvent?.id;
@@ -242,7 +244,7 @@ export const ManuallyAddEventModal = () => {
 
   const validateEvent = () => {
     if (!title) {
-      Alert.alert('Alert', 'Title field cannot be empty');
+      Alert.alert("Alert", "Title field cannot be empty");
       return false;
     }
     // if (!selectedAttendees || selectedAttendees?.length === 0) {
@@ -251,7 +253,7 @@ export const ManuallyAddEventModal = () => {
     // }
 
     return true;
-  }
+  };
 
   const getRepeatLabel = () => {
     const selectedDays = repeatInterval;
@@ -496,11 +498,16 @@ export const ManuallyAddEventModal = () => {
                 <DateTimePicker
                   value={endTime}
                   onChange={(time) => {
-                    if (time >= endTime) {
-                      setEndTime(time);
+                    setEndTime(time);
+                    if (
+                      endDate.getDate() === startDate.getDate() &&
+                      time.getHours() < startTime.getHours()
+                    ) {
+                      const newEndDate = new Date(endDate);
+                      newEndDate.setDate(newEndDate.getDate() + 1);
+                      setEndDate(newEndDate);
                     }
                   }}
-                  minimumDate={startTime}
                   minuteInterval={5}
                   dateTimeFormatter={(date, mode) =>
                     date.toLocaleTimeString("en-us", {
@@ -638,37 +645,48 @@ export const ManuallyAddEventModal = () => {
           </View>
           <View style={styles.divider} />
           <View marginH-28 marginB-0 centerV flex-1>
-            <View row centerV style={{ flexGrow: 1}}>
-              <Ionicons name="location-outline" size={25} color={"#919191"}/>
+            <View row centerV style={{ flexGrow: 1 }}>
+              <Ionicons name="location-outline" size={25} color={"#919191"} />
               <TextField
-                  placeholder="Location"
-                  value={location}
-                  onChangeText={(text) => {
-                    setLocation(text);
-                  }}
-                  placeholderTextColor="#2d2d30"
-                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
-                  marginL-12
-                  paddingR-12
+                placeholder="Location"
+                value={location}
+                onChangeText={(text) => {
+                  setLocation(text);
+                }}
+                placeholderTextColor="#2d2d30"
+                style={{
+                  fontFamily: "Manrope_500Medium",
+                  fontSize: 16,
+                  minWidth: "100%",
+                }}
+                marginL-12
+                paddingR-12
               />
             </View>
           </View>
-          {editEvent && <>
-            <View style={styles.divider} />
-            <View marginH-32 marginB-0 centerV flex-1>
-              <View row centerV style={{ flexGrow: 1}}>
-                <AddPersonIcon />
-                <TextField
+          {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"}}
+                    style={{
+                      fontFamily: "Manrope_500Medium",
+                      fontSize: 16,
+                      minWidth: "100%",
+                      color: "black",
+                    }}
                     marginL-12
                     paddingR-12
-                />
+                  />
+                </View>
               </View>
-            </View>
-          </>}
+            </>
+          )}
           <View style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>