feat: update habit progress numeric

app/application/habits/[habitId]/progress/[selectedDate].tsx

@@ -0,0 +1,26 @@
+import { Redirect, useLocalSearchParams } from "expo-router"
+
+import { HabitProgress } from "@/presentation/react-native/components/HabitProgress"
+import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
+
+const HabitProgressPage: React.FC = () => {
+  const { habitId, selectedDate } = useLocalSearchParams()
+  const { habitsTracker } = useHabitsTracker()
+
+  const habitHistory = habitsTracker.getHabitHistoryById(habitId as string)
+  const selectedDateParsed = new Date(selectedDate as string)
+
+  if (habitHistory == null) {
+    return <Redirect href="/application/habits/" />
+  }
+
+  return (
+    <HabitProgress
+      habitHistory={habitHistory}
+      key={habitHistory.habit.id}
+      selectedDate={selectedDateParsed}
+    />
+  )
+}
+
+export default HabitProgressPage

domain/use-cases/HabitGoalProgressUpdate.ts

@@ -51,6 +51,16 @@ export class HabitGoalProgressUpdateUseCase
       })
     }
 
+    if (goalProgress.isNumeric()) {
+      return await this.habitProgressCreateRepository.execute({
+        habitProgressData: {
+          date,
+          goalProgress,
+          habitId: habitHistory.habit.id,
+        },
+      })
+    }
+
     throw new Error("Not implemented")
   }
 }

presentation/react-native/components/HabitForm/HabitCreateForm.tsx

@@ -185,19 +185,6 @@ export const HabitCreateForm: React.FC<HabitCreateFormProps> = ({ user }) => {
                   ]}
                 >
                   Habit Type
-                  {/* <Tooltip
-                    title="Routine habits are activities performed regularly, while Target habits involve setting specific objectives to be achieved through repeated actions."
-                    enterTouchDelay={50}
-                    leaveTouchDelay={25}
-                  >
-                    <IconButton
-                      icon="chat-question-outline"
-                      selected
-                      size={24}
-                      onPress={() => {}}
-                      style={{ alignSelf: "center" }}
-                    />
-                  </Tooltip> */}
                 </Text>
                 <SegmentedButtons
                   style={[{ width: "96%" }]}

presentation/react-native/components/HabitProgress.tsx

@@ -0,0 +1,194 @@
+import { useState } from "react"
+import { ScrollView, StyleSheet, View } from "react-native"
+import { Button, Snackbar, Text, TextInput } from "react-native-paper"
+import { SafeAreaView } from "react-native-safe-area-context"
+
+import type { GoalNumeric } from "@/domain/entities/Goal"
+import { GoalNumericProgress } from "@/domain/entities/Goal"
+import type { HabitHistory } from "@/domain/entities/HabitHistory"
+import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
+import { LOCALE, capitalize } from "@/utils/strings"
+
+export interface HabitProgressProps {
+  habitHistory: HabitHistory
+  selectedDate: Date
+}
+
+export const HabitProgress: React.FC<HabitProgressProps> = ({
+  habitHistory,
+  selectedDate,
+}) => {
+  const { habitsTrackerPresenter, habitGoalProgressUpdate } = useHabitsTracker()
+
+  const [isVisibleSnackbar, setIsVisibleSnackbar] = useState(false)
+
+  const onDismissSnackbar = (): void => {
+    setIsVisibleSnackbar(false)
+  }
+
+  const goalProgress = habitHistory.getGoalProgressByDate(selectedDate)
+
+  const values = {
+    progress: 0,
+    min: 0,
+    max: 0,
+  }
+  if (goalProgress.isNumeric()) {
+    values.max = goalProgress.goal.target.value
+  }
+  const [progressValue, setProgressValue] = useState(values.progress)
+
+  if (!goalProgress.isNumeric()) {
+    return <></>
+  }
+
+  const progressTotal = goalProgress.progress + progressValue
+
+  const handleSave = async (): Promise<void> => {
+    setIsVisibleSnackbar(true)
+    await habitsTrackerPresenter.habitUpdateProgress({
+      date: selectedDate,
+      habitHistory,
+      goalProgress: new GoalNumericProgress({
+        goal: habitHistory.habit.goal as GoalNumeric,
+        progress: progressValue,
+      }),
+    })
+    setProgressValue(0)
+  }
+
+  return (
+    <SafeAreaView style={{ flex: 1, justifyContent: "space-between" }}>
+      <ScrollView
+        contentContainerStyle={{
+          justifyContent: "center",
+          alignItems: "center",
+          paddingHorizontal: 20,
+        }}
+      >
+        <Text
+          style={{
+            fontWeight: "bold",
+            fontSize: 28,
+            textAlign: "center",
+          }}
+        >
+          {habitHistory.habit.name}
+        </Text>
+
+        <Text
+          style={{
+            marginTop: 10,
+            fontWeight: "bold",
+            fontSize: 18,
+            textAlign: "center",
+          }}
+        >
+          {capitalize(habitHistory.habit.goal.frequency)} Progress
+        </Text>
+
+        <Text
+          style={{
+            fontSize: 16,
+            textAlign: "center",
+            marginBottom: 15,
+          }}
+        >
+          {selectedDate.toLocaleDateString(LOCALE, {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+        </Text>
+
+        <View
+          style={{
+            width: "100%",
+            borderBottomWidth: 1,
+            borderColor: "#f57c00",
+            marginVertical: 10,
+          }}
+        />
+
+        <Text style={{ marginVertical: 10, fontWeight: "bold", fontSize: 18 }}>
+          {goalProgress.progress.toLocaleString()} /{" "}
+          {goalProgress.goal.target.value.toLocaleString()}{" "}
+          {goalProgress.goal.target.unit}
+        </Text>
+
+        <TextInput
+          placeholder="Progress to add (e.g: 5 000)"
+          value={progressValue === 0 ? "" : progressValue.toString()}
+          onChangeText={(text) => {
+            const hasDigits = /\d+$/.test(text)
+            if (text.length <= 0 || !hasDigits) {
+              setProgressValue(0)
+              return
+            }
+            setProgressValue(Number.parseInt(text, 10))
+          }}
+          style={[
+            styles.spacing,
+            {
+              width: "80%",
+            },
+          ]}
+          mode="outlined"
+          keyboardType="numeric"
+        />
+
+        {goalProgress.progress > 0 && progressValue > 0 ? (
+          <Text
+            style={{
+              fontSize: 16,
+              textAlign: "center",
+              marginBottom: 15,
+            }}
+          >
+            {goalProgress.progress.toLocaleString()} +{" "}
+            {progressValue.toLocaleString()} = {progressTotal.toLocaleString()}{" "}
+            {goalProgress.goal.target.unit}
+          </Text>
+        ) : (
+          <></>
+        )}
+
+        <Button
+          mode="contained"
+          onPress={handleSave}
+          loading={habitGoalProgressUpdate.state === "loading"}
+          disabled={
+            habitGoalProgressUpdate.state === "loading" || progressValue === 0
+          }
+          style={[styles.spacing, { width: "80%" }]}
+        >
+          Save Progress ✨
+        </Button>
+
+        <View
+          style={{
+            width: "100%",
+            borderBottomWidth: 1,
+            borderColor: "#f57c00",
+            marginVertical: 10,
+          }}
+        />
+      </ScrollView>
+
+      <Snackbar
+        visible={isVisibleSnackbar}
+        onDismiss={onDismissSnackbar}
+        duration={2_000}
+      >
+        ✅ Habit Saved successfully!
+      </Snackbar>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  spacing: {
+    marginVertical: 16,
+  },
+})

presentation/react-native/components/HabitsMainPage/HabitCard.tsx

@@ -1,16 +1,17 @@
 import type { IconName } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"
-import { useRouter } from "expo-router"
+import { Link, useRouter } from "expo-router"
 import type LottieView from "lottie-react-native"
 import { useState } from "react"
 import { View } from "react-native"
-import { Checkbox, List, Text } from "react-native-paper"
+import { Button, Checkbox, List, Text } from "react-native-paper"
 
 import type { GoalBoolean } from "@/domain/entities/Goal"
 import { GoalBooleanProgress } from "@/domain/entities/Goal"
 import type { HabitHistory } from "@/domain/entities/HabitHistory"
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
 import { getColorRGBAFromHex } from "@/utils/colors"
+import { getISODate } from "@/utils/dates"
 
 export interface HabitCardProps {
   habitHistory: HabitHistory
@@ -80,14 +81,32 @@ export const HabitCard: React.FC<HabitCardProps> = (props) => {
       }}
       right={() => {
         if (goalProgress.isNumeric()) {
+          const href = {
+            pathname: "/application/habits/[habitId]/progress/[selectedDate]/",
+            params: {
+              habitId: habit.id,
+              selectedDate: getISODate(selectedDate),
+            },
+          }
           return (
-            <View>
+            <Link href={href}>
-              <Text>
+              <View>
-                {goalProgress.progress.toLocaleString()} /{" "}
+                <Text>
-                {goalProgress.goal.target.value.toLocaleString()}{" "}
+                  {goalProgress.progress.toLocaleString()} /{" "}
-                {goalProgress.goal.target.unit}
+                  {goalProgress.goal.target.value.toLocaleString()}{" "}
-              </Text>
+                  {goalProgress.goal.target.unit}
-            </View>
+                </Text>
+
+                <Button
+                  mode="elevated"
+                  onPress={() => {
+                    router.push(href)
+                  }}
+                >
+                  Edit
+                </Button>
+              </View>
+            </Link>
           )
         }