feat: New care group screen

client/components/nav_buttons/BackButton.tsx

@@ -11,7 +11,7 @@ export function BackButton() {
 
   return (
     <IconButton
-      className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
+      className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl border border-carewallet-lightgray bg-carewallet-white"
       mode="contained"
       icon={({ color }) => <ArrowLeft fill={color} />}
       onPress={() => navigation.goBack()}

client/components/profile/AddButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import Plus from '../../assets/profile/plus.svg';
+import { AppStackNavigation } from '../../navigation/types';
+
+export function AddButtom() {
+  const navigation = useNavigation<AppStackNavigation>();
+
+  return (
+    <IconButton
+      className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-blue"
+      mode="contained"
+      icon={({ color }) => <Plus fill={color} />}
+      onPress={() => navigation.goBack()}
+    />
+  );
+}

client/components/profile/CareTaker.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { useNavigation } from '@react-navigation/native';
+
+import { AppStackNavigation } from '../../navigation/types';
+import { GroupRole, Role } from '../../types/group';
+import { User } from '../../types/user';
+
+interface CareProps {
+  user: User | undefined;
+  role: GroupRole | undefined;
+}
+
+export function CareTaker({ user, role }: CareProps) {
+  if (!user) return null;
+  const navigation = useNavigation<AppStackNavigation>();
+  // const { user: signedInUser, group } = useCareWalletContext();
+  // const [activeUser, setActiveUser] = useState(signedInUser.userID);
+
+  const handlePress = () => {
+    navigation.navigate('Profile');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <View className="mb-2 flex flex-row items-center rounded-xl border border-carewallet-lightgray bg-carewallet-white">
+        <View className="mb-3 ml-3 h-20 w-20 rounded-full border border-carewallet-lightgray bg-carewallet-white" />
+        <View className="mt-5 flex h-fit max-h-fit min-h-fit flex-row items-center">
+          <View className="mb-5 ml-8">
+            <Text className="flex-wrap text-left font-carewallet-manrope-semibold text-xl text-carewallet-black">
+              {user.first_name} {user.last_name}
+            </Text>
+            <View className="flex w-[60vw] flex-row pt-3">
+              <View className="flex flex-col">
+                <Text className="items-center justify-center text-left font-carewallet-manrope text-xs text-carewallet-black">
+                  {`${role?.role} ${role?.role !== Role.PATIENT ? 'CARETAKER' : ''}`}
+                </Text>
+                <Text className="items-center justify-center text-left font-carewallet-manrope text-xs  text-carewallet-black">
+                  {user.phone ? user.phone : user.email}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}

client/navigation/AppNavigation.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import LoginPage from '../screens/LoginPage';
+import { CareGroup } from '../screens/Profile/CareGroup';
 import { TaskCreation } from '../screens/TaskCreation';
 import { TaskType } from '../screens/TaskType';
 import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
@@ -29,6 +30,11 @@ export function AppNavigation() {
         options={{ headerShown: false }}
         component={TaskCreation}
       />
+      <AppStack.Screen
+        name="CareGroup"
+        options={{ headerShown: false }}
+        component={CareGroup}
+      />
     </AppStack.Navigator>
   );
 }

client/navigation/AppStackBottomTabNavigator.tsx

@@ -10,6 +10,7 @@ import Home from '../assets/bottom-nav/home.svg';
 import User from '../assets/bottom-nav/user.svg';
 import TimelineCalendarScreen from '../screens/Calendar';
 import MedicationList from '../screens/MedicationList';
+import { CareGroup } from '../screens/Profile/CareGroup';
 import PatientView from '../screens/Profile/PatientView';
 import Profile from '../screens/Profile/Profile';
 import SingleTaskScreen from '../screens/SingleTask';
@@ -83,6 +84,11 @@ export function ProfileNavigation() {
         options={{ headerShown: false }}
         component={PatientView}
       />
+      <AppStack.Screen
+        name="CareGroup"
+        options={{ headerShown: false }}
+        component={CareGroup}
+      />
     </AppStack.Navigator>
   );
 }

client/navigation/types.ts

@@ -17,6 +17,7 @@ export type AppStackParamList = {
   CalendarContainer: { screen: string; params: { screen: string } } | undefined;
   CalendarTopNav: undefined;
   TaskCreation: { taskType: string };
+  CareGroup: undefined;
 };
 
 export type AppStackNavigation = NavigationProp<AppStackParamList>;

client/screens/Profile/CareGroup.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+
+import { useNavigation } from '@react-navigation/native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Button, Text } from 'react-native-paper';
+
+import Settings from '../../assets/profile/settings.svg';
+import { BackButton } from '../../components/nav_buttons/BackButton';
+import { AddButtom } from '../../components/profile/AddButton';
+import { CareTaker } from '../../components/profile/CareTaker';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { AppStackNavigation } from '../../navigation/types';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
+
+export function CareGroup() {
+  const navigation = useNavigation<AppStackNavigation>();
+  const { user: signedInUser, group } = useCareWalletContext();
+  const [activeUser] = useState(signedInUser.userID);
+  const { roles, rolesAreLoading } = useGroup(group.groupID);
+  const { users, usersAreLoading } = useUsers(
+    roles?.map((role) => role.user_id) ?? []
+  );
+
+  if (rolesAreLoading || usersAreLoading) {
+    return (
+      <View className="w-full flex-1 items-center justify-center bg-carewallet-white text-3xl">
+        <ActivityIndicator size="large" />
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  if (!roles || !users) {
+    return (
+      <View className="w-full flex-1 items-center justify-center bg-carewallet-white text-3xl">
+        <Text className="text-xl">Could Not Load Profile...</Text>
+      </View>
+    );
+  }
+  return (
+    <GestureHandlerRootView className="bg-carewallet-white pt-5">
+      <View className="flex flex-row items-center border-b border-carewallet-lightgray pb-5">
+        <View className="pl-2">
+          <BackButton />
+        </View>
+        <View className="mx-auto ">
+          <Text className="text-center font-carewallet-manrope-bold text-lg text-carewallet-blue ">
+            Care Group
+          </Text>
+        </View>
+        <View className="pr-2">
+          <AddButtom />
+        </View>
+      </View>
+
+      <ScrollView>
+        <View className="bg-carewallet-lightergray">
+          <View className="flex h-[10vh] items-center">
+            <View className="h-[10vh] scroll-pb-96">
+              <View className="flex w-full flex-row justify-end text-carewallet-black">
+                <Button
+                  className="mx-auto mt-2 h-[50px] w-[96vw] items-start justify-center rounded-xl border-carewallet-lightgray bg-carewallet-white"
+                  textColor="#000000"
+                  mode="outlined"
+                  icon={() => <Settings />} // Example using FontAwesome icon
+                >
+                  <Text className="font-carewallet-manrope-semibold">
+                    {' '}
+                    Manage Caregiver Capabiities{' '}
+                  </Text>
+                </Button>
+              </View>
+            </View>
+          </View>
+
+          <View className="mx-2 mt-2 flex h-[180vh] w-[96vw] flex-col items-center rounded-xl">
+            {users
+              .filter((user) => user.user_id !== activeUser)
+              .map((user) => (
+                <View
+                  key={user.user_id} // <-- Add key prop here
+                  onTouchEnd={() => {
+                    navigation.navigate('Profile');
+                  }}
+                >
+                  <CareTaker
+                    user={user}
+                    role={roles.find((role) => role.user_id === user.user_id)}
+                  />
+                </View>
+              ))}
+            <View className="h-[70vh] pt-10"></View>
+          </View>
+        </View>
+      </ScrollView>
+    </GestureHandlerRootView>
+  );
+}

client/screens/Profile/Profile.tsx

@@ -78,7 +78,11 @@ export default function Profile() {
           />
         </View>
         <View className="mb-auto flex-1 items-center">
-          <CircleCard Icon={<Settings />} ButtonText="Settings" />
+          <CircleCard
+            Icon={<Settings />}
+            ButtonText="Settings"
+            onTouchEnd={() => navigation.navigate('CareGroup')}
+          />
         </View>
         <View className="mb-5 items-center">
           <CircleCard

client/screens/TaskCreation.tsx

@@ -8,11 +8,11 @@ import {
 } from 'react-native-gesture-handler';
 
 import { BackButton } from '../components/nav_buttons/BackButton';
-import { AddressComponent } from '../components/task_creation/AddressComponent.tsx';
-import { RadioGroup } from '../components/task_creation/RadioGroup.tsx';
-import { TextInputLine } from '../components/task_creation/TextInputLine.tsx';
-import { TextInputParagraph } from '../components/task_creation/TextInputParagraph.tsx';
-import { TaskCreationJson } from '../types/task-creation-json.ts';
+import { AddressComponent } from '../components/task_creation/AddressComponent';
+import { RadioGroup } from '../components/task_creation/RadioGroup';
+import { TextInputLine } from '../components/task_creation/TextInputLine';
+import { TextInputParagraph } from '../components/task_creation/TextInputParagraph';
+import { TaskCreationJson } from '../types/task-creation-json';
 
 type ParamList = {
   mt: {

client/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "jsx": "react",
-    "strict": true,
-    "allowImportingTsExtensions": true
+    "strict": true
+    // "allowImportingTsExtensions": true
   }
 }

go.mod

@@ -0,0 +1,3 @@
+module carewallet
+
+go 1.21.6