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,7 +68,7 @@ export const ManuallyAddEventModal = () => {
       setDeleteModalVisible(false);
       setSelectedNewEndDate(undefined);
       setEditEvent(undefined);
-      setCreator(null)
+      setCreator(null);
     },
     initialDate: selectedNewEventDate || editEvent?.start,
   };
@@ -84,8 +84,8 @@ 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();
@@ -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;
 
@@ -225,7 +227,7 @@ export const ManuallyAddEventModal = () => {
       allDay: isAllDay,
       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);
+                    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,8 +645,8 @@ 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}
@@ -647,28 +654,39 @@ export const ManuallyAddEventModal = () => {
                   setLocation(text);
                 }}
                 placeholderTextColor="#2d2d30"
-                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
+                style={{
+                  fontFamily: "Manrope_500Medium",
+                  fontSize: 16,
+                  minWidth: "100%",
+                }}
                 marginL-12
                 paddingR-12
               />
             </View>
           </View>
-          {editEvent && <>
+          {editEvent && (
+            <>
               <View style={styles.divider} />
               <View marginH-32 marginB-0 centerV flex-1>
-              <View row centerV style={{ flexGrow: 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 style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>

components/pages/grocery/GroceryList.tsx

@@ -43,6 +43,13 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
             groups[category] = [];
           }
           groups[category].push(item);
+          
+          // Sort items within each category - bought items at bottom
+          groups[category].sort((a: IGrocery, b: IGrocery) => {
+            if (a.bought === b.bought) return 0;
+            return a.bought ? 1 : -1;
+          });
+          
           return groups;
         },
         {}

components/pages/todos/ToDoItem.tsx

@@ -177,9 +177,13 @@ const ToDoItem = (props: {
               </View>
             )}
           </View>
-          <View row centerV marginL-3>
+          <View row centerV marginL-5 marginT-2>
             <Text
-                style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
+                style={{
+                  fontSize: 12,
+                  fontFamily: "Manrope_500Medium",
+                  color: "#858585",
+                }}
             >
               Created by: {creator}
             </Text>
@@ -207,7 +211,7 @@ const ToDoItem = (props: {
                   aspectRatio: 1,
                   borderWidth: 2,
                   borderRadius: 100,
-                  borderColor: member.eventColor || 'transparent'
+                  borderColor: member.eventColor || '#ccc',
                 }}
               >
                 <View

components/pages/todos/family-chores/FamilyChart.tsx

@@ -74,10 +74,22 @@ const FamilyChart = () => {
       yAxisThickness={0} // Hide the Y-axis line
       yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
       hideRules={false} // Show the horizontal lines
-      rulesColor="#dadada" // Color for the horizontal lines
+      rulesType="solid"
+      rulesThickness={1.2}
+      rulesColor="#DADADA" // Color for the horizontal lines
       stackBorderTopLeftRadius={5} // Round the bars
       stackBorderTopRightRadius={5} // Round the bars
       spacing={16}
+      xAxisLabelTextStyle={{
+        fontSize: 10.41,
+        fontFamily: "Manrope_600SemiBold",
+        color: "#7f7f7f",
+      }}
+      yAxisTextStyle={{
+        fontSize: 9.61,
+        fontFamily: "Manrope_400Regular",
+        color: "#7f7f7f",
+      }}
       disableScroll
     />
   );

components/pages/todos/family-chores/FamilyChoresProgress.tsx

@@ -4,14 +4,23 @@ import { ImageBackground, StyleSheet } from "react-native";
 import FamilyChart from "./FamilyChart";
 import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
 import { Ionicons } from "@expo/vector-icons";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import { ProfileType } from "@/contexts/AuthContext";
+import { ScrollView } from "react-native-gesture-handler";
 
 const FamilyChoresProgress = ({
   setPageIndex,
 }: {
   setPageIndex: (value: number) => void;
 }) => {
+  const { data: familyMembers } = useGetFamilyMembers();
+  const children = familyMembers?.filter(
+    (member) => member.userType === ProfileType.CHILD
+  );
+
   return (
-    <View marginT-20 marginH-5>
+    <View marginT-20 marginH-5 marginB-100>
+      <ScrollView>
         <TouchableOpacity onPress={() => setPageIndex(0)}>
           <View row marginT-4 marginB-10 centerV>
             <Ionicons
@@ -29,22 +38,25 @@ const FamilyChoresProgress = ({
           </View>
         </TouchableOpacity>
         <View centerH>
-        <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}>
+          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 23 }}>
             Family Chores Progress Report
           </Text>
         </View>
         <View row spread marginT-35 marginB-20>
-        <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}>
+          <Text style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}>
             Points earned this week
           </Text>
           <View row>
+            {children?.map((child, index) => (
               <View
+                key={child.uid}
                 style={styles.pfpSmall}
-            backgroundColor="#05a8b6"
+                backgroundColor={child.eventColor || "#05a8b6"}
                 center
-            children={
+              >
+                {child.pfp ? (
                   <ImageBackground
-                source={require("../../../../assets/images/child1-picture.png")}
+                    source={{ uri: child.pfp }}
                     style={{
                       height: 25,
                       aspectRatio: 1,
@@ -52,40 +64,43 @@ const FamilyChoresProgress = ({
                       overflow: "hidden",
                     }}
                   />
-            }
-          />
-          <View
-            style={styles.pfpSmall}
-            backgroundColor="#ebd825"
-            center
-            children={
-              <ImageBackground
-                source={require("../../../../assets/images/child-picture.png")}
-                style={{
-                  height: 25,
-                  aspectRatio: 1,
-                  borderRadius: 22,
-                  overflow: "hidden",
-                }}
-              />
-            }
-          />
+                ) : (
+                  <Text color="white" style={{fontSize: 15}}>
+                    {child.firstName.at(0)}
+                    {child.lastName.at(0)}
+                  </Text>
+                )}
+              </View>
+            ))}
           </View>
         </View>
         <View style={styles.card} paddingL-10>
           <FamilyChart />
         </View>
-      <Text text70 style={{ fontFamily: "Manrope_600SemiBold" }} marginV-20>
+        <Text
+          text70
+          style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}
+          marginV-20
+        >
           Chore Tracker
         </Text>
-      <View style={styles.card} marginB-20 row spread centerV>
+        {children?.map((child) => (
+          <View
+            key={child.uid}
+            style={styles.card}
+            marginB-20
+            row
+            spread
+            centerV
+          >
             <View
               style={styles.pfpBig}
-          backgroundColor="#05a8b6"
+              backgroundColor={child.eventColor || "#05a8b6"}
               center
-          children={
+            >
+              {child.pfp ? (
                 <ImageBackground
-              source={require("../../../../assets/images/child1-picture.png")}
+                  source={{ uri: child.pfp }}
                   style={{
                     height: 45,
                     aspectRatio: 1,
@@ -93,54 +108,31 @@ const FamilyChoresProgress = ({
                     overflow: "hidden",
                   }}
                 />
-          }
-        />
+              ) : (
+                <Text color="white" style={{ fontSize: 20 }}>
+                  {child.firstName.at(0)}
+                  {child.lastName.at(0)}
+                </Text>
+              )}
+            </View>
             <Text
               color="#858585"
-          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
+              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
             >
-          Emily
+              {child.firstName}
             </Text>
             <View centerV>
-          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
-            {" "}
-            x/y chores completed
-          </Text>
-        </View>
-      </View>
-      <View style={styles.card} row spread centerV>
-        <View
-          style={styles.pfpBig}
-          backgroundColor="#ebd825"
-          center
-          children={
-            <ImageBackground
-              source={require("../../../../assets/images/child-picture.png")}
-              style={{
-                height: 45,
-                aspectRatio: 1,
-                borderRadius: 22,
-                overflow: "hidden",
-              }}
-            />
-          }
-        />
-        <Text
-          color="#858585"
-          style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
-        >
-          Austin
-        </Text>
-        <View row centerV centerH>
-          <Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
-            {" "}
+              <Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
                 x/y chores completed
               </Text>
             </View>
           </View>
+        ))}
+      </ScrollView>
     </View>
   );
 };
+
 const styles = StyleSheet.create({
   pfpSmall: {
     width: 30,