feat: filter impl and bg colors

client/components/calendar/TaskInfoCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
+import clsx from 'clsx';
 import moment from 'moment';
 
 import Calendar from '../../assets/Date_today.svg';
@@ -45,15 +46,15 @@ function categoryToColor(category: string) {
 function categoryToBGColor(category: string) {
   switch (TaskTypeDescriptions[category]) {
     case 'Medication Management':
-      return 'carewallet-pink/20';
+      return 'bg-carewallet-pink/20';
     case 'Doctor Appointment':
-      return 'carewallet-pink/20';
+      return 'bg-carewallet-pink/20';
     case 'Financial Task':
-      return 'carewallet-green/10';
+      return 'bg-carewallet-green/10';
     case 'OTHER':
-      return 'carewallet-white';
+      return 'bg-carewallet-white';
     default:
-      return 'carewallet-white';
+      return 'bg-carewallet-white';
   }
 }
 
@@ -109,7 +110,10 @@ export function TaskInfoComponent({
       </View>
       <View className="space-y-2">
         <View
-          className={`mr-auto flex flex-row items-center space-x-2 rounded-full border bg-${categoryToBGColor(category)} border-carewallet-lightgray px-2 py-1`}
+          className={clsx(
+            'mr-auto flex flex-row items-center space-x-2 rounded-full border border-carewallet-lightgray px-2 py-1',
+            categoryToBGColor(category)
+          )}
         >
           <View>
             {CategoryIconsMap[TypeToCategoryMap[task?.task_type ?? 'Other']]}

client/components/filter/FilterBottomSheet.tsx

@@ -14,14 +14,26 @@ export function FilterBottomSheet({
   snapPoints,
   renderBackdrop,
   users,
-  statuses
+  statuses,
+  setSortBy
+  // setTaskStatus,
+  // setAssignedTo
 }: {
   bottomSheetRef: React.RefObject<BottomSheetMethods>;
   snapPoints: string[];
   renderBackdrop: (props: BottomSheetDefaultBackdropProps) => React.JSX.Element;
   users: User[];
   statuses: string[];
+  setSortBy: (sortBy: string) => void;
+  // setTaskStatus: (taskStatus: string[]) => void;
+  // setAssignedTo: (assignedTo: string[]) => void;
 }) {
+  // Event handlers for filter options
+  const handleSortByChange = (sortBy: string) => {
+    setSortBy(sortBy);
+    console.log('Selected Sort By:', sortBy);
+  };
+
   return (
     <BottomSheet
       ref={bottomSheetRef}
@@ -43,17 +55,23 @@ export function FilterBottomSheet({
             items={[
               {
                 title: 'All Tasks',
-                element: <FilterCircleCard selected={true} title="All Tasks" />
+                element: (
+                  <FilterCircleCard
+                    selected={true}
+                    title="All Tasks"
+                    onPress={() => handleSortByChange('All Tasks')}
+                  />
+                )
               },
               {
                 title: 'Quick Tasks',
                 element: (
-                  <FilterCircleCard selected={false} title="Quick Tasks" />
+                  <FilterCircleCard
+                    selected={false}
+                    title="Quick Tasks"
+                    onPress={() => handleSortByChange('Quick Tasks')}
+                  />
                 )
-              },
-              {
-                title: 'Tasks',
-                element: <FilterCircleCard selected={false} title="Tasks" />
               }
             ]}
           />

client/components/filter/FilterCircleCard.tsx

@@ -5,15 +5,18 @@ import clsx from 'clsx';
 
 export function FilterCircleCard({
   selected,
-  title
+  title,
+  onPress
 }: {
   selected: boolean;
   title: string;
+  onPress?: () => void;
 }) {
   const [isSelected, setIsSelected] = useState(selected);
 
   const handleSelect = () => {
     setIsSelected(!isSelected);
+    onPress && onPress();
   };
 
   const circleClasses = clsx(
@@ -25,10 +28,7 @@ export function FilterCircleCard({
   );
 
   return (
-    <View
-      className={circleClasses}
-      onTouchEnd={handleSelect} // Handle onPress event
-    >
+    <View className={circleClasses} onTouchEnd={handleSelect}>
       <Text className="mr-auto pl-3 font-carewallet-manrope">{title}</Text>
     </View>
   );

client/components/filter/TaskFilter.tsx

@@ -28,7 +28,7 @@ export function TaskListFilter({
           ))}
         </View>
       )}
-      <View className="border-t-0.5 mx-auto mt-2 flex w-[95vw] max-w-[95vw] flex-row border border-carewallet-gray" />
+      <View className="border-t-0.5 mx-auto mt-2 flex w-[95vw] max-w-[95vw] flex-row border-carewallet-gray" />
     </View>
   );
 }

client/screens/TaskList.tsx

@@ -25,13 +25,17 @@ import { useFilteredTasks } from '../services/task';
 import { useUsers } from '../services/user';
 import { Task } from '../types/task';
 
-// Screen
 export default function TaskListScreen() {
   const { group: userGroup } = useCareWalletContext();
   const navigator = useNavigation<AppStackNavigation>();
   const [canPress, setCanPress] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const { tasks } = useFilteredTasks({ groupID: userGroup.groupID });
+  // State variables for selected filter options
+  const [sortBy, setSortBy] = useState('All Tasks');
+  console.log(sortBy);
+  // const [taskStatus, setTaskStatus] = useState<string[]>([]);
+  // const [assignedTo, setAssignedTo] = useState<string[]>([]);
 
   const snapToIndex = (index: number) =>
     bottomSheetRef.current?.snapToIndex(index);
@@ -162,6 +166,9 @@ export default function TaskListScreen() {
           snapPoints={snapPoints}
           users={users ?? []}
           statuses={['Complete', 'Incomplete', 'Partial']}
+          setSortBy={setSortBy}
+          // setTaskStatus={(taskStatus: string[]) => setTaskStatus(taskStatus)}
+          // setAssignedTo={(assignedTo: string[]) => setAssignedTo(assignedTo)}
         />
       </GestureHandlerRootView>
     </SafeAreaView>