cally/components/pages/todos/ToDosPage.tsx

import { Button, Text, View } from "react-native-ui-lib";
import React  from "react";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import AddChore from "./AddChore";
import ProgressCard from "./ProgressCard";
import ToDosList from "./ToDosList";
import { Dimensions, ScrollView, 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";
import { useAtom } from "jotai";
import { toDosPageIndex } from "../calendar/atoms";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";

const ToDosPage = () => {
  const { profileData } = useAuthContext();
  const [pageIndex, setPageIndex] = useAtom(toDosPageIndex);

    const { data: members } = useGetFamilyMembers();

  const { width } = Dimensions.get("screen");
  const pageLink = (
    <TouchableOpacity onPress={() => setPageIndex(1)}>
      <Text color="#ea156d" style={{ fontSize: 14 }}>
        View family progress
      </Text>
    </TouchableOpacity>
  );

  return (
    <>
      <ScrollView
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      >
        <View
          paddingH-25
          width={width}
        >
          {pageIndex == 0 && (
            <View>
              <View>
                <HeaderTemplate
                  message="Here are your To Dos"
                  isWelcome={true}
                  link={profileData?.userType == ProfileType.PARENT && pageLink}
                  isToDos={true}
                />
                {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 members={members} />
              </View>
            </View>
          )}
          {pageIndex == 1 && (
            <FamilyChoresProgress setPageIndex={setPageIndex} />
          )}
          {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
        </View>
      </ScrollView>
      {pageIndex === 0 && <AddChore />}
    </>
  );
};

const styles = StyleSheet.create({
  linkBtn: {
    backgroundColor: "transparent",
    padding: 0,
  },
});

export default ToDosPage;