- Todos point logic and Family progress UI

components/pages/todos/ToDosPage.tsx

@@ -77,7 +77,7 @@ const ToDosPage = () => {
           {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
         </View>
       </ScrollView>
-      <AddChore />
+      {pageIndex === 0 && <AddChore />}
     </>
   );
 };

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

@@ -1,78 +1,74 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { BarChart } from "react-native-gifted-charts";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 
-const FamilyChart = () => {
-  // Define the data for the bars
-  const data = [
-    {
-      value: 600, // Total value of the bar
-      stacks: [
-        { value: 290, color: "#e7d526" }, // First part of the bar
-        { value: 310, color: "#00a8b6" }, // Second part of the bar
-      ],
-      label: "M",
-    },
-    {
-      value: 400,
-      stacks: [
-        { value: 190, color: "#e7d526" },
-        { value: 210, color: "#00a8b6" },
-      ],
-      label: "Tu",
-    },
-    {
-      value: 400,
-      stacks: [
-        { value: 210, color: "#e7d526" },
-        { value: 190, color: "#00a8b6" },
-      ],
-      label: "W",
-    },
-    {
-      value: 800,
-      stacks: [
-        { value: 410, color: "#e7d526" },
-        { value: 390, color: "#00a8b6" },
-      ],
-      label: "Th",
-    },
-    {
-      value: 600,
-      stacks: [
-        { value: 220, color: "#e7d526" },
-        { value: 380, color: "#00a8b6" },
-      ],
-      label: "F",
-    },
-    {
-      value: 200,
-      stacks: [
-        { value: 160, color: "#e7d526" },
-        { value: 40, color: "#00a8b6" },
-      ],
-      label: "Sa",
-    },
-    {
-      value: 200,
-      stacks: [
-        { value: 160, color: "#e7d526" },
-        { value: 40, color: "#00a8b6" },
-      ],
-      label: "Su",
-    },
-  ];
+const FamilyChart = ({ children }: {
+  children: Array<UserProfile>;
+}) => {
+  const [dataList, setDataList] = useState([]);
+
+  useEffect(() => {
+    let dayPointsMap = {
+      Monday: {},
+      Tuesday: {},
+      Wednesday: {},
+      Thursday: {},
+      Friday: {},
+      Saturday: {},
+      Sunday: {},
+    };
+    children?.forEach((child) => {
+      let weeklyDayPoints = child.weeklyDayPoints || {
+        Monday: 0,
+        Tuesday: 0,
+        Wednesday: 0,
+        Thursday: 0,
+        Friday: 0,
+        Saturday: 0,
+        Sunday: 0,
+      };
+
+      Object.keys(weeklyDayPoints).forEach((day) => {
+        dayPointsMap = {
+          ...dayPointsMap,
+          [day]: {
+            ...dayPointsMap[day],
+            [child.uid]: weeklyDayPoints[day]
+          }
+        }
+      })
+    })
+
+    const data = Object.keys(dayPointsMap).map((day) => {
+      const userMap = dayPointsMap[day];
+      let stacks = Object.keys(userMap).map((userId) => {
+
+        let userProfile = children?.find((child) => child.uid === userId);
+        return {
+          value: userMap[userId],
+          color: userProfile.eventColor
+        }
+      });
+
+      return {
+        stacks: stacks,
+        label: day,
+      }
+    });
+    setDataList(data);
+  }, [children])
 
   return (
     <BarChart
-      stackData={data}
+      stackData={dataList}
       width={250}
       height={150} // Height of the chart
       barWidth={20} // Width of each bar
       noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
-      maxValue={1000} // Max value on the chart
-      stepValue={200} // Step size for horizontal lines
+      maxValue={500} // Max value on the chart
+      stepValue={100} // Step size for horizontal lines
       yAxisThickness={0} // Hide the Y-axis line
-      yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
+      // yAxisLabelTexts={["0", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
       hideRules={false} // Show the horizontal lines
       rulesType="solid"
       rulesThickness={1.2}

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

@@ -1,5 +1,5 @@
 import { View, Text } from "react-native-ui-lib";
-import React from "react";
+import React, {useCallback} from "react";
 import { ImageBackground, StyleSheet } from "react-native";
 import FamilyChart from "./FamilyChart";
 import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
@@ -7,17 +7,25 @@ import { Ionicons } from "@expo/vector-icons";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import { ProfileType } from "@/contexts/AuthContext";
 import { ScrollView } from "react-native-gesture-handler";
+import {useFocusEffect} from "@react-navigation/core";
+import {UserProfile} from "@/hooks/firebase/types/profileTypes";
 
 const FamilyChoresProgress = ({
   setPageIndex,
 }: {
   setPageIndex: (value: number) => void;
 }) => {
-  const { data: familyMembers } = useGetFamilyMembers();
+  const { data: familyMembers, refetch: refetchFamilyMembers } = useGetFamilyMembers();
   const children = familyMembers?.filter(
     (member) => member.userType === ProfileType.CHILD
   );
 
+  useFocusEffect(
+      useCallback(() => {
+        refetchFamilyMembers();
+      }, [refetchFamilyMembers])
+  );
+
   return (
     <View marginT-20 marginH-5 marginB-100>
       <ScrollView>
@@ -47,35 +55,37 @@ const FamilyChoresProgress = ({
             Points earned this week
           </Text>
           <View row>
-            {children?.map((child, index) => (
-              <View
-                key={child.uid}
-                style={styles.pfpSmall}
-                backgroundColor={child.eventColor || "#05a8b6"}
-                center
-              >
-                {child.pfp ? (
-                  <ImageBackground
-                    source={{ uri: child.pfp }}
-                    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>
-            ))}
+            {children?.map((child: UserProfile) => {
+              return child.weeklyPoints && child.weeklyPoints > 0 ? (
+                  <View
+                      key={child.uid}
+                      style={styles.pfpSmall}
+                      backgroundColor={child.eventColor || "#05a8b6"}
+                      center
+                  >
+                    {child.pfp ? (
+                        <ImageBackground
+                            source={{ uri: child.pfp }}
+                            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>
+              ) : null
+            })}
           </View>
         </View>
         <View style={styles.card} paddingL-10>
-          <FamilyChart />
+          <FamilyChart children={children} />
         </View>
         <Text
           text70