bug fixes and new screens

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,18 +49,18 @@ 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,
         });
-  
+
         setIsAddingGrocery(false);
         setSubmitted(false);
         setTitle("");
@@ -172,7 +174,7 @@ const GroceryList = () => {
             setCategory: setCategory,
             category: category,
             setTitle: setTitle,
-            setSubmit: setSubmitted
+            setSubmit: setSubmitted,
           }}
         />
       )}

components/pages/main/SignUpPage.tsx

@@ -1,145 +1,150 @@
-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 [email, setEmail] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
 
-    const handleSignUp = async () => {
-        await signUp({email, password, firstName, lastName});
-    };
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+  const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
+  const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
+  const { mutateAsync: signUp } = useSignUp();
 
-    return (
-        <View padding-10>
-            <Text text30 center>
-                Get started with Kali
-            </Text>
-            <Text center>Please enter your details.</Text>
-            <TextField
-                marginT-60
-                placeholder="First name"
-                value={firstName}
-                onChangeText={setFirstName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Last name"
-                value={lastName}
-                onChangeText={setLastName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Email"
-                value={email}
-                onChangeText={setEmail}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Password"
-                value={password}
-                onChangeText={setPassword}
-                secureTextEntry
-                style={styles.textfield}
-            />
-            <Button
-                label="Register"
-                onPress={handleSignUp}
-                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>
+  const handleSignUp = async () => {
+    await signUp({ email, password, firstName, lastName });
+  };
 
-
-                <Button
-                    label="Sign In"
-                    flexS
-                    margin-0
-                    link
-                    color="#fd1775"
-                    size={ButtonSize.small}
-                    text70
-                    onPress={props.unsetRegister}
-                />
-            </View>
+  return (
+    <View padding-10 height={"100%"} flexG>
+      <Text text30 center>
+        Get started with Kali
+      </Text>
+      <Text center>Please enter your details.</Text>
+      <TextField
+        marginT-60
+        placeholder="First name"
+        value={firstName}
+        onChangeText={setFirstName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Last name"
+        value={lastName}
+        onChangeText={setLastName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        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" }}
+        />
+        <View row centerH marginT-10 marginB-5 gap-5>
+          <Text text70 center>
+            Already have an account?
+          </Text>
+
+          <Button
+            label="Sign In"
+            flexS
+            margin-0
+            link
+            color="#fd1775"
+            size={ButtonSize.small}
+            text70
+            onPress={props.unsetRegister}
+          />
+        </View>
+      </View>
+    </View>
+  );
 };
 
 export default SignUpPage;
 
 const styles = StyleSheet.create({
-    textfield: {
-        backgroundColor: "white",
-        marginVertical: 10,
-        padding: 30,
-        height: 45,
-        borderRadius: 50,
-    },
+  textfield: {
+    backgroundColor: "white",
+    marginVertical: 10,
+    padding: 30,
+    height: 45,
+    borderRadius: 50,
+  },
+  //mora da se izmeni kako treba
+  bottomView: { marginTop: 150 },
 });

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>
   );

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,

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;

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;

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;

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;

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;

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>
   );