bug fixes and new screens

2025-08-26 06:09:40 +00:00 · 2024-09-26 23:10:35 +02:00
parent 857e60a3d3
commit 7fa5a17e0b
15 changed files with 669 additions and 168 deletions
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@ -5,6 +5,7 @@ import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-n
 import {MaterialIcons} from "@expo/vector-icons";
 import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+import { useAuthContext } from "@/contexts/AuthContext";

 const modeMap = new Map([
    [0, "day"],
@ -18,6 +19,7 @@ const months = [
 ];

 export default function Screen() {
+    const { profileData } = useAuthContext();
    const [calendarHeight, setCalendarHeight] = useState(0);
    const [mode, setMode] = useState<"week" | "month" | "day">("week");
    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
@ -52,7 +54,7 @@ export default function Screen() {
    return (
        <View style={{flex: 1, height: "100%", padding: 10}}>
            <View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
-                <Text>Welcome Dalia</Text>
+                <Text>Welcome {profileData?.firstName}</Text>
                <Text>Let's get your week started!</Text>
            </View>

--- a/app/(auth)/todos/index.tsx
+++ b/app/(auth)/todos/index.tsx
@ -2,24 +2,18 @@ import AddChore from "@/components/pages/todos/AddChore";
 import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
 import ToDosList from "@/components/pages/todos/ToDosList";
+import ToDosPage from "@/components/pages/todos/ToDosPage";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
 import { AntDesign } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
-import { Button, ButtonSize, View } from "react-native-ui-lib";
+import { Button, ButtonSize, View, Text } from "react-native-ui-lib";

 export default function Screen() {
  return (
    <ToDosContextProvider>
-      <ScrollView>
-        <View backgroundColor="#f9f8f7">
-          <HeaderTemplate message="Here are your To Do's" isWelcome={true} />
-          <ProgressCard />
-          <ToDosList />
-        </View>
-      </ScrollView>
-      <AddChore />
+      <ToDosPage />
    </ToDosContextProvider>
  );
 }
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@ -12,6 +12,7 @@ import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import CategoryDropdown from "./CategoryDropdown";
 import { MaterialIcons } from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";

 const GroceryList = () => {
  const {
@ -21,6 +22,7 @@ const GroceryList = () => {
    setIsAddingGrocery,
    addGrocery,
  } = useGroceryContext();
+  const { profileData } = useAuthContext();
  const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
    groceries.filter((item) => item.approved === true)
  );
@ -47,13 +49,13 @@ const GroceryList = () => {
  );

  useEffect(() => {
-    if(submit){
+    if (submit) {
      if (title?.length > 2 && title?.length <= 25) {
        addGrocery({
          id: 0,
          title: title,
          category: category,
-          approved: false,
+          approved: profileData?.userType === ProfileType.PARENT ? true : false,
          recurring: false,
          frequency: GroceryFrequency.Never,
          bought: false,
@ -172,7 +174,7 @@ const GroceryList = () => {
            setCategory: setCategory,
            category: category,
            setTitle: setTitle,
-            setSubmit: setSubmitted
+            setSubmit: setSubmitted,
          }}
        />
      )}
--- a/components/pages/main/SignUpPage.tsx
+++ b/components/pages/main/SignUpPage.tsx
@ -1,29 +1,35 @@
-import React, {useState} from "react";
-import {Button, ButtonSize, Text, TextField, View,} from "react-native-ui-lib";
-import {useSignUp} from "@/hooks/firebase/useSignUp";
-import {ProfileType} from "@/contexts/AuthContext";
-import {StyleSheet} from "react-native";
-import {AntDesign} from "@expo/vector-icons";
+import React, { useState } from "react";
+import {
+  Button,
+  ButtonSize,
+  Checkbox,
+  Text,
+  TextField,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import { useSignUp } from "@/hooks/firebase/useSignUp";
+import { ProfileType } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";

 const SignUpPage = (props: { unsetRegister: () => any }) => {
  const [email, setEmail] = useState<string>("");
  const [firstName, setFirstName] = useState<string>("");
  const [lastName, setLastName] = useState<string>("");
  const [password, setPassword] = useState<string>("");
-    const [isParent, setIsParent] = useState<boolean>(true);
-    const [isChild, setIsChild] = useState<boolean>(false);
-    const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
-    const [profileType, setProfileType] = useState<ProfileType>(
-        ProfileType.PARENT
-    );
-    const {mutateAsync: signUp} = useSignUp();
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+  const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
+  const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
+  const { mutateAsync: signUp } = useSignUp();

  const handleSignUp = async () => {
-        await signUp({email, password, firstName, lastName});
+    await signUp({ email, password, firstName, lastName });
  };

  return (
-        <View padding-10>
+    <View padding-10 height={"100%"} flexG>
      <Text text30 center>
        Get started with Kali
      </Text>
@ -51,72 +57,68 @@ const SignUpPage = (props: { unsetRegister: () => any }) => {
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
-                secureTextEntry
+        secureTextEntry={!isPasswordVisible}
        style={styles.textfield}
+        trailingAccessory={
+          <TouchableOpacity
+            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            <AntDesign
+              name={isPasswordVisible ? "eye" : "eyeo"}
+              size={24}
+              color="gray"
            />
+          </TouchableOpacity>
+        }
+      />
+      <View gap-10 marginH-10>
+        <View row centerV>
+          <Checkbox
+            value={allowFaceID}
+            onValueChange={(value) => {
+              setAllowFaceID(value);
+            }}
+          />
+          <Text text90R marginL-10>
+            Allow FaceID for login in future
+          </Text>
+        </View>
+        <View row centerV>
+          <Checkbox
+            value={acceptTerms}
+            onValueChange={(value) => setAcceptTerms(value)}
+          />
+          <View row>
+            <Text text90R marginL-10>
+              I accept the
+            </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                terms and conditions
+              </Text>
+            </TouchableOpacity>
+            <Text text90R> and </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                privacy policy
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+      <View style={styles.bottomView}>
        <Button
          label="Register"
          onPress={handleSignUp}
-                style={{marginBottom: 10, backgroundColor: "#fd1775"}}
+          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
        />
-            <Button
-                label="Sign up with Google"
-                backgroundColor="white"
-                color="black"
-                iconSource={() => (
-                    <AntDesign
-                        name="google"
-                        size={24}
-                        color="black"
-                        style={{marginRight: 15}}
-                    />
-                )}
-            />
-            {/*<Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
-            <Checkbox
-                label="Parent"
-                value={isParent}
-                onValueChange={(value) => {
-                    setIsParent(value);
-                    setProfileType(ProfileType.PARENT);
-                    if (value) {
-                        setIsChild(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Child"
-                value={isChild}
-                onValueChange={(value) => {
-                    setIsChild(value);
-                    setProfileType(ProfileType.CHILD);
-                    if (value) {
-                        setIsParent(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Caregiver"
-                value={isCaregiver}
-                onValueChange={(value) => {
-                    setIsCaregiver(value);
-                    setProfileType(ProfileType.CAREGIVER);
-                    if (value) {
-                        setIsParent(false);
-                        setIsChild(false);
-                    }
-                }}
-            />*/}
        <View row centerH marginT-10 marginB-5 gap-5>
          <Text text70 center>
            Already have an account?
          </Text>

-
          <Button
            label="Sign In"
            flexS
@ -129,6 +131,7 @@ const SignUpPage = (props: { unsetRegister: () => any }) => {
          />
        </View>
      </View>
+    </View>
  );
 };

@ -142,4 +145,6 @@ const styles = StyleSheet.create({
    height: 45,
    borderRadius: 50,
  },
+  //mora da se izmeni kako treba
+  bottomView: { marginTop: 150 },
 });
--- a/components/pages/todos/ProgressCard.tsx
+++ b/components/pages/todos/ProgressCard.tsx
@ -4,13 +4,12 @@ import { Fontisto } from "@expo/vector-icons";
 import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
 import { useToDosContext } from "@/contexts/ToDosContext";

-const ProgressCard = () => {
+const ProgressCard = ({children}: {children?: React.ReactNode}) => {
  const { maxPoints } = useToDosContext();
  return (
    <View
      backgroundColor="white"
-      marginH-25
-      marginB-30
+      marginB-5
      padding-15
      style={{ borderRadius: 22 }}
    >
@ -35,11 +34,7 @@ const ProgressCard = () => {
        <Text color={"#868686"}>{maxPoints}</Text>
      </View>
      <View centerV centerH>
-        <Button backgroundColor="transparent">
-          <Text style={{ textDecorationLine: "underline", color: "#05a8b6" }}>
-            View your full progress report here
-          </Text>
-        </Button>
+        {children}
      </View>
    </View>
  );
--- a/components/pages/todos/ToDoItem.tsx
+++ b/components/pages/todos/ToDoItem.tsx
@ -10,7 +10,6 @@ const ToDoItem = (props: { item: IToDo }) => {
      centerV
      paddingV-10
      paddingH-10
-      marginH-25
      marginV-10
      style={{
        borderRadius: 22,
--- a/components/pages/todos/ToDosPage.tsx
+++ b/components/pages/todos/ToDosPage.tsx
@ -0,0 +1,76 @@
+import { View, Text, Button, ButtonSize } from "react-native-ui-lib";
+import React, { useState } from "react";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import AddChore from "./AddChore";
+import ProgressCard from "./ProgressCard";
+import ToDosList from "./ToDosList";
+import { ScrollView } from "react-native";
+import { StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
+import UserChoresProgress from "./user-chores/UserChoresProgress";
+
+const ToDosPage = () => {
+  const [pageIndex, setPageIndex] = useState<number>(0);
+  const { profileData } = useAuthContext();
+  const pageLink = (
+    <TouchableOpacity onPress={() => setPageIndex(1)}>
+      <Text color="#ea156d">View family progress</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"}>
+      {pageIndex == 0 && (
+        <View>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+          >
+            <View>
+              <HeaderTemplate
+                message="Here are your To Do's"
+                isWelcome={true}
+                link={profileData?.userType == ProfileType.PARENT && pageLink}
+              />
+              {profileData?.userType == ProfileType.CHILD && (
+                <View marginB-25>
+                  <ProgressCard
+                    children={
+                      <Button
+                        backgroundColor="transparent"
+                        onPress={() => setPageIndex(2)}
+                      >
+                        <Text
+                          style={{
+                            textDecorationLine: "underline",
+                            color: "#05a8b6",
+                          }}
+                        >
+                          View your full progress report here
+                        </Text>
+                      </Button>
+                    }
+                  />
+                </View>
+              )}
+              <ToDosList />
+            </View>
+          </ScrollView>
+          {profileData?.userType == ProfileType.PARENT && <AddChore />}
+        </View>
+      )}
+      {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex} />}
+      {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  linkBtn: {
+    backgroundColor: "transparent",
+    padding: 0,
+  },
+});
+
+export default ToDosPage;
--- a/components/pages/todos/family-chores/FamilyChart.tsx
+++ b/components/pages/todos/family-chores/FamilyChart.tsx
@ -0,0 +1,87 @@
+import React from "react";
+import { View } from "react-native";
+import { BarChart } from "react-native-gifted-charts";
+
+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",
+    },
+  ];
+
+  return (
+    <BarChart
+      stackData={data}
+      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
+      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
+      stackBorderTopLeftRadius={5} // Round the bars
+      stackBorderTopRightRadius={5} // Round the bars
+      spacing={16}
+      disableScroll
+    />
+  );
+};
+
+export default FamilyChart;
--- a/components/pages/todos/family-chores/FamilyChoresProgress.tsx
+++ b/components/pages/todos/family-chores/FamilyChoresProgress.tsx
@ -0,0 +1,67 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { StyleSheet } from "react-native";
+import FamilyChart from "./FamilyChart";
+import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
+
+const FamilyChoresProgress = ({
+  setPageIndex,
+}: {
+  setPageIndex: (value: number) => void;
+}) => {
+  return (
+    <View marginT-20 marginH-5>
+      <TouchableOpacity onPress={() => setPageIndex(0)}>
+        <Text>Back to ToDos</Text>
+      </TouchableOpacity>
+      <View centerH>
+        <Text text50R>Family Chores Progress Report</Text>
+      </View>
+      <View row spread marginT-25 marginB-20>
+        <Text text70>Points earned this week</Text>
+        <View row>
+          <View style={styles.pfpSmall} backgroundColor="#05a8b6" />
+          <View style={styles.pfpSmall} backgroundColor="#ebd825" />
+        </View>
+      </View>
+      <View style={styles.card} paddingL-10>
+        <FamilyChart />
+      </View>
+      <Text text70 marginV-20>
+        Chore Tracker
+      </Text>
+      <View style={styles.card} marginB-20 row spread>
+        <View style={styles.pfpBig} backgroundColor="#05a8b6" />
+        <View width={"100%"} centerV centerH>
+          <Text> x/y chores completed</Text>
+        </View>
+      </View>
+      <View style={styles.card} row spread>
+        <View style={styles.pfpBig} backgroundColor="#ebd825" />
+        <View width={"100%"} centerV centerH>
+          <Text> x/y chores completed</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  pfpSmall: {
+    width: 30,
+    aspectRatio: 1,
+    borderRadius: 50,
+    marginHorizontal: 2,
+  },
+  pfpBig: {
+    width: 50,
+    aspectRatio: 1,
+    borderRadius: 50,
+  },
+  card: {
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 20,
+  },
+});
+
+export default FamilyChoresProgress;
--- a/components/pages/todos/user-chores/UserChart.tsx
+++ b/components/pages/todos/user-chores/UserChart.tsx
@ -0,0 +1,66 @@
+import React from "react";
+import { View } from "react-native";
+import { BarChart } from "react-native-gifted-charts";
+
+const UserChart = () => {
+    const barColor = "#05a8b6"
+  const data = [
+    {
+      value: 290, // Direct value of the bar
+      frontColor: barColor, // Color of the bar
+      label: "M",
+    },
+    {
+      value: 190,
+      frontColor: barColor,
+      label: "Tu",
+    },
+    {
+      value: 210,
+      frontColor: barColor,
+      label: "W",
+    },
+    {
+      value: 410,
+      frontColor: barColor,
+      label: "Th",
+    },
+    {
+      value: 220,
+      frontColor: barColor,
+      label: "F",
+    },
+    {
+      value: 160,
+      frontColor: barColor,
+      label: "Sa",
+    },
+    {
+      value: 160,
+      frontColor: barColor,
+      label: "Su",
+    },
+  ];
+
+  return (
+    <BarChart
+      data={data}
+      width={255}
+      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
+      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
+      barBorderTopLeftRadius={5} // Round the bars
+      barBorderTopRightRadius={5} // Round the bars
+      spacing={16}
+      disableScroll
+    />
+  );
+};
+
+export default UserChart;
--- a/components/pages/todos/user-chores/UserChoresProgress.tsx
+++ b/components/pages/todos/user-chores/UserChoresProgress.tsx
@ -0,0 +1,152 @@
+import {
+  View,
+  Text,
+  ProgressBar,
+  Button,
+  ButtonSize,
+  Modal,
+  Dialog,
+} from "react-native-ui-lib";
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
+import UserChart from "./UserChart";
+import ProgressCard from "../ProgressCard";
+import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
+import { ScrollView } from "react-native-gesture-handler";
+import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+
+const UserChoresProgress = ({
+  setPageIndex,
+}: {
+  setPageIndex: (value: number) => void;
+}) => {
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  return (
+    <View marginT-20 paddingB-20>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        <TouchableOpacity onPress={() => setPageIndex(0)}>
+          <Text>Back to ToDos</Text>
+        </TouchableOpacity>
+        <View centerH>
+          <Text text50R>Your To Dos Progress Report</Text>
+        </View>
+        <View row spread marginT-25 marginB-5>
+          <Text text70>Daily Goal</Text>
+        </View>
+        <ProgressCard />
+        <View row spread marginT-10 marginB-5>
+          <Text text70>Points Earned This Week</Text>
+        </View>
+        <View style={styles.card} paddingL-10>
+          <UserChart />
+        </View>
+        <View row spread marginT-20 marginB-8 centerV>
+          <Text text70>Total Reward Points</Text>
+          <Button
+            size={ButtonSize.small}
+            label="Spend my points"
+            color="#50be0c"
+            backgroundColor="#ebf2e4"
+            onPress={() => setModalVisible(true)}
+            iconSource={() => (
+              <AntDesign
+                name="gift"
+                size={20}
+                style={{ marginRight: 5 }}
+                color="#50be0c"
+              />
+            )}
+          />
+        </View>
+        <View style={styles.card}>
+          <View row centerV>
+            <Ionicons name="flower-outline" size={30} color="#8005eb" />
+            <Text text70 marginL-5>
+              You have 1200 points saved!
+            </Text>
+          </View>
+          <ProgressBar
+            progress={80}
+            progressColor="#ff9900"
+            style={{
+              height: 21,
+              backgroundColor: "#faeedb",
+              marginTop: 15,
+              marginBottom: 5,
+            }}
+          />
+          <View row spread>
+            <Text>0</Text>
+            <Text>5000</Text>
+          </View>
+        </View>
+      </ScrollView>
+      <Dialog
+        visible={modalVisible}
+        onDismiss={() => setModalVisible(false)}
+        children={
+          <View style={styles.card} paddingH-35 paddingT-35>
+            <Text text60 center marginB-35>
+              How would you like to spend your points?
+            </Text>
+            <Button
+              label="Skip a Chore Cor a Day - 150 pts"
+              text70
+              marginB-15
+              backgroundColor="#05a8b6"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Extra Screen Time - 100 pts"
+              text70
+              marginB-15
+              backgroundColor="#ea156c"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Movie Night - 50 pts"
+              text70
+              marginB-15
+              backgroundColor="#7305d4"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Ice Cream Treat - 25 pts"
+              text70
+              marginB-15
+              backgroundColor="#e28800"
+              size={ButtonSize.large}
+            />
+            <TouchableOpacity onPress={() => setModalVisible(false)}>
+                <Text text70 center color="#999999">Go back to my to dos</Text>
+            </TouchableOpacity>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  pfpSmall: {
+    width: 30,
+    aspectRatio: 1,
+    borderRadius: 50,
+    marginHorizontal: 2,
+  },
+  pfpBig: {
+    width: 50,
+    aspectRatio: 1,
+    borderRadius: 50,
+  },
+  card: {
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 20,
+  },
+});
+
+export default UserChoresProgress;
--- a/components/shared/HeaderTemplate.tsx
+++ b/components/shared/HeaderTemplate.tsx
@ -2,7 +2,12 @@ import { View, Text } from "react-native-ui-lib";
 import React from "react";
 import { useAuthContext } from "@/contexts/AuthContext";

-const HeaderTemplate = (props: { message: string; isWelcome: boolean; children?: React.ReactNode }) => {
+const HeaderTemplate = (props: {
+  message: string;
+  isWelcome: boolean;
+  children?: React.ReactNode;
+  link?: React.ReactNode;
+}) => {
  const { user, profileData } = useAuthContext();
  return (
    <View row centerV padding-25>
@ -14,9 +19,12 @@ const HeaderTemplate = (props: { message: string; isWelcome: boolean; children?:
        marginR-20
      />
      <View>
-        {props.isWelcome && <Text text70L>Welcome, {user?.email}!</Text>}
+        {props.isWelcome && (
+          <Text text70L>Welcome, {profileData?.firstName}!</Text>
+        )}
        <Text text70BL>{props.message}</Text>
        {props.children && <View>{props.children}</View>}
+        {props.link && <View>{props.link}</View>}
      </View>
    </View>
  );
--- a/package-lock.json
+++ b/package-lock.json
@ -40,12 +40,13 @@
        "react-native-big-calendar": "^4.14.0",
        "react-native-calendars": "^1.1306.0",
        "react-native-gesture-handler": "~2.16.1",
+        "react-native-gifted-charts": "^1.4.41",
        "react-native-linear-gradient": "^2.8.3",
        "react-native-onboarding-swiper": "^1.3.0",
        "react-native-reanimated": "~3.10.1",
        "react-native-safe-area-context": "4.10.5",
        "react-native-screens": "3.31.1",
-        "react-native-svg": "^15.6.0",
+        "react-native-svg": "^15.7.1",
        "react-native-ui-lib": "^7.27.0",
        "react-native-web": "~0.19.10",
        "react-query": "^3.39.3"
@ -13065,6 +13066,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/gifted-charts-core": {
+      "version": "0.1.41",
+      "resolved": "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.41.tgz",
+      "integrity": "sha512-17xzJ0kJw+BVbxX7J1JmDHHJt/Yp1n+h0sTrC6eK4rQg9Hzw0EC/MJcv5fLJzg6dkVo+3wQ3anWXL5itapP+nQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -19684,6 +19695,30 @@
        "react-native": "*"
      }
    },
+    "node_modules/react-native-gifted-charts": {
+      "version": "1.4.41",
+      "resolved": "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.41.tgz",
+      "integrity": "sha512-UQ3E6ork24VFVTOhgAAbGkGplYB89mRjNEEPJKRAzwSYoJ1Gjtt1pleuY7OKpMb5TQychreFBA2oVBrwTLdeKw==",
+      "license": "MIT",
+      "dependencies": {
+        "gifted-charts-core": "0.1.41"
+      },
+      "peerDependencies": {
+        "expo-linear-gradient": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-linear-gradient": "*",
+        "react-native-svg": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo-linear-gradient": {
+          "optional": true
+        },
+        "react-native-linear-gradient": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-native-helmet-async": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",
@ -19786,9 +19821,9 @@
      }
    },
    "node_modules/react-native-svg": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.6.0.tgz",
-      "integrity": "sha512-TUtR+h+yi1ODsd8FHdom1TpjfWOmnaK5pri5rnSBXnMqpzq8o2zZfonHTjPX+nS3wb/Pu2XsoARgYaHNjVWXhQ==",
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.7.1.tgz",
+      "integrity": "sha512-Xc11L4t6/DtmUwrQqHR7S45Qy3cIWpcfGlmEatVeZ9c1N8eAK79heJmGRgCOVrXESrrLEHfP/AYGf0BGyrvV6A==",
      "license": "MIT",
      "dependencies": {
        "css-select": "^5.1.0",
--- a/package.json
+++ b/package.json
@ -47,12 +47,13 @@
    "react-native-big-calendar": "^4.14.0",
    "react-native-calendars": "^1.1306.0",
    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gifted-charts": "^1.4.41",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-onboarding-swiper": "^1.3.0",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
-    "react-native-svg": "^15.6.0",
+    "react-native-svg": "^15.7.1",
    "react-native-ui-lib": "^7.27.0",
    "react-native-web": "~0.19.10",
    "react-query": "^3.39.3"
--- a/yarn.lock
+++ b/yarn.lock
@ -5991,6 +5991,11 @@ getenv@^1.0.0:
  resolved "https://registry.npmjs.org/getenv/-/getenv-1.0.0.tgz"
  integrity sha512-7yetJWqbS9sbn0vIfliPsFgoXMKn/YMF+Wuiog97x+urnSRRRZ7xB+uVkwGKzRgq9CDFfMQnE9ruL5DHv9c6Xg==

+gifted-charts-core@0.1.41:
+  version "0.1.41"
+  resolved "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.41.tgz"
+  integrity sha512-17xzJ0kJw+BVbxX7J1JmDHHJt/Yp1n+h0sTrC6eK4rQg9Hzw0EC/MJcv5fLJzg6dkVo+3wQ3anWXL5itapP+nQ==
+
 glob-parent@^5.1.2:
  version "5.1.2"
  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@ -8974,6 +8979,13 @@ react-native-gesture-handler@*, "react-native-gesture-handler@>= 1.0.0", react-n
    lodash "^4.17.21"
    prop-types "^15.7.2"

+react-native-gifted-charts@^1.4.41:
+  version "1.4.41"
+  resolved "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.41.tgz"
+  integrity sha512-UQ3E6ork24VFVTOhgAAbGkGplYB89mRjNEEPJKRAzwSYoJ1Gjtt1pleuY7OKpMb5TQychreFBA2oVBrwTLdeKw==
+  dependencies:
+    gifted-charts-core "0.1.41"
+
 react-native-helmet-async@2.0.4:
  version "2.0.4"
  resolved "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz"
@ -8983,7 +8995,7 @@ react-native-helmet-async@2.0.4:
    react-fast-compare "^3.2.2"
    shallowequal "^1.1.0"

-react-native-linear-gradient@^2.8.3:
+react-native-linear-gradient@*, react-native-linear-gradient@^2.8.3:
  version "2.8.3"
  resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz"
  integrity sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==
@ -9032,10 +9044,10 @@ react-native-screens@*, "react-native-screens@>= 3.0.0", react-native-screens@3.
    react-freeze "^1.0.0"
    warn-once "^0.1.0"

-react-native-svg@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.6.0.tgz"
-  integrity sha512-TUtR+h+yi1ODsd8FHdom1TpjfWOmnaK5pri5rnSBXnMqpzq8o2zZfonHTjPX+nS3wb/Pu2XsoARgYaHNjVWXhQ==
+react-native-svg@*, react-native-svg@^15.7.1:
+  version "15.7.1"
+  resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.7.1.tgz"
+  integrity sha512-Xc11L4t6/DtmUwrQqHR7S45Qy3cIWpcfGlmEatVeZ9c1N8eAK79heJmGRgCOVrXESrrLEHfP/AYGf0BGyrvV6A==
  dependencies:
    css-select "^5.1.0"
    css-tree "^1.1.3"