added chores page

app/(auth)/calendar/index.tsx

@@ -1,18 +1,18 @@
 import React from "react";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
-import { Constants } from "react-native-ui-lib";
+import { View } from "react-native-ui-lib";
 import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
 import { DeviceType } from "expo-device";
 import * as Device from "expo-device";
 
 export default function Screen() {
   return (
-    <>
+    <View style={{ backgroundColor: "white" }}>
       {Device.deviceType === DeviceType.TABLET ? (
         <TabletCalendarPage />
       ) : (
         <CalendarPage />
       )}
-    </>
+    </View>
   );
 }

components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx

@@ -0,0 +1,271 @@
+import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { useToDosContext } from "@/contexts/ToDosContext";
+import {
+  addDays,
+  format,
+  isToday,
+  isTomorrow,
+  isWithinInterval,
+} from "date-fns";
+import { AntDesign } from "@expo/vector-icons";
+import { IToDo } from "@/hooks/firebase/types/todoData";
+import ToDoItem from "../../todos/ToDoItem";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+
+const groupToDosByDate = (toDos: IToDo[]) => {
+  let sortedTodos = toDos.sort((a, b) => a.date - b.date);
+  return sortedTodos.reduce(
+    (groups, toDo) => {
+      let dateKey;
+      let subDateKey;
+
+      const isNext7Days = (date: Date) => {
+        const today = new Date();
+        return isWithinInterval(date, { start: today, end: addDays(today, 7) });
+      };
+
+      const isNext30Days = (date: Date) => {
+        const today = new Date();
+        return isWithinInterval(date, {
+          start: today,
+          end: addDays(today, 30),
+        });
+      };
+
+      if (toDo.date === null) {
+        dateKey = "No Date";
+      } else if (isToday(toDo.date)) {
+        dateKey = "Today";
+      } else if (isTomorrow(toDo.date)) {
+        dateKey = "Tomorrow";
+      } else if (isNext7Days(toDo.date)) {
+        dateKey = "Next 7 Days";
+      } else if (isNext30Days(toDo.date)) {
+        dateKey = "Next 30 Days";
+        subDateKey = format(toDo.date, "MMM d");
+      } else {
+        return groups;
+      }
+
+      if (!groups[dateKey]) {
+        groups[dateKey] = {
+          items: [],
+          subgroups: {},
+        };
+      }
+
+      if (dateKey === "Next 30 Days" && subDateKey) {
+        if (!groups[dateKey].subgroups[subDateKey]) {
+          groups[dateKey].subgroups[subDateKey] = [];
+        }
+        groups[dateKey].subgroups[subDateKey].push(toDo);
+      } else {
+        groups[dateKey].items.push(toDo);
+      }
+
+      return groups;
+    },
+    {} as {
+      [key: string]: {
+        items: IToDo[];
+        subgroups: { [key: string]: IToDo[] };
+      };
+    }
+  );
+};
+
+const filterToDosByUser = (toDos: IToDo[], uid: string | undefined) => {
+  if (!uid) return [];
+  return toDos.filter((todo) =>
+    todo.assignees?.includes(uid)
+  );
+};
+
+const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
+  const { toDos } = useToDosContext();
+  const userTodos = filterToDosByUser(toDos, user.uid);
+  const groupedToDos = groupToDosByDate(userTodos);
+
+  const [expandedGroups, setExpandedGroups] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const [expandNoDate, setExpandNoDate] = useState<boolean>(true);
+
+  const toggleExpand = (dateKey: string) => {
+    setExpandedGroups((prev) => ({
+      ...prev,
+      [dateKey]: !prev[dateKey],
+    }));
+  };
+
+  const noDateToDos = groupedToDos["No Date"]?.items || [];
+  const datedToDos = Object.keys(groupedToDos).filter(
+    (key) => key !== "No Date"
+  );
+
+  const renderTodoGroup = (dateKey: string) => {
+    const isExpanded = expandedGroups[dateKey] || false;
+
+    if (dateKey === "Next 30 Days") {
+      const subgroups = Object.entries(groupedToDos[dateKey].subgroups).sort(
+        ([dateA], [dateB]) => {
+          const dateAObj = new Date(dateA);
+          const dateBObj = new Date(dateB);
+          return dateAObj.getTime() - dateBObj.getTime();
+        }
+      );
+
+      return (
+        <View key={dateKey}>
+          <TouchableOpacity
+            onPress={() => toggleExpand(dateKey)}
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingHorizontal: 0,
+              marginBottom: 4,
+              marginTop: 15,
+            }}
+          >
+            <Text
+              style={{
+                fontFamily: "Manrope_700Bold",
+                fontSize: 15,
+                color: "#484848",
+              }}
+            >
+              {dateKey}
+            </Text>
+            <AntDesign
+              name={isExpanded ? "caretdown" : "caretright"}
+              size={24}
+              color="#fd1575"
+            />
+          </TouchableOpacity>
+
+          {isExpanded &&
+            subgroups.map(([subDate, items]) => {
+              const sortedItems = [
+                ...items.filter((toDo) => !toDo.done),
+                ...items.filter((toDo) => toDo.done),
+              ];
+
+              return (
+                <View key={subDate} marginT-15>
+                  <View
+                    style={{
+                      marginBottom: 8,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        fontFamily: "Manrope_600SemiBold",
+                        fontSize: 14,
+                        color: "#919191",
+                      }}
+                    >
+                      {subDate}
+                    </Text>
+                  </View>
+
+                  {sortedItems.map((item) => (
+                    <ToDoItem key={item.id} item={item} is7Days={false} />
+                  ))}
+                </View>
+              );
+            })}
+        </View>
+      );
+    }
+
+    const sortedToDos = [
+      ...groupedToDos[dateKey].items.filter((toDo) => !toDo.done),
+      ...groupedToDos[dateKey].items.filter((toDo) => toDo.done),
+    ];
+
+    return (
+      <View key={dateKey}>
+        <TouchableOpacity
+          onPress={() => toggleExpand(dateKey)}
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingHorizontal: 0,
+            marginBottom: 4,
+            marginTop: 15,
+          }}
+        >
+          <Text
+            style={{
+              fontFamily: "Manrope_700Bold",
+              fontSize: 15,
+              color: "#484848",
+            }}
+          >
+            {dateKey}
+          </Text>
+          <AntDesign
+            name={isExpanded ? "caretdown" : "caretright"}
+            size={24}
+            color="#fd1575"
+          />
+        </TouchableOpacity>
+
+        {isExpanded &&
+          sortedToDos.map((item) => (
+            <ToDoItem
+              key={item.id}
+              item={item}
+              is7Days={dateKey === "Next 7 Days"}
+            />
+          ))}
+      </View>
+    );
+  };
+
+  return (
+    <View
+      marginB-402
+      marginT-10
+      paddingH-10
+      backgroundColor="#f9f8f7"
+      style={{ minHeight: 800, borderRadius: 9.11 }}
+      width={355}
+    >
+      {noDateToDos.length > 0 && (
+        <View key="No Date">
+          <View row spread paddingH-19 marginB-12>
+            <Text
+              text70
+              style={{
+                fontWeight: "bold",
+              }}
+            >
+              Unscheduled
+            </Text>
+            <AntDesign
+              name={expandNoDate ? "caretdown" : "caretright"}
+              size={24}
+              color="#fd1575"
+              onPress={() => {
+                setExpandNoDate(!expandNoDate);
+              }}
+            />
+          </View>
+          {expandNoDate &&
+            noDateToDos
+              .sort((a, b) => Number(a.done) - Number(b.done))
+              .map((item) => <ToDoItem key={item.id} item={item} />)}
+        </View>
+      )}
+
+      {datedToDos.map(renderTodoGroup)}
+    </View>
+  );
+};
+
+export default SingleUserChoreList;

components/pages/(tablet_pages)/chores/TabletChoresPage.tsx

@@ -1,13 +1,22 @@
-import React, { useEffect } from 'react';
-import { View, Text } from 'react-native';
-import * as ScreenOrientation from 'expo-screen-orientation';
-import TabletContainer from '../tablet_components/TabletContainer';
-import ToDosPage from '../../todos/ToDosPage';
+import React, { useEffect } from "react";
+import { View, Text } from "react-native-ui-lib";
+import * as ScreenOrientation from "expo-screen-orientation";
+import TabletContainer from "../tablet_components/TabletContainer";
+import ToDosPage from "../../todos/ToDosPage";
+import ToDosList from "../../todos/ToDosList";
+import SingleUserChoreList from "./SingleUserChoreList";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import { ImageBackground, StyleSheet } from "react-native";
+import { colorMap } from "@/constants/colorMap";
+import { ScrollView } from "react-native-gesture-handler";
 
 const TabletChoresPage = () => {
+  const { data: users } = useGetFamilyMembers();
   // Function to lock the screen orientation to landscape
   const lockScreenOrientation = async () => {
-    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+    );
   };
 
   useEffect(() => {
@@ -21,9 +30,56 @@ const TabletChoresPage = () => {
 
   return (
     <TabletContainer>
-      <ToDosPage />
+      <ScrollView horizontal>
+        <View row gap-25 padding-25>
+          {users?.map((user, index) => (
+            <View>
+              <View row centerV>
+                {user.pfp ? (
+                  <ImageBackground
+                    source={{ uri: user.pfp }}
+                    style={styles.pfp}
+                    borderRadius={13.33}
+                  />
+                ) : (
+                  <View
+                    center
+                    style={styles.pfp}
+                    backgroundColor={user.eventColor || "#00a8b6"}
+                  >
+                    <Text color="white">
+                      {user.firstName.at(0)}
+                      {user.lastName.at(0)}
+                    </Text>
+                  </View>
+                )}
+                <Text style={styles.name} marginL-15>
+                  {user.firstName}
+                </Text>
+                <Text style={[styles.name, { color: "#9b9b9b" }]} marginL-5>
+                  ({user.userType})
+                </Text>
+              </View>
+              <SingleUserChoreList user={user} />
+            </View>
+          ))}
+        </View>
+      </ScrollView>
     </TabletContainer>
   );
 };
 
+const styles = StyleSheet.create({
+  pfp: {
+    width: 46.74,
+    aspectRatio: 1,
+    borderRadius: 13.33,
+  },
+  name: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 22.43,
+    color: "#2c2c2c",
+  },
+});
+
 export default TabletChoresPage;

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -31,19 +31,21 @@ const TabletContainer: React.FC<TabletContainerProps> = ({
 const styles = StyleSheet.create({
   container: {
     backgroundColor: "white",
-    width: width,
     flex: 1,
+    borderTopColor: "#a9a9a9",
+    borderTopWidth: 1,
   },
   calendarContainer: {
     backgroundColor: "white",
     height: height,
-    width: width * 0.85,
+    width: width * 0.89,
   },
   profilesContainer: {
-    width: width * 0.15,
+    width: width * 0.11,
     height: height,
     borderLeftWidth: 1,
     borderLeftColor: "#a9a9a9",
+    backgroundColor: "white",
   },
 });
 

components/pages/todos/ToDoItem.tsx

@@ -191,7 +191,7 @@ const ToDoItem = (props: {
               >
                 <View
                   style={{
-                    backgroundColor: "#ccc",
+                    backgroundColor: member.eventColor || "#ccc",
                     justifyContent: "center",
                     alignItems: "center",
                     borderRadius: 100, // Circular shape