Merge branch 'tablet' into dev

app/(auth)/_layout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {Drawer} from "expo-router/drawer";
 import {useSignOut} from "@/hooks/firebase/useSignOut";
 import {DrawerContentScrollView,} from "@react-navigation/drawer";
@@ -10,7 +10,7 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
-import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
+import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
 import {MaterialIcons} from "@expo/vector-icons";
 import {useSetAtom} from "jotai";
 import {
@@ -20,6 +20,9 @@ import {
     userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import Constants from "expo-constants";
+import * as Device from "expo-device";
+import { DeviceType } from "expo-device";
 
 export default function TabLayout() {
     const {mutateAsync: signOut} = useSignOut();
@@ -32,14 +35,20 @@ export default function TabLayout() {
         <Drawer
             initialRouteName={"index"}
             detachInactiveScreens
-            screenOptions={{
+            screenOptions={({ navigation }) => ({
                 headerShown: true,
+                headerRight: () =>
+          Device.deviceType === DeviceType.TABLET ? (
+            <ViewSwitch navigation={navigation} />
+          ) : (
+            <></>
+          ),
         drawerStyle: {
                     width: "90%",
                     backgroundColor: "#f9f8f7",
                     height: "100%",
                 },
-            }}
+            })}
             drawerContent={(props) => {
                 return (
                     <DrawerContentScrollView {...props} style={{}}>

app/(auth)/calendar/index.tsx

@@ -4,6 +4,10 @@ import { useSetAtom } from "jotai";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
 import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
 import { colorMap } from "@/constants/colorMap";
+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() {
   const [refreshing, setRefreshing] = useState(false);
@@ -26,6 +30,10 @@ export default function Screen() {
   }, [setRefreshTrigger]);
   
   return (
+    <View style={{ backgroundColor: "white" }}>
+      {Device.deviceType === DeviceType.TABLET ? (
+        <TabletCalendarPage />
+      ) : (
         <ScrollView
       style={{ flex: 1 }}
       contentContainerStyle={{ flex: 1 }}
@@ -49,5 +57,7 @@ export default function Screen() {
     >
       <CalendarPage />
     </ScrollView>
+      )}
+    </View>
   );
 }

app/(auth)/todos/index.tsx

@@ -1,3 +1,4 @@
+import TabletChoresPage from "@/components/pages/(tablet_pages)/chores/TabletChoresPage";
 import AddChore from "@/components/pages/todos/AddChore";
 import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
@@ -8,12 +9,17 @@ 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, Text } from "react-native-ui-lib";
+import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";
+import * as Device from "expo-device";
 
 export default function Screen() {
   return (
     <ToDosContextProvider>
+      {Device.deviceType === Device.DeviceType.TABLET ? (
+        <TabletChoresPage />
+      ) : (
         <ToDosPage />
+      )}
     </ToDosContextProvider>
   );
 }

assets/svgs/MenuIcon.tsx

@@ -7,8 +7,8 @@ interface MenuIconProps extends SvgProps {
 
 const MenuIcon: React.FC<MenuIconProps> = (props) => (
   <Svg
-    width={24}
+    width={props.width || 24}
-    height={16}
+    height={props.height || 16}
     viewBox="0 0 24 16"
     fill="none"
     {...props}

assets/svgs/NavBrainDumpIcon.tsx

@@ -1,14 +1,15 @@
-import * as React from "react"
+import * as React from "react";
-import Svg, { Path, SvgProps } from "react-native-svg"
+import Svg, { Path, SvgProps } from "react-native-svg";
 const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
   <Svg
-    width={22}
+    width={props.width || 22}
-    height={28}
+    height={props.height || 28}
+    viewBox="0 0 22 28"
     fill="none"
     {...props}
   >
     <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeMiterlimit={10}
@@ -16,7 +17,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
       d="M21.1.859H3.994C2.284.859.976 2.167.976 3.877c0 1.71 1.308 3.019 3.018 3.019H21.1V27.02"
     />
     <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeMiterlimit={10}
@@ -24,7 +25,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
       d="M21.1 27.021H3.994c-1.71 0-3.018-1.308-3.018-3.018V3.878M21.097 3.878H3.991"
     />
     <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeMiterlimit={10}
@@ -32,5 +33,5 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
       d="M6.007 6.897v12.075l3.019-1.006 3.018 1.006V6.897"
     />
   </Svg>
-)
+);
-export default NavBrainDumpIcon
+export default NavBrainDumpIcon;

assets/svgs/NavCalendarIcon.tsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from "react";
-import Svg, { Path, SvgProps } from "react-native-svg"
+import Svg, { Path, SvgProps } from "react-native-svg";
 const NavCalendarIcon: React.FC<SvgProps> = (props) => (
   <Svg
-    width={28}
+    width={props.width || 28}
-    height={28}
+    height={props.height || 28}
     viewBox="0 0 28 28"
     fill="none"
     {...props}
@@ -16,5 +16,5 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
       d="M1.825 10.075h25.043m-5.565 5.567L7.39 15.64m4.638 5.566H7.39m0-19.478V4.51m13.913-2.782V4.51M6.277 26.77h16.139c1.558 0 2.337 0 2.933-.303.523-.267.949-.692 1.216-1.216.303-.595.303-1.375.303-2.933V8.962c0-1.558 0-2.337-.303-2.933a2.782 2.782 0 0 0-1.216-1.216c-.596-.303-1.375-.303-2.933-.303H6.277c-1.558 0-2.337 0-2.933.303-.523.267-.949.693-1.216 1.216-.303.596-.303 1.375-.303 2.933v13.356c0 1.558 0 2.338.303 2.933.267.523.693.95 1.216 1.216.596.303 1.375.303 2.933.303Z"
     />
   </Svg>
-)
+);
-export default NavCalendarIcon
+export default NavCalendarIcon;

assets/svgs/NavGroceryIcon.tsx

@@ -2,17 +2,18 @@ import * as React from "react";
 import Svg, { Path, SvgProps } from "react-native-svg";
 const NavGroceryIcon: React.FC<SvgProps> = (props) => (
   <Svg
-    width={29}
+    width={props.width || 29}
-    height={32}
+    height={props.width || 32}
+    viewBox="0 0 29 32"
     fill="none"
     {...props}
   >
     <Path
-      fill="#50BE0C"
+      fill={props.color || "#50BE0C"}
       d="M27.8 12c-.888-2.27-2.662-4.14-4.983-4.956-2.518-.883-5.143-.382-7.636.307-.047-1.362.068-2.728.262-4.076.11-.761.634-2.335-.668-2.389-1.081-.045-1.084 1.402-1.19 2.14-.203 1.416-.323 2.85-.284 4.281-.599-.1-1.19-.322-1.787-.446a13.485 13.485 0 0 0-2.704-.3c-1.752 0-3.48.465-4.922 1.479C1.09 10.01 0 13.446.046 16.747c.052 3.575 1.263 6.99 3.3 9.905.899 1.288 1.932 2.522 3.21 3.451 1.241.903 2.628 1.325 4.133 1.54.64.093 1.29.096 1.927-.009.557-.09 1.078-.325 1.63-.419.417-.07 1.005.258 1.408.348a6.297 6.297 0 0 0 2.096.107c2.563-.292 4.594-1.449 6.28-3.387 3.71-4.264 5.921-10.791 3.77-16.284Zm-1.69 8.743c-.474 1.663-1.225 3.182-2.195 4.608-.86 1.263-1.855 2.514-3.131 3.377-1.172.79-2.76 1.223-4.173 1.093-.719-.065-1.373-.41-2.087-.478-.8-.076-1.538.352-2.318.459-3.064.416-5.485-1.665-7.146-3.972-2.04-2.831-3.249-6.214-3.134-9.732.106-3.223 1.643-6.55 4.998-7.432 1.678-.44 3.446-.188 5.099.238.715.183 1.454.48 2.196.52.572.066 1.2-.196 1.74-.344 3.233-.89 6.873-1.105 9.124 1.855 2.08 2.732 1.925 6.666 1.027 9.808Z"
     />
     <Path
-      fill="#50BE0C"
+      fill={props.color || "#50BE0C"}
       d="M12 17.966c-.778.285-1.977.71-2.432 1.454.11-.183.221-.363-.002.002-.222.365-.113.186-.001.003-.668 1.099.272 2.53 1.547 2.347 1.258-.18 1.378-1.419 1.364-2.443a8.822 8.822 0 0 0-.095-1.282c-.043-.264-.157-.164-.382-.08ZM18.096 18.917c-.435-.304-.919-.542-1.405-.752-.118-.05-.698-.375-.832-.297.018-.01.036-.021 0 0-.036.023-.02.012-.001.001-.11.07-.096.609-.104.716a9.003 9.003 0 0 0-.01 1.534c.1 1.117 1.049 2.082 2.228 1.517 1.165-.558 1.095-2.04.124-2.719ZM12.223 3.815C12.343.28 8.347-.271 6.922.432c.371 4.075 3.48 4.164 5.301 3.383Z"
     />
   </Svg>

assets/svgs/NavToDosIcon.tsx

@@ -3,7 +3,7 @@ import Svg, { Path, SvgProps } from "react-native-svg"
 const NavToDosIcon: React.FC<SvgProps> = (props) => (
   <Svg
     width={props.width || 30}
-    height={props.width || 30}
+    height={props.height || 30}
     viewBox="0 0 30 30"
     fill="none"
     {...props}

components/pages/(tablet_pages)/ViewSwitch.tsx

@@ -0,0 +1,93 @@
+import { Text, TouchableOpacity, View } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+import { StyleSheet } from "react-native";
+import { NavigationProp } from "@react-navigation/native";
+import view from "react-native-ui-lib/src/components/view";
+
+interface ViewSwitchProps {
+  navigation: NavigationProp<any>; // Adjust according to your navigation structure
+}
+
+const ViewSwitch: React.FC<ViewSwitchProps> = ({ navigation }) => {
+  const [pageIndex, setPageIndex] = useState<number>(navigation.getState().index);
+
+  useEffect(() => {
+    setPageIndex(navigation.getState().index);
+  }, [navigation.getState().index])
+  
+  return (
+    <View
+      row
+      spread
+      style={{
+        borderRadius: 30,
+        backgroundColor: "#ebebeb",
+        alignItems: "center",
+        justifyContent: "center",
+        // iOS shadow
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        // Android shadow (elevation)
+        elevation: 0,
+      }}
+      centerV
+    >
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate("calendar");
+        }}
+      >
+        <View
+          centerV
+          centerH
+          height={54}
+          paddingH-15
+          style={ pageIndex == 1 || pageIndex == 0 ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={pageIndex == 1 || pageIndex == 0 ? "white" : "black"} style={styles.switchTxt}>
+            Calendar
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          navigation.navigate("todos");
+        }}
+      >
+        <View
+          centerV
+          centerH
+          height={54}
+          paddingH-15
+          style={pageIndex == 6 ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={pageIndex == 6 ? "white" : "black"} style={styles.switchTxt}>
+            Chores
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ViewSwitch;
+
+const styles = StyleSheet.create({
+  switchBtnActive: {
+    backgroundColor: "#ea156c",
+    borderRadius: 50,
+    width: 110,
+  },
+  switchBtn: {
+    backgroundColor: "#ebebeb",
+    borderRadius: 50,
+    width: 110,
+  },
+  switchTxt: {
+    fontSize: 16,
+    fontFamily: "Manrope_600SemiBold",
+  },
+});

components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx

@@ -0,0 +1,29 @@
+import { View, Text } from "react-native-ui-lib";
+import React, { useEffect } from "react";
+import * as ScreenOrientation from "expo-screen-orientation";
+import { InnerCalendar } from "../../calendar/InnerCalendar";
+import TabletContainer from "../tablet_components/TabletContainer";
+
+const TabletCalendarPage = () => {
+  const lockScreenOrientation = async () => {
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+    );
+  };
+
+  useEffect(() => {
+    lockScreenOrientation();
+
+    return () => {
+      ScreenOrientation.unlockAsync();
+    };
+  }, []);
+
+  return (
+    <TabletContainer>
+      <InnerCalendar />
+    </TabletContainer>
+  );
+};
+
+export default TabletCalendarPage;

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

@@ -0,0 +1,85 @@
+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
+    );
+  };
+
+  useEffect(() => {
+    lockScreenOrientation(); // Lock orientation when the component mounts
+
+    return () => {
+      // Optional: Unlock to default when the component unmounts
+      ScreenOrientation.unlockAsync();
+    };
+  }, []);
+
+  return (
+    <TabletContainer>
+      <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

@@ -0,0 +1,52 @@
+import { View, Text, ViewProps } from "react-native-ui-lib";
+import React, { ReactNode } from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import UsersList from "./UsersList";
+import { ScrollView } from "react-native-gesture-handler";
+
+interface TabletContainerProps extends ViewProps {
+  children: ReactNode;
+}
+
+const { width, height } = Dimensions.get("window");
+
+const TabletContainer: React.FC<TabletContainerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View style={styles.container}>
+      <View row>
+        <View style={styles.calendarContainer}>{children}</View>
+        <View style={styles.profilesContainer}>
+          <ScrollView>
+            <UsersList />
+          </ScrollView>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+    flex: 1,
+    borderTopColor: "#a9a9a9",
+    borderTopWidth: 1,
+  },
+  calendarContainer: {
+    backgroundColor: "white",
+    height: height,
+    width: width * 0.89,
+  },
+  profilesContainer: {
+    width: width * 0.11,
+    height: height,
+    borderLeftWidth: 1,
+    borderLeftColor: "#a9a9a9",
+    backgroundColor: "white",
+  },
+});
+
+export default TabletContainer;

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

@@ -0,0 +1,67 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import { ImageBackground, StyleSheet } from "react-native";
+import { colorMap } from "@/constants/colorMap";
+
+const UsersList = () => {
+  const { data: familyMembers } = useGetFamilyMembers();
+
+  const capitalizeFirstLetter = (str: string) => {
+    if (!str) return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  };
+
+  return (
+    <View centerH paddingT-10>
+      {familyMembers?.map((member, index) => (
+        <>
+          {member.pfp ? (
+            <ImageBackground
+              key={index}
+              source={{ uri: member.pfp }}
+              style={styles.pfp}
+              borderRadius={100}
+            />
+          ) : (
+            <View
+              key={index}
+              style={styles.pfp}
+              center
+              backgroundColor={member.eventColor || colorMap.teal}
+              children={
+                <Text color="white">
+                  {member.firstName.at(0)}
+                  {member.lastName.at(0)}
+                </Text>
+              }
+            />
+          )}
+          <Text style={styles.fName}>{member.firstName}</Text>
+          <Text style={styles.role}>{capitalizeFirstLetter(member.userType)}</Text>
+        </>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  pfp: {
+    aspectRatio: 1,
+    width: 113,
+    borderRadius: 100,
+    marginBottom: 8,
+  },
+  fName: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 18.15,
+  },
+  role: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 12.95,
+    color: "#9b9b9b",
+    marginBottom: 20,
+  },
+});
+
+export default UsersList;

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

package.json

@@ -64,6 +64,7 @@
     "expo-localization": "~15.0.3",
     "expo-notifications": "~0.28.19",
     "expo-router": "~3.5.20",
+    "expo-screen-orientation": "~7.0.5",
     "expo-splash-screen": "~0.27.6",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.7",

yarn.lock

@@ -5543,6 +5543,11 @@ expo-router@~3.5.20:
     react-native-helmet-async "2.0.4"
     schema-utils "^4.0.1"
 
+expo-screen-orientation@~7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-7.0.5.tgz#0a517982151c6519fa4b10ce27047de39c1f92cf"
+  integrity sha512-1j0MzVzYpjKQo4BWowQ3ZYwC3OnddX/8k06C8VYTAxMyd8ou1k+rG4tm+GIV2n2RSzc3g7cfPlQwSYr3/SGmbg==
+
 expo-splash-screen@0.27.5:
   version "0.27.5"
   resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.27.5.tgz#bcc1ebb4e761e19a1f2112469f3d424a36fb1e2c"