finish?

client-new/src/components/homescreen components/HomeScreenTaskCard.tsx

@@ -1,12 +1,21 @@
 import { ITask } from '@/interfaces/ITask';
-import { fetchTaskTag } from '@/services/TaskService';
+import { fetchTaskTag, getTaskProgress } from '@/services/TaskService';
 import { Text, View } from 'native-base';
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Pressable, TouchableOpacity } from 'react-native';
 
 import RightArrowIcon from '../icons/RightArrowIcon';
 import CircleProgress from '../reusable/CircleProgress';
+import { useQuery } from '@tanstack/react-query';
+import { useUser } from '@/contexts/UserContext';
+import { useIsFocused } from '@react-navigation/native';
+import { color } from 'native-base/lib/typescript/theme/styled-system';
+import {
+  heightPercentageToDP as h,
+  widthPercentageToDP as w
+} from 'react-native-responsive-screen';
+
 
 type HSTCProps = {
   task: ITask;
@@ -15,10 +24,28 @@ type HSTCProps = {
 };
 
 const HomeScreenTaskCard: React.FC<HSTCProps> = ({ task, isAllTasks, handleOnPress }) => {
+  const { user } = useUser();
+  const isFocused = useIsFocused(); 
   const [tag, setTag] = useState<string | null>(null);
   const [isPending, setIsPending] = useState<boolean>(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const { isLoading, error: completeError, data: complete, refetch } = useQuery({
+    queryKey: ['fetchTaskProgress', user?.id, task?.id],
+    queryFn: () => getTaskProgress(user?.id, task?.id)
+  });
+
+  const refreshData = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+
+  useEffect(() => {
+    if (isFocused) {
+      refreshData();
+    }
+  }, [isFocused, refetch]);
+
   useEffect(() => {
     if (!isAllTasks) {
       const fetchData = async () => {
@@ -37,8 +64,19 @@ const HomeScreenTaskCard: React.FC<HSTCProps> = ({ task, isAllTasks, handleOnPre
     }
   }, [isAllTasks, task.id]);
 
+  if (isLoading) {
+    return <Text>Loading...</Text>
+  };
+
+  if (completeError) {
+    return <Text>Error</Text>
+  };
+
   return (
-    <TouchableOpacity onPress={handleOnPress}>
+    <TouchableOpacity
+      onPress={handleOnPress}
+      disabled={complete?.progress === 100}
+    >
       <View
         paddingLeft={5}
         paddingTop={6}
@@ -74,14 +112,13 @@ const HomeScreenTaskCard: React.FC<HSTCProps> = ({ task, isAllTasks, handleOnPre
                 fontWeight: '600',
                 marginBottom: 5
               }}
+              color={complete?.progress === 100 ? '#00000033' : '#2F1D12'}
             >
               {task.task_name}
             </Text>
             <Text
-              style={{
-                fontSize: 14,
-                color: '#2F1D12'
-              }}
+              fontSize={h('1.7%')}
+              color={complete?.progress === 100 ? '#00000033' : '#2F1D12'}
             >
               {task.task_description}
             </Text>

client-new/src/components/reusable/CircleProgress.tsx

@@ -75,6 +75,7 @@ const CircleProgress = ({ task }: CircleProgressProps) => {
         position={'absolute'}
         left={`${textPosition.left}%`}
         top={`${textPosition.top}%`}
+        color={progress?.progress === 100 ? '#00000033' : '#2F1D12'}
       >
         {progress?.progress || 0}%
       </Text>

client-new/src/components/task/InputField.tsx

@@ -1,7 +1,7 @@
 import { IInput } from "@/interfaces/IAction";
 import { Input, View, Text } from "native-base";
 import { ZodIssue, z } from "zod";
-import React from "react";
+import React, { useCallback } from "react";
 import { heightPercentageToDP as h } from "react-native-responsive-screen";
 
 type InputFieldProps = {
@@ -15,12 +15,12 @@ type InputFieldProps = {
 const InputField: React.FC<InputFieldProps> = (InputFieldProps) => {
   const { action, index, setFormState, setFormErrors, formErrors } = InputFieldProps;
 
-  const handleInputChange = (name: string, value: string) => {
+  const handleInputChange = useCallback((name: string, value: string) => {
     const errorMessage = validateInput(value);
 
     setFormState((prevState) => ({ ...prevState, [name]: value }));
     setFormErrors((prevErrors) => ({ ...prevErrors, [name]: errorMessage }));
-  };
+  }, []);
 
   const validateInput = (value: string) => {
     try {

client-new/src/components/task/SubTaskCard.tsx

@@ -17,36 +17,31 @@ type SubTasksProps = {
 
 const SubTaskCard = ({ subtask, navigation }: SubTasksProps) => {
     const { user } = useUser();
-    const isFocused = useIsFocused(); // Hook to check if screen is focused
+    const isFocused = useIsFocused();
 
     const { isLoading, error, data: complete, refetch } = useQuery({
         queryKey: ['fetchSubtaskProgress', user?.id, subtask?.id],
         queryFn: () => getSubtaskProgress(user?.id, subtask?.id)
     });
 
-    if (isLoading) {
-        return <Text>Loading...</Text>
-    };
-
-    if (error) {
-        return <Text>Error</Text>
-    };
-
     const refreshData = useCallback(async () => {
-        // Refetch subtasks data here
-        console.log('[SubTaskSummaryScreen] Refreshing data...')
-        console.log(complete)
         await refetch();
     }, [refetch]);
 
 
     useEffect(() => {
         if (isFocused) {
-            console.log('[SubTaskCard] Refreshing data...')
-            refreshData(); // Refresh data when screen gains focus
+            refreshData();
         }
     }, [isFocused, refetch]);
-    console.log('Subtask Progress:', complete)
+
+    if (isLoading) {
+        return <Text>Loading...</Text>
+    };
+
+    if (error) {
+        return <Text>Error</Text>
+    };
 
     return (
         <Pressable

client-new/src/navigation/AppStack.tsx

@@ -28,7 +28,7 @@ export default function AppStack() {
         <Stack.Screen name="SubTask Summary Screen" component={SubTaskSummaryScreen} />
         <Stack.Screen name="Action Screen" component={ActionScreen} />
       </Stack.Group>
-      <Stack.Group screenOptions={{ presentation: 'modal' }}>
+      <Stack.Group>
         <Stack.Screen name="Guide Collection Screen" component={GuideCollectionScreen} />
         <Stack.Screen name="Home Screen Guides" component={HomeScreenGuides} />
         <Stack.Screen name="Guide Screen" component={GuideScreen} />

client-new/src/screens/app/GuideCollectionScreen.tsx

@@ -14,6 +14,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { moderateScale } from '../../utils/FontSizeUtils';
+import BackArrowIcon from '@/components/icons/BackArrow';
 
 export default function GuideCollectionScreen({ navigation }) {
   const [tagsGuides, setTagsGuides] = useState<Map<string, IGuide[]>>(
@@ -105,17 +106,26 @@ export default function GuideCollectionScreen({ navigation }) {
           paddingLeft={w('1.5%')}
           paddingRight={w('1.5%')}
         >
-          <View alignItems={'center'}>
+          <View width={'100%'} marginTop={h('2%')} marginBottom={h('2%')} flexDirection={'row'} justifyContent={'space-between'} alignItems={'center'}>
+            <Pressable onPress={() => navigation.goBack()}>
+              <View flexDirection={'row'} alignItems={'center'}>
+                <BackArrowIcon />
+              </View>
+            </Pressable>
             <Text
               fontSize={moderateScale(32)}
               fontFamily={'rocaOne'}
               fontWeight={'Regular'}
               fontStyle={'normal'}
               color={'barkBrown'}
               margin={h('2%')}
+              alignSelf={'center'}
+              justifyContent={'center'}
+              alignItems={'center'}
             >
               Guides
             </Text>
+          </View>
 
             <View>
               <Input
@@ -126,8 +136,7 @@ export default function GuideCollectionScreen({ navigation }) {
                 backgroundColor={'creamyCanvas'}
                 borderRadius={20}
                 marginBottom={'20px'}
-              />
-            </View>
+            />
           </View>
           <View paddingTop={h('2%')} paddingBottom={h('4%')}>
             {[...tagsGuides.keys()].map((tag, key) => (

client-new/src/screens/app/GuideScreen.tsx

@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Box, Image, ScrollView, Text, View } from 'native-base';
 
 import React from 'react';
-import { ActivityIndicator } from 'react-native';
+import { ActivityIndicator, Pressable } from 'react-native';
 import {
   heightPercentageToDP as hp,
   widthPercentageToDP as wp
@@ -12,6 +12,8 @@ import {
 import { fetchGuideByName } from '../../services/GuideService';
 import { getMonth } from '../../utils/DateUtils';
 import { moderateScale, verticalScale } from '../../utils/FontSizeUtils';
+import BackArrowIcon from '@/components/icons/BackArrow';
+import LegacyWordmark from '@/components/reusable/LegacyWordmark';
 
 const MarkdownWrapper: React.FC<any> = ({ children }) => {
   return (
@@ -75,9 +77,35 @@ const GuideScreen: React.FC<GuideScreenProps> = ({ navigation, route }) => {
   return (
     guide && (
       <ScrollView>
-        <View bg="#FFB017" w={wp('100%')}>
+        <View bg="#FFB017" w={wp('100%')} height={hp('100%')}>
+          <View
+            flexDirection={'row'}
+            justifyContent={'space-between'}
+            alignItems={'center'}
+            px={wp('5%')}
+            py={hp('2.5%')}
+            marginTop={hp('5%')}
+          >
+            <Pressable onPress={() => navigation.goBack()}>
+              <View flexDirection={'row'} alignItems={'center'}>
+                <BackArrowIcon />
+                <Text
+                  fontFamily={'dmSans'}
+                  fontWeight={'Bold'}
+                  fontStyle={'normal'}
+                  fontSize={moderateScale(14)}
+                  color={'deepEvergreen'}
+                >
+                  Back
+                </Text>
+              </View>
+            </Pressable>
+            <View>
+              <LegacyWordmark />
+            </View>
+          </View>
           <View alignItems={'center'}>
-            <View pt={hp('12%')} flexDirection={'column'} w={wp('75%')}>
+            <View flexDirection={'column'} w={wp('75%')}>
               <Text
                 maxW={wp('90%')}
                 py={hp('1.25%')}

client-new/src/screens/app/HomeScreen.tsx

@@ -128,7 +128,7 @@ export default function HomeScreen({ navigation }) {
               >
                 Guides
               </Text>
-              <Pressable onPress={() => navigation.navigate('Guide Screen')}>
+              <Pressable onPress={() => navigation.navigate('Guide Collection Screen')}>
                 <Text
                   color={'#909090'}
                   fontSize={15}

client-new/src/screens/app/tasks/ActionScreen.tsx

@@ -99,7 +99,7 @@ const ActionScreen = ({ navigation, route }: ActionScreenProps) => {
 
   return (
     <ScrollView backgroundColor={'#FFFAF2'}>
-      <View marginX={w('5%')} marginTop={h('5%')}>
+      <View marginX={w('5%')} marginTop={h('8%')}>
         <HStack flexDirection="row" justifyContent="center" flex={1}>
           <Pressable flex={1} onPress={() => navigation.goBack()}>
             <BackArrowIcon />