Feature/task-list-screen

backend/db/migrations/1.user.sql

@@ -29,6 +29,7 @@ VALUES
   ('8Sy7xBkGiGQv4ZKphcQfY8PxAqw1', 'Narayan', 'Sharma', '[email protected]', '', ''),
   ('iL7PnjS4axQffmlPceobjUUZ9DF2', 'Caitlin', 'Flynn', '[email protected]', '', ''),
   ('5JgN2PQxCRM9VoCiiFPlQPNqkL32', 'Linwood', 'Blaisdell', '[email protected]', '', ''),
+  ('P03ggWcw63N0RSY7ltbkeBoR6bd2', 'Chris', 'Wyatt', '[email protected]', '', ''),
   ('9rIMSUo6qNf8ToTABkCfNqnByRv1', 'Haley', 'Martin', '[email protected]', '', '')
 
   -- End Care-Wallet Team

backend/db/migrations/2.group.sql

@@ -50,7 +50,6 @@ VALUES
   (5, 'onrQs8HVGBVMPNz4Fk1uE94bSxg1', 'SECONDARY'),
   (5, '8Sy7xBkGiGQv4ZKphcQfY8PxAqw1', 'SECONDARY'),
   (5, 'iL7PnjS4axQffmlPceobjUUZ9DF2', 'SECONDARY'),
-  (5, '9rIMSUo6qNf8ToTABkCfNqnByRv1', 'SECONDARY')
-
+  (5, 'P03ggWcw63N0RSY7ltbkeBoR6bd2', 'SECONDARY')
   -- End Care-Wallet Team
 ;

backend/db/migrations/3.task.sql

@@ -44,7 +44,9 @@ VALUES
   ('task 1', 1, 'user2', '2024-02-03 10:45:00', '2024-02-05 10:00:00', '2024-02-05 11:00:00', 'Pick up medication from pharmacy', 'INCOMPLETE', 'med_mgmt'),
   ('task 2', 2, 'user3', '2024-02-20 23:59:59', '2024-02-10 14:30:00', NULL, 'Schedule doctor appointment', 'INCOMPLETE', 'other'),
   ('task 3', 3, 'user4', '2020-02-05 11:00:00', NULL, '2024-02-20 23:59:59', 'Submit insurance claim', 'PARTIAL', 'financial'),
-  ('task 4', 4, 'user1', '2006-01-02 15:04:05', NULL, NULL, 'Refill water pitcher', 'COMPLETE', 'other')
+  ('task 4', 4, 'user1', '2006-01-02 15:04:05', NULL, NULL, 'Refill water pitcher', 'COMPLETE', 'other'),
+  ('test tile', 5, 'P03ggWcw63N0RSY7ltbkeBoR6bd2', '2020-02-05 11:00:00', NULL, '2024-02-20 23:59:59', 'Submit insurance claim', 'PARTIAL', 'financial'),
+  ('test tile', 5, 'P03ggWcw63N0RSY7ltbkeBoR6bd2', '2024-02-20 23:59:59', '2024-02-10 14:30:00', NULL, 'Schedule doctor appointment', 'INCOMPLETE', 'med_mgmt')
 ;
 
 INSERT INTO task_assignees (task_id, user_id, assignment_status, assigned_by, assigned_date)

backend/db/migrations/4.label.sql

@@ -23,13 +23,17 @@ VALUES
   (2, 'Appointments', 'green'),
   (3, 'Financial', 'orange'),
   (4, 'Household', 'purple'),
-  (1, 'Household', 'purple')
+  (1, 'Household', 'purple'),
+  (5, 'Financial', 'orange'),
+  (5, 'Appointments', 'green')
 ;
 
 INSERT INTO task_labels (task_id, group_id, label_name)
 VALUES
   (1, 1, 'Medication'),
   (2, 2, 'Appointments'),
   (3, 3, 'Financial'),
-  (4, 4, 'Household')
+  (4, 4, 'Household'),
+  (5, 5, 'Financial'),
+  (6, 5, 'Appointments')
 ;

backend/schema/tasks/task_test.go

@@ -114,7 +114,7 @@ func TestTaskGroup(t *testing.T) {
 		}
 
 		if !reflect.DeepEqual(expectedTasks, responseTasks) {
-			t.Error("Result was not correct")
+			t.Error("Result was not correct", responseTasks, "Expected", expectedTasks)
 			return
 		}
 	})

client/components/DropDownItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+function DropdownItem({ label }: { label: string }) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.dropdownLabel}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10
+  },
+  dropdownLabel: {
+    fontSize: 18,
+    color: 'care-wallet-black',
+    marginRight: 10
+  },
+  line: {
+    flex: 1,
+    height: 1,
+    backgroundColor: 'gray'
+  }
+});
+
+export { DropdownItem };

client/components/TaskInfoCard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export function TaskInfoComponent({
+  name,
+  label,
+  category,
+  type,
+  date
+}: {
+  name: string;
+  label: string;
+  category: string;
+  type: string;
+  date: Date;
+}) {
+  const formattedStartDate = date ? new Date(date).toLocaleDateString() : 'N/A';
+
+  return (
+    <View className="border-black bg-white mb-6 rounded-lg border p-4">
+      <View className="mb-2 flex flex-row justify-between">
+        <Text className="self-end font-bold">{`Task #${name}`}</Text>
+        <Text className="self-start">{label}</Text>
+      </View>
+      <Text className="mt-3">{`${category} | ${type}`}</Text>
+      <Text className="mt-3">{`${formattedStartDate}`}</Text>
+    </View>
+  );
+}

client/components/task-type/BackButton.tsx → client/components/TaskType/BackButton.tsx

@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { IconButton } from 'react-native-paper';
 
 import BackArrow from '../../assets/back-arrow.svg';
-import { AppStackNavigation } from '../../navigation/types';
+import { AppStackNavigation } from '../../navigation/AppNavigation';
 
 export function BackButton() {
   const navigation = useNavigation<AppStackNavigation>();

client/navigation/AppStackBottomTabNavigator.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
 import Bell from '../assets/bottom-nav/bell.svg';
 import Calendar from '../assets/bottom-nav/calendar.svg';
@@ -11,9 +12,11 @@ import TimelineCalendarScreen from '../screens/Calendar';
 import MedicationList from '../screens/MedicationList';
 import PatientView from '../screens/Profile/PatientView';
 import Profile from '../screens/Profile/Profile';
+import TaskList from '../screens/TaskList';
 import { AppStack } from './types';
 
 const AppStackBottomTab = createBottomTabNavigator();
+const TopTab = createMaterialTopTabNavigator();
 
 export function AppStackBottomTabNavigator() {
   return (
@@ -39,7 +42,7 @@ export function AppStackBottomTabNavigator() {
           tabBarIcon: ({ color }) => <Calendar color={color} />,
           tabBarLabel: () => <Text></Text>
         }}
-        component={TimelineCalendarScreen}
+        component={CalendarTopTapNavigator}
       />
       <AppStackBottomTab.Screen
         name="Notifications"
@@ -79,3 +82,12 @@ export function ProfileNavigation() {
     </AppStack.Navigator>
   );
 }
+
+function CalendarTopTapNavigator() {
+  return (
+    <TopTab.Navigator>
+      <TopTab.Screen name="TaskList" component={TaskList} />
+      <TopTab.Screen name="Calendar" component={TimelineCalendarScreen} />
+    </TopTab.Navigator>
+  );
+}

client/package.json

@@ -18,25 +18,22 @@
     "@gorhom/bottom-sheet": "^4.6.1",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/material-top-tabs": "^6.6.13",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@tanstack/react-query": "^5.18.1",
     "@types/react": "^18.2.55",
     "axios": "^1.6.4",
     "clsx": "^2.1.0",
-    "date-fns": "^3.3.1",
-    "expo": "50.0.6",
     "expo": "^50.0.11",
     "expo-document-picker": "~11.10.1",
     "expo-file-system": "~16.0.6",
     "expo-status-bar": "~1.11.1",
     "firebase": "^10.7.2",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.73.4",
-    "react-native-calendars": "^1.1303.0",
+    "react-native-calendars": "^1.1304.1",
     "react-native-dropdown-picker": "^5.4.6",
     "react-native-gesture-handler": "~2.14.0",
     "react-native-paper": "^5.12.3",
@@ -48,7 +45,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.0",
     "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "6.18.0",