Merge branch 'bugfix/cycleimport' into feature/addtitletotaskmodel

client/components/profile/Header.tsx

@@ -5,9 +5,11 @@ import { useNavigation } from '@react-navigation/native';
 import { styled } from 'nativewind';
 
 import ArrowLeft from '../../assets/arrow-left.svg';
+import Edit from '../../assets/profile/edit.svg';
 import Ellipse from '../../assets/profile/ellipse.svg';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
 import { AppStackNavigation } from '../../navigation/AppNavigation';
-import { GroupRole } from '../../types/group';
+import { GroupRole, Role } from '../../types/group';
 import { User } from '../../types/user';
 import { ProfileTopHeader } from './ProfileTopHeader';
 
@@ -19,6 +21,7 @@ interface HeaderProps {
 }
 
 export function Header({ user, role }: HeaderProps) {
+  const { user: signedInUser } = useCareWalletContext();
   const navigate = useNavigation<AppStackNavigation>();
 
   if (!user) return null;
@@ -27,14 +30,18 @@ export function Header({ user, role }: HeaderProps) {
     <>
       <View className="z-10 h-fit max-h-fit min-h-fit flex-grow-0 items-center bg-carewallet-black">
         <View className="w-full justify-center align-middle">
-          <ProfileTopHeader
-            user={user}
-            onTouchEndLeft={navigate.goBack}
-            leftButtonText={<ArrowLeft />}
-            rightButtonText="Edit"
-          />
+          {role?.role === Role.PATIENT ||
+          signedInUser.userID !== user.user_id ? (
+            <ProfileTopHeader
+              user={user}
+              onTouchEndLeft={navigate}
+              leftButtonText={<ArrowLeft />}
+            />
+          ) : (
+            <ProfileTopHeader user={user} rightButtonText={<Edit />} />
+          )}
           <Text className="items-center justify-center text-center text-xl  text-carewallet-white">
-            {`${role?.role.charAt(0)}${role?.role.slice(1).toLowerCase()} Caregiver`}
+            {`${role?.role.charAt(0)}${role?.role.slice(1).toLowerCase()} ${role?.role !== Role.PATIENT ? 'Caretaker' : ''}`}
           </Text>
           <Text className="items-center justify-center text-center text-lg  text-carewallet-white">
             {user.phone ? user.phone : user.email}

client/components/profile/HealthStats.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+
+export function HealthStats() {
+  const [canPress, setCanPress] = useState(true);
+
+  return (
+    <FlatList
+      keyboardShouldPersistTaps="always"
+      className="mt-10 h-fit max-h-fit flex-grow-0"
+      onScrollBeginDrag={() => setCanPress(false)}
+      onScrollEndDrag={() => setCanPress(true)}
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      data={Array.from({ length: 10 }, (_, i) => i)}
+      renderItem={({ index }) => (
+        <Pressable
+          key={index}
+          onTouchEnd={() => {
+            if (canPress) console.log('Pressed');
+          }}
+        >
+          <View className="items-center px-2">
+            <View className="z-10 h-48 w-32 rounded-3xl border border-carewallet-black bg-carewallet-white" />
+          </View>
+        </Pressable>
+      )}
+    />
+  );
+}

client/components/profile/ProfileTopHeader.tsx

@@ -1,38 +1,46 @@
 import React from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import { AppStackNavigation } from '../../navigation/AppNavigation';
 import { User } from '../../types/user';
 
 interface ProfileTopHeaderProps {
   user: User;
-  onTouchEndLeft?: () => void;
+  onTouchEndLeft?: AppStackNavigation;
   leftButtonText?: JSX.Element | string;
   onTouchEndRight?: () => void;
-  rightButtonText?: string;
+  rightButtonText?: JSX.Element | string;
 }
 
 export function ProfileTopHeader({
   user,
-  onTouchEndLeft,
   leftButtonText,
-  onTouchEndRight,
   rightButtonText
 }: ProfileTopHeaderProps) {
+  const navigation = useNavigation<AppStackNavigation>();
   return (
-    <View className="flex w-full flex-row items-center justify-center">
-      <Pressable className="ml-5 mr-auto" onTouchEnd={onTouchEndLeft}>
-        <View className="mt-14 h-7 w-14 items-center justify-center self-start rounded-lg bg-carewallet-white">
-          {leftButtonText}
-        </View>
-      </Pressable>
-      <Text className="mt-14 self-center text-center text-3xl font-extrabold text-carewallet-white">
+    <View className="flex flex-row">
+      {leftButtonText && (
+        <IconButton
+          className="absolute mt-14 flex h-[40px] self-start rounded-xl bg-carewallet-gray"
+          mode="contained"
+          icon={() => leftButtonText}
+          onPress={() => navigation.goBack()}
+        />
+      )}
+      <Text className="mx-auto mt-14 flex-wrap self-center text-center text-3xl font-semibold text-carewallet-white">
         {user.first_name} {user.last_name}
       </Text>
-      <Pressable className="ml-auto mr-5" onTouchEnd={onTouchEndRight}>
-        <View className="text mt-14 h-7 w-14 items-center justify-center self-start rounded-lg bg-carewallet-white">
-          <Text className="text-md">{rightButtonText}</Text>
-        </View>
-      </Pressable>
+      {rightButtonText && (
+        <IconButton
+          className="absolute right-0 mr-2 mt-14 flex h-[40px] self-start rounded-xl bg-carewallet-gray"
+          mode="contained"
+          icon={() => rightButtonText}
+        />
+      )}
     </View>
   );
 }

client/navigation/AppNavigation.tsx

@@ -1,23 +1,9 @@
 import React from 'react';
 
-import { NavigationProp } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
 import LoginPage from '../screens/LoginPage';
 import { TaskType } from '../screens/TaskType';
 import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
-
-export type AppStackParamList = {
-  Main: undefined;
-  Home: undefined;
-  Login: undefined;
-  Profile: undefined;
-  TaskType: undefined;
-};
-
-export type AppStackNavigation = NavigationProp<AppStackParamList>;
-
-const AppStack = createNativeStackNavigator<AppStackParamList>();
+import { AppStack } from './types';
 
 export function AppNavigation() {
   return (

client/navigation/AppStackBottomTabNavigator.tsx

@@ -8,7 +8,9 @@ import Calendar from '../assets/bottom-nav/calendar.svg';
 import Home from '../assets/bottom-nav/home.svg';
 import User from '../assets/bottom-nav/user.svg';
 import MedicationList from '../screens/MedicationList';
-import Profile from '../screens/Profile';
+import PatientView from '../screens/Profile/PatientView';
+import Profile from '../screens/Profile/Profile';
+import { AppStack } from './types';
 
 const AppStackBottomTab = createBottomTabNavigator();
 
@@ -48,14 +50,31 @@ export function AppStackBottomTabNavigator() {
         component={MedicationList}
       />
       <AppStackBottomTab.Screen
-        name="Profile"
+        name="ProfileScreens"
         options={{
           headerShown: false,
           tabBarIcon: ({ color }) => <User color={color} />,
           tabBarLabel: () => <Text></Text>
         }}
-        component={Profile}
+        component={ProfileNavigation}
       />
     </AppStackBottomTab.Navigator>
   );
 }
+
+export function ProfileNavigation() {
+  return (
+    <AppStack.Navigator>
+      <AppStack.Screen
+        name="Profile"
+        options={{ headerShown: false }}
+        component={Profile}
+      />
+      <AppStack.Screen
+        name="PatientView"
+        options={{ headerShown: false }}
+        component={PatientView}
+      />
+    </AppStack.Navigator>
+  );
+}

client/navigation/types.ts

@@ -0,0 +1,19 @@
+import { NavigationProp } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+export type AppStackParamList = {
+  Main: undefined;
+  Home: undefined;
+  Login: undefined;
+  Profile: undefined;
+  PatientView: undefined;
+  ProfileScreens: undefined;
+  Landing: undefined;
+  Calendar: undefined;
+  Notifications: undefined;
+  TaskType: undefined;
+};
+
+export type AppStackNavigation = NavigationProp<AppStackParamList>;
+
+export const AppStack = createNativeStackNavigator<AppStackParamList>();

client/screens/LoginPage.tsx

@@ -5,7 +5,7 @@ import { onAuthStateChanged } from '@firebase/auth';
 import { useNavigation } from '@react-navigation/native';
 
 import { auth } from '../firebase.config';
-import { AppStackNavigation } from '../navigation/AppNavigation';
+import { AppStackNavigation } from '../navigation/types';
 import { useAuth } from '../services/auth';
 
 export default function LoginPage() {

client/screens/Profile/PatientView.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+import { CircleCard } from '../../components/profile/CircleCard';
+import { Header } from '../../components/profile/Header';
+import { HealthStats } from '../../components/profile/HealthStats';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
+import { Role } from '../../types/group';
+
+export default function PatientView() {
+  const { group } = useCareWalletContext();
+  const { roles } = useGroup(group.groupID);
+  const { users } = useUsers(roles?.map((role) => role.user_id) ?? []);
+  const patientId = roles?.find((role) => role.role === Role.PATIENT)?.user_id;
+
+  return (
+    <View className="flex flex-1 flex-col">
+      <Header
+        user={users?.find((user) => user.user_id === patientId)}
+        role={roles?.find((role) => role.user_id === patientId)}
+      />
+      <View className="mb-5 items-center">
+        <CircleCard ButtonText="View Current Health Stats" />
+      </View>
+      <View className="h-[35vh] w-[80vw] self-center rounded-lg border">
+        <Text className="text-md pt-2 text-center font-semibold text-carewallet-black">
+          View Past Health Stats
+        </Text>
+        <HealthStats />
+      </View>
+      <View className="flex flex-row space-x-10">
+        <Pressable className="ml-10 mt-5 h-[10vh] w-[35vw] rounded-lg border">
+          <Text className="my-auto text-center text-lg text-carewallet-black">
+            Upload Files
+          </Text>
+        </Pressable>
+        <Pressable className="ml-2 mt-5 h-[10vh] w-[35vw] rounded-lg border">
+          <Text className="my-auto text-center text-lg text-carewallet-black">
+            View Files
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

client/screens/Profile.tsx → client/screens/Profile/Profile.tsx

@@ -1,15 +1,19 @@
 import React, { useState } from 'react';
 import { ActivityIndicator, Text, View } from 'react-native';
 
-import { CircleCard } from '../components/profile/CircleCard';
-import { Group } from '../components/profile/Group';
-import { Header } from '../components/profile/Header';
-import { useCareWalletContext } from '../contexts/CareWalletContext';
-import { useAuth } from '../services/auth';
-import { useGroup } from '../services/group';
-import { useUsers } from '../services/user';
+import { useNavigation } from '@react-navigation/native';
+
+import { CircleCard } from '../../components/profile/CircleCard';
+import { Group } from '../../components/profile/Group';
+import { Header } from '../../components/profile/Header';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { AppStackNavigation } from '../../navigation/types';
+import { useAuth } from '../../services/auth';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
 
 export default function Profile() {
+  const navigation = useNavigation<AppStackNavigation>();
   const { user: signedInUser, group } = useCareWalletContext();
   const [activeUser, setActiveUser] = useState(signedInUser.userID);
   const { roles, rolesAreLoading } = useGroup(group.groupID);
@@ -61,7 +65,10 @@ export default function Profile() {
         </View>
       </View>
       <View className="mb-5 items-center">
-        <CircleCard ButtonText="View Patient Information" />
+        <CircleCard
+          ButtonText="View Patient Information"
+          onTouchEnd={() => navigation.navigate('PatientView')}
+        />
       </View>
       <View className="mb-auto flex-1 items-center">
         <CircleCard ButtonText="Settings" />

client/screens/TaskType.tsx

@@ -19,7 +19,7 @@ import { Button, Text } from 'react-native-paper';
 
 import { BackButton } from '../components/TaskType/BackButton';
 import { CloseButton } from '../components/TaskType/CloseButton';
-import { AppStackNavigation } from '../navigation/AppNavigation';
+import { AppStackNavigation } from '../navigation/types';
 import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
 
 export function TaskType() {
@@ -99,7 +99,7 @@ export function TaskType() {
         renderItem={({ item }) => (
           <TouchableOpacity
             className="m-2 h-[50px] overflow-hidden rounded-xl"
-            onPress={() => navigation.navigate('New ' + item + ' Task')}
+            onPress={() => navigation.navigate('Home')}
           >
             <Button
               className="m-2 h-[50px] items-center justify-center rounded-xl"

client/tailwind.config.js

@@ -6,7 +6,13 @@ module.exports = {
       'carewallet-white': '#FFFFFF',
       'carewallet-black': '#000000',
       'carewallet-gray': '#BEBEBE',
-      'carewallet-lightgray': '#D9D9D9'
+      'carewallet-lightgray': '#D9D9D9',
+      'carewallet-blue': '#1A56C4',
+      'carewallet-green': '#4DB8A6',
+      'carewallet-coral': '#FF6258',
+      'carewallet-yellow': '#FFD9900',
+      'carewallet-purple': '#990099',
+      'carewallet-pink': '#FC2C51'
     }
   },
   plugins: []